美文网首页
理解和熟练运用js中的call及apply

理解和熟练运用js中的call及apply

作者: nengzhuan_zhang | 来源:发表于2018-06-02 16:28 被阅读0次

call和apply

obj.call(thisObj,arg1, arg2, ...);

obj.apply(thisObj,[arg1, arg2, ...]);

两者作用一致,都是把obj(即this)绑定到thisObj,这时候thisObj具备了obj的属性和方法。或者说thisObj『继承』了obj的属性和方法。绑定后会立即执行函数。

唯一区别是apply接受的是数组参数,call接受的是连续参数。

function add(j, k){

    return j+k;

}

function sub(j, k){

    return j-k;

}

我们在控制台运行:

add(5,3); //8

add.call(sub, 5, 3); //8

add.apply(sub, [5, 3]); //8

sub(5, 3); //2

sub.call(add, 5, 3); //2

sub.apply(add, [5, 3]); //2

作用1.调用原生对象的方法

示例:

var a = {0:1, 1:"yjc", length: 2};

a.slice(); //TypeError: a.slice is not a function

Array.prototype.slice.call(a);//[1, "yjc"]

对象a类似array,但不具备array的slice等方法。使用call绑定,这时候就可以调用slice方法。

作用2:实现继承

通过call和apply,我们可以实现对象继承。示例:

var Parent = function(){

    this.name = "yjc";

    this.age = 22;

}

var child = {};

console.log(child);//Object {} ,空对象

Parent.call(child);

console.log(child); //Object {name: "yjc", age: 22}

以上实现了对象的继承。

作用3:bind的使用

obj.bind(thisObj, arg1, arg2, ...);

把obj绑定到thisObj,这时候thisObj具备了obj的属性和方法。与call和apply不同的是,bind绑定后不会立即执行。

同样是add()和sub():

add.bind(sub, 5, 3); //不再返回8

add.bind(sub, 5, 3)(); //8

如果bind的第一个参数是null或者undefined,等于将this绑定到全局对象。

使用示例1:

functionadd(c,d){

return this.a +this.b + c + d;   

 }

vars = {a:1, b:2};    

console.log(add.call(s,3,4));// 1+2+3+4 = 10

console.log(add.apply(s,[5,6]));// 1+2+5+6 = 14

使用示例2:

        window.firstName = "Cynthia";

        window.lastName = "_xie";

        var myObject = {firstName:'my', lastName:'Object'};

        functiongetName(){            

            console.log(this.firstName + this.lastName);

        }

        functiongetMessage(sex,age){            

            console.log(this.firstName + this.lastName + " 性别: " + sex + " age: " + age );

        }

        getName.call(window); // Cynthia_xie        getName.call(myObject); // myObject                getName.apply(window); // Cynthia_xie        getName.apply(myObject);// myObject                getMessage.call(window,"女",21); //Cynthia_xie 性别: 女 age: 21                getMessage.apply(window,["女",21]); // Cynthia_xie 性别: 女 age: 21                getMessage.call(myObject,"未知",22); //myObject 性别: 未知 age: 22                getMessage.apply(myObject,["未知",22]); // myObject 性别: 未知 age: 22

相关文章

网友评论

      本文标题:理解和熟练运用js中的call及apply

      本文链接:https://www.haomeiwen.com/subject/xgyrsftx.html