从零开始学 Web 之 JavaScript(三)函数

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

img_25336e0b5504f9a5b326090f41d9dcd7.png

一、函数

1、函数的定义

// 第一种
function fn1(){
    console.log("我是第一种定义方法!");
}

// 第二种
var fn2 = function (){
    console.log("我是第二种定义方法!");
};  // 注意分号

function (){
   console.log("我是第二种定义方法!");
}();  // 第二种方式的调用方式之一:函数的自调用

//第三种
var fn3 = new Function("console.log('我是第三种定义方法!')");

第一种:(函数的声明)第一种定义方法最强大,定义完毕后,在哪里使用都可以,无位置限制。
第二种:(函数表达式:匿名函数) 后两种定义方法是有局限性的。(使用函数必须在定义函数之后)

2、函数的调用

函数名();

3、函数名

  • 要遵循驼峰命名法。
  • 不能同名(函数重载),否则后面的函数会覆盖前面的函数。
//打印函数名,就等于打印整个函数。
console.log(fn);
//打印执行函数,就等于打印函数的返回值。
console.log(fn()); 

4、形参和实参

  • 形参不需要写 var.
  • 形参的个数和实参的个数可以不一致 。

5、返回值

  1. 如果函数没有显示的使用 return 语句 ,那么函数有默认的返回值:undefined
  2. 如果函数使用 return 语句,但是 return 后面没有任何值,那么函数的返回值也是:undefined.

6、变量和作用域

全局变量:在 script 使用 var 定义的变量(所有的 script 共享其全局性,js 里面没有块级作用域概念,只有全局作用域和局部作用域)。

隐式全局变量:在 script 没有 var 的变量。

function fn(){
  var a = b = c = 1;       // b和c就是隐式全局变量(等号)
  var a = 1; b = 2; c = 3;   // b和c就是隐式全局变量(分号)
  var a = 1 , b = 2 , c = 3;  // b和c就不是隐式全局变量(逗号)
}

(全局变量是不能被删除的,隐式全局变量是可以被删除的)

var num1 = 10;
num = 20;
delete num1;
delete num2;
console.log(typeof num1); // number
console.log(typeof num2); // undefined

局部变量函数内部用 var 定义的变量和形参。

6.1、变量声明提升(预解析)

作用:查看语法错误。js的解析器在页面加载的时候,首先检查页面上的语法错误。把变量声明提升起来。(变量声明提升和函数整体提升)

6.2、变量的提升

只提升变量名,不提升变量值。

consolas.log(aaa);// 打印的结果是 undefined ,因为只提升变量名,不提升变量值。
var aaa = 111; 

在函数范围内,照样适用。

6.3、函数的提升

function 直接定义的方法:整体提升(上面说的第一种函数定义的方法).

fn();

var aaa = 111;
function fn(){
    //变量声明提升在函数内部照样实用。
    //函数的就近原则(局部变量作用域),打印的aaa不是111,而是 undefined。
    console.log(aaa); // undefined
    var aaa = 222;
}

预解析会分块:

多对的 script 标签中函数重名的话,预解析不会冲突。也就是预解析的作用域是每一个的 script 标签。

var先提升,function再提升:

示例:

console.log(a); // 输出a函数体
function a() {
    console.log("aaaaa");
}
var a = 1;
console.log(a); // 输出1

打印第一个结果的时候,var会提升,之后 function 再提升,但是函数a和变量a重名,function的a在后面覆盖掉变量a,所以第一个输出 a 函数体.

第二个前面var a = 1;提升之后,这个位置就相当于只有 a = 1; 赋值,所以第二个打印1.

6.4、匿名函数

作用大致如下:

//1.直接调用
(function (){
    console.log(1);
})();

//2.绑定事件
document.onclick = function () {
    alert(1);
}

//3.定时器
setInterval(function () {
    console.log(444);
},1000);

img_25336e0b5504f9a5b326090f41d9dcd7.png

img_964e5550b9dc423fcb4297d85f09ac10.png

目录
相关文章
|
18天前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
随着互联网的发展,网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具,可在Node.js环境中模拟用户行为,高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能,通过设置代理IP、User-Agent和Cookies等技术,实现复杂的Web Scraping任务,并提供示例代码,展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数,开发者可以有效规避目标网站的反爬机制,提升数据抓取效率。
Puppeteer的高级用法:如何在Node.js中实现复杂的Web Scraping
|
21天前
|
JavaScript 前端开发 开发者
哇塞!Vue.js 与 Web Components 携手,掀起前端组件复用风暴,震撼你的开发世界!
【8月更文挑战第30天】这段内容介绍了Vue.js和Web Components在前端开发中的优势及二者结合的可能性。Vue.js提供高效简洁的组件化开发,单个组件包含模板、脚本和样式,方便构建复杂用户界面。Web Components作为新兴技术标准,利用自定义元素、Shadow DOM等技术创建封装性强的自定义HTML元素,实现跨框架复用。结合二者,不仅增强了Web Components的逻辑和交互功能,还实现了Vue.js组件在不同框架中的复用,提高了开发效率和可维护性。未来前端开发中,这种结合将大有可为。
65 0
|
21天前
|
存储 JavaScript NoSQL
构建高效Web应用:使用Node.js和Express框架
【8月更文挑战第30天】本文将引导你了解如何使用Node.js和Express框架快速搭建一个高效的Web应用。通过实际的代码示例,我们将展示如何创建一个简单的API服务,并讨论如何利用中间件来增强应用功能。无论你是新手还是有经验的开发者,这篇文章都将为你提供有价值的见解。
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-函数的返回值
关于JavaScript函数返回值的基础知识。
20 9
JavaScript基础知识-函数的返回值
|
2天前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
16 4
JavaScript基础知识-函数的参数
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-立即执行函数
关于JavaScript基础知识中立即执行函数的介绍。
16 2
JavaScript基础知识-立即执行函数
|
15天前
|
JavaScript 前端开发
JavaScript 函数
JavaScript 函数
21 9
|
17天前
|
JavaScript 前端开发
前端JS函数
【9月更文挑战第4天】前端JS函数
21 6
|
13天前
|
存储 JavaScript 前端开发
JS中的数组有哪些常用操作函数和属性
【9月更文挑战第7天】JS中的数组有哪些常用操作函数和属性
9 1