理解函数的四种调用方法,可以有效的帮助我们分析和理解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属性。
还有第四种调用模式,上下文调用模式,由于篇幅关系,我在下篇博客中会详细介绍。