JavaScript中函数的四种调用模式

Posted 2020-07-06

理解函数的四种调用方法，可以有效的帮助我们分析和理解javascript代码。但是经常有人分不清楚或者不理解这四种调用模式，在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:1、函数调用形式 2、方法调用形式 3、构造器调用形式 4、上下文调用形式（apply，call）这里所有的调用模式中,最主要的区别在于关键字 this 的意义.下面分别介绍这几种调用形式。

 

一、函数调用形式

 

函数调用模式是最简单也是最好理解的一种模式，就是一般在声明一个函数后，直接调用即是函数调用模式。例如：

1 function fn (){
2 　　console.log(this);
3 }
4 fn();//函数的调用模式

这里的关键是，在函数的调用模式中，函数里的this关键字指向是全局对象，如果在浏览器中即是window对象。上段代码执行结果：

二、方法调用模式

同样是一个函数，将其赋值给一个对象的成员后就不一样了。将函数赋值给一个对象的成员后，该函数就不应叫函数而是应当叫做方法。例如：

var func = function () {
    console.log(this);
}
var obj = {};
obj.fn = func; //将函数赋值给对象的成员
console.log(func === obj.fn);//判断方法体是否一样
func(); //函数调用
obj.fn(); //方法调用

此时，obj.fn和func的方法体是一样的，即 obj.fn===func 为true。但是，这里有一个差别就是func()的结果是window对象，而obj.fn()的结果是obj这个对象。

由此可见，当函数作为方法被调用的时候，函数内部的this是指向当前对象的。

三、构造器调用模式

函数可以当做是构造函数被调用，从而创建一个新的对象出来。此时的语法就是在函数前面加上一个关键字new。

//定义一个构造函数
var Person = function () {
    this.name = "Tom";
    this.sayHello = function () {
        console.log("你好,我是" + this.name);
        };
    };
//调用构造函数,创建对象
 var p = new Person();
// 使用对象
p.sayHello();

这个构造函数和创建对象的方法比较简单，我们可以看出，构造函数中this指向的是新创建出来的对象或者说是新创建对象的引用。

我们接下来分析一下这段代码是怎样创建一个新对象的。程序首选定义了一个Person函数

1. 程序在执行到这一句的时候, 不会执行函数体, 因此 JavaScript 的解释器并不知道这个函数的内容

2. 接下来执行new 关键字, 创建对象, 解释器开辟内存, 得到对象的引用, 将新对象的引用交给函数

3. 紧接着执行函数, 将传过来的对象引用交给 this . 也就是说, 在构造方法中, this 就是刚刚被 new 创建出来的对象

4. 然后为 this 添加成员, 也就是为对象添加成员

5. 最后函数结束, 返回 this , 将 this 交给左边的变量p

分析过构造函数的执行以后, 可以得到, 构造函数中的 this 就是当前new出来的对象。

刚刚分析过构造函数中this的指向问题，在构造函数还有一个问题就是return的含义。在构造函数中 return 的意义发生了变化, 首先如果在构造函数中, 如果返回的是一个对象, 那么就保留原意。 如果返回的不是对象, 而是如数字, 布尔和字符串,null，undefined，则直接忽略，或者说返回了this。例如：

 var fn = function () {
        this.name = ‘tom‘;
        return {
            name:‘jack‘
        };
    };
    var p = new fn();
    console.log(p.name); //结果是jack

由此可见，执行 var p = new fn();这段代码后，p是return 后面的对象。再看例子2：

var fn = function () {
        this.name = ‘tom‘;
        return ‘jack‘;
    };
    var p = new fn();
    console.log(p); //p是对象{name:‘tom‘}
    console.log(p.name); //结果是tom

可以看出，由于return 后面是字符串，则return语句无效，函数返回this。所以就创建了新对象，里面添加了name属性。

 

还有第四种调用模式，上下文调用模式，由于篇幅关系，我在下篇博客中会详细介绍。