JS中的call、apply、bind三者的区别

sk  2017-8-22
0

首先,这三者的共同点是:

   一、改变this的指向(也有对象继承的味道);

   二、第一个参数都是this要指向的对象;

   三、都可以利用后续参数传参;


写法分别是:

1.call ---> function.call(obj,参数,参数....);

2.apply ---> function.apply(obj,[数组]);

3.bind ---> function.bind(obj,参数,参数...);    function.bind(obj)(参数,参数...);


接着,根据例子来说下他们的区别


var xk = {
    name:"小k",
    age:20,
    sex:"男",
    say:function(){
       alert(this.name + "今年" + this.age + "我是" + this.sex);
    }
}

var xz = {
   name:"小z",
   age:21,
   sex:"女"
}
xk.say();  //返回的肯定是小k的信息

但是怎么才能让它调用say返回小z的信息呢,这个时候就要用的call,apply,bind。

分别的用法是:

xk.say.call(xz);

xk.say.apply(xz);

xk.say.bind(xz)();   注:这儿直接调用不会有结果,因为bind返回的还是一个函数,所以后面要加括号。

那么call和apply的区别是什么呢?稍微改下例子:

var xk = {
    name:"小k",
    age:20,
    sex:"男",
    say:function(){
       alert(this.name + "今年" + this.age + "我是" + this.sex + "喜欢" + this.sport + "在" + this.xuexiao);
    }
}

var xz = {
   name:"小z",
   age:21,
   sex:"女"
}
这个时候就要在后面传参。

对于call就是这样:

xk.say.call(xz,"篮球","篮球学校");

而对于apply则是:

xk.say.apply(xz,["篮球","篮球学校"]);

注:因为apply的第二个参数是数组。


最后要注意的是,那么bind遇到这种情况怎么传参数呢?

首先它可以像call那样传参数(只是后面多一个括号):

xk.say.bind(xz,"篮球","篮球学校")();

还有一种方式是(在调用的时候再传参):

xk.say.bind(xz)("篮球","篮球学校");


以上这些就是笔者对js里的call、apply、bind的简浅理解。有不同看法或者补充的可以留言交流。



回复 0  
游客  现在


二维码