从零开始学 Web 之 JavaScript（三）函数
大家好，这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号，欢迎大家订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！ 一、函数 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、返回值 如果函数没有显示的使用 return 语句 ，那么函数有默认的返回值：undefined 如果函数使用 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);
