call与apply

来源:互联网 发布:在线编程网站 编辑:程序博客网 时间:2024/06/05 12:45

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。二者的作用完全一样,只是接受参数的方式不太一样。

理解

obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1, arg2, ...]);
  • this 是个参数,普通的函数调用隐式传入 this ,call 和 apply 可以显式指定它。
  • call和apply是Function的方法,他的第一个参数是this,第二个是Function的参数。比如你的方法里写了this,普通调用这个方法这个this可能是window。而如果你用了call,第一个参数写啥,里面的this就是啥
  • 如果call或apply的第一参数是null的话, this指向window
  • call 和 apply 的作用完全一样,唯一区别是apply接受的是数组参数,call接受的是连续参数。

例子

在JavaScript OOP 中,我们经常这样定义函数:

function cat(){}cat.prototype={        food:"fish",      say: function(){          console.log("I eat "+this.food);        }}var blackCat = new cat;blackCat.say(); // I eat fish

如果我们有一个对象whiteDog = {food:”bone”},我们不想对它重新定义say方法,那么我们可以通过call或apply用blackCat的say方法:blackCat.say.call(whiteDog);

whiteDog = {food: 'bone'}blackCat.say.call(whiteDog) // // I eat bone

所以,可以看出call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。

其实就是动态的改变this了,下面例子就说明了。。。

function add(a, b){console.log(this);}function sub(a, b){console.log(this);}add(1,2); // "Window"sub(1,2); // "Window"add.call(sub, 1, 2); // "sub(a, b)"sub.apply(add, [1, 2]); // "add(a, b)"

使用

  • 调用原生对象的方法
var a = {0:1, 1:"yyy", length: 2}; a.slice(); //Uncaught TypeError: a.slice is not a functionArray.prototype.slice.call(a);//[1, "yyy"]

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

  • 实现继承
var Cat = function(){    this.name = "miaomiao";    this.age = 3;}var dog = {};console.log(dog);//Object {} ,空对象Cat.call(dog);console.log(dog); //Object {name: "miaomiao", age: 3}