关于函数，你知多少？

Posted 2020-10-11

我们都知道，JS 中没有的类的概念。

而 函数 则是 JS 中 很重要，很重要，很重要的一点。

理解 函数 也是非常有必要的。

先来看看 函数的定义。

如下：

 1 // 函数声明
 2 // 函数声明不会立即调用，可以在你需要的时候调用它
 3 function demo(){
 4 
 5 }
 6 
 7 // 函数表达式, 该函数也可称为匿名函数(无函数名)
 8 // 该函数保存在一个变量中,可通过变量名调用该函数
 9 var demo = funciton(){
10 
11 };
12 
13 // 构造函数（不推荐）
14 // 该方法会造成两次解析代码，且js中 很多都避免使用 new 关键字
15 var demo = new function(){
16 
17 }

上面讲到了“函数的定义”,但是要怎么理解“函数声明”与“函数表达式”的不同呢？

让我们看看什么是“函数提升”？。

“函数提升”,会把当前作用域（作用域的问题，后面会讲到）提升到前面的行为。这又代表着什么好处呢。

举个例子：

 1 // 调用函数 
 2    test();
 3 
 4 // 函数声明
 5 function test(){
 6     alert(‘调用成功‘);
 7 }
 8 
 9 // 调用函数
10    test();  // 报错
11 
12 // 函数表达式
13 var  test = function(){
14    alert(‘调用成功‘)；
15 }

我们知道代码是从上而下的执行，一个变量若没有声明，则会抛出该变量未声明的报错信息。然后如上，为何可以如此呢？

这就是“函数提升”乾坤大罗移的时间了，由于“函数提升”的关系,因此调用函数，可以在函数声明之前。

但是，但是，但是，使用函数表达式不能被提升。

说了这么多，区别找到了吗 ? 除了“函数提升”,在写法上也有不同,这个细心的问题，就交给拥有慧眼的你了。

到这，我们已经了解了，函数的定义。也知晓了常用 调用函数的 方法。 接下来，我们聊聊 函数的参数

说到函数的参数，先看段代码吧！

1  demo(2,3); // 2,3 实参 
2 
3  function demo(sum1,sum2){ // sum1,sum2 虚参
4    return sum1 + sum2;    
5  }

函数参数分为：

1.  显示参数：在函数定义时列出（也称虚参） 
2.  隐藏参数（arguments）：在函数调用时传递给函数真正的值（也称实参）

js 函数有个内置对象 arguments 对象，该对象包含了函数调用的参数数组。

参数规则：

1.  函数定义时没有对参数指定数据类型，也就是说，参数可以为任何类型
2.  函数对隐藏参数(arguments)的个数没有检测，也就是说可以传入比定义时参数的多
3.  默认参数的值为 “undefined”

再，再接下来聊聊 函数的调用 

也顺带着了解下 this 。

 

this 是什么？ this 是指向当前调用的对象。

 1 // 作为一个函数调用
 2    test();
 3 
 4 //当函数没有被自身的对象调用时，this的值则会变成全局对象
 5 function test(){
 6     alert(this);   //  若在浏览器中打开,全局对象则是 window对象
 7 }
 8 
 9 // 作为一个对象的方法调用
10 var obj = {
11      sum1 : 10,
12      sum2 : 10,
13      sum   : function(){
14          console.log( sum1+sum2 );
15          console.log( this );
16      }  
17 }
18 // obj对象调用该函数 ，this的值指向当前对象 obj
19      obj.sum(); // 20, obj
20 
21 // 使用构造函数调用函数,
22 function test(name,age){
23     this.name = name;
24     this.age    = age;
25 }
26 // this 无任何值，this的值在调用实例化对象时(new object)创建
27 var obj = new test(‘Beck‘,21);
28       obj.name   // Beck
29 
30 // 自调用函数  
31 (function(){
32    console.log(‘自调用函数‘);
33 })

还有一种方式，函数的方法调用。我们知道，函数在js中也是对象， 也有属性和方法。

举个例子

1 function test(sum1,sum2){}
2 // 统计的是参数的个数
3 test.length  // 2

接下来，要了解的是，函数预定义的两个方法 “calc()”,“apply()”;

这两个方法，在于昨天总算明白一点，特此记录下。

这两个方法第一个参数，必须是 对象本身，也就是设置 this的值

而 calc() 与 apply() 的区别在于 第二个参数的不同、

apply() 的第二个参数,则是合成一个数组，而 calc() 的参数，则是全部显现的定义（从第二个参数开始）

举个例子

 1 // 定义个对象
 2 var obj = {};
 3 // 声明一个函数
 4 function test(sum1,sum2){
 5    console.log(sum1+sum2);  
 6 }
 7 //使用apply方法  没有自身对象调用 this的值提升为全局对象
 8 test.apply(this,[10,10]); // this的值为window ,输出 20
 9 
10 // 设置 this的值为 obj
11 test.apply(obj,[10,10]); // this的值为 obj. 输出20
12 
13 // 值的注意是是，即使只有一个参数，也必须使用 数组的方式传递
14 eg: test.apply(this,[10]);  //不然会报错
15 
16 // 使用 calc 方法 同上，只是参数定义的方式不同
17 test.calc(this,10,10);   // this的值为 window. 输出20
18 test.calc(obj,10,10);   // this的值为 obj ，输出 20

其实，看到两个方法差不多，可能到这，又要很多人纠结了，既然差不多，那么该使用哪个方法好一点呢。

也没必要纠结，使用哪一个方法，具体看你传入的参数哪个方便，哪个方便就使用哪个。

记录就这么多，后续有更好的理解，会持续维护。如果有错的地方，也希望你们指出来。

祝大家学习进步，共勉！