JavaScript函数调用模式

在JavaScript中共有4种函数调用模式:函数调用模式、方法调用模式、构造器调用模式、apply/call调用模式

1. 函数调用模式:作为函数被直接调用,最简单易懂的方式。
这是最常见的模式,只需在函数名后面加上()即可。

function myFunc(){};
myFunc();

2.方法调用模式:作为方法被对象调用,即面向对象编程。
在这种模式中,函数是对象的属性,调用函数即为调用该对象的方法。

var obj = {};
obj.func = function(){};
obj.func();

除了由对象调用外,该模式与函数调用模式最大的不同在于this的指向不同。
函数调用模式的this指向window,因为它是直接使用的,函数的上下文是全局的上下文。
方法调用模式的this即为方法所属的对象。

3. 构造器调用模式:作为构造器,在构造的过程中,创建新的对象。
构造器调用模式具有以下特点:(1)创造一个新的对象;(2)将这个对象传递给构造器作为this参数。
使用构造器时,我们需要new关键字。

function MyFunc(){this.func = function(){return this;}};

var constructor1 = new MyFunc();
var constructor2 = new MyFunc();
constructor1.func();//返回constructor1;
constructor2.func();//返回constructor2;

可以看出,我们定义了一个函数,但调用了两次构造函数而产生两个不同的实例,这是方法调用模式所不及的地方。并且,在方法调用模式中,this为方法所属的对象,但在构造器调用模式中,this为创建的对象。

4. apply/call调用模式:由函数apply()或call()调用。
在方法调用模式和构造器调用模式中,this虽指向不同但却是固定的,如果我想让this指向任意我所需要的对象,就要用到第四种调用模式了。
apply和call的使用方法类似,在调用一个函数时需传入两个参数:(1)用于作为函数上下文的对象;(2)参数数组或参数列表。

function myFunc(){
    var result = 0;
    for(var i=0;i<arguments.length;i++){
        result += arguments[i];
    }
    this.result = result;
}

var obj1 = {};
var obj2 = {};
myFunc.apply(obj1,[1,2,3]);//obj1.result=6;
myFunc.call(obj2,1,2,3,4);//obj2.result=10;

所有函数在被调用的时候都会隐性的传入两个参数:this和arguments。所谓隐性,即无需我们定义和赋值,由系统自动完成。在使用apply/call时传入的第一个参数即为this对象,如上例apply()中this为obj1,call()中this为obj2。第二个参数为调用myFunc时传给myFunc的参数,虽然在myFunc的“()”内我们没有定义要传入的参数,但我们通过arguments仍可以获取到传入的参数。
在这种模式中,我们既完成了函数的调用,又改变了this对象,而apply和call的不同在于,apply后面的参数是一个数组,call则无需数组,直接用“,”分割。

posted @ 2019-09-20 09:02 YogurtQ 阅读(...) 评论(...) 编辑 收藏