js call 以及apply

用实例来说；一半什么场合用到bind、call、apply呢？

【一个对象 A】的方法被【另外一个对象 B】【引用】的时候（请注意 引用 的意思，区分 调用 ）；【对象A】的方法内的this做用域就不指向【对象A】了，这个时候你再用this.XX项调用【对象A】的某个属性就会发生错误。

举个例子吧；

var aHello = {
    name : "hello",
    showName : function(){
        console.log(this.name);
        //console.log(this.tagName);
    }
}

document.querySelector('a').onclick = aHello.showName;

这个时候由于【对象aHello】的方法showName被【对象document.querySelector('a')】 引用，因此showName内的this就不指向【aHello】了，指向【对象document.querySelector('a')】，能够去掉注释进行验证。

可是咱们的需求是，点击a的时候就显示aHello的名称。

这个时候该怎么作呢？

方法一：在onclick的时候改用匿名函数，匿名函数内再 调用 【对象aHello】的方法；
如：

var aHello = {
    name : "hello",
    showName : function(){
        console.log(this.name);
    }
}

document.querySelector('a').onclick = function(){
    aHello.showName();
}

ok！开心的解决了；

然而，是否是以为太怂了。咱们来衍生一下第二种方法，而后再说bind和call和apply的区别；

方法二：由于 引用， onclick改变了【对象aHello】showName内this的指向。因此咱们必须在【 引用】的时候对showName方法进行从新绑定新的指向；
如：

var aHello = {
    name : "hello",
    showName : function(){
        console.log(this.name);
    }
}

document.querySelector('a').onclick = aHello.showName.bind(aHello);

恩！高大上，不用写太多代码。

接下来说一下bind和apply、call的区别;
首先这些方法多属于【原型prototype】的方法。

题主的老师 可能没听过【引用】与【调用】因此用了一个临时与永久的概念来说解，作技术，最好不要听老师的......



还用前面例子来说（随便举的主要区分区别，你们别挑刺）；

var aHello = {
    name : "hello",
    setYourAge : function(name,age){
       console.log(name);
       console.log(age);
    }
}

document.querySelector('a').onclick = aHello.setYourAge.call(aHello,'王佳欣',25);

这个时候你能够看到打开页面，浏览器控制台就会立刻输出 “王佳欣”，“25”；
而后，你再点击的时候，根本不会，再输出的；ok，这就是 【调用】含义；
call和apply是调用对象方法的意思；也就是说下面的3句代码其实实现是同样的；

aHello.setYourAge.call(aHello,'王佳欣',25);
aHello.setYourAge.apply(aHello,['王佳欣',25]);
aHello.setYourAge('王佳欣',25);

既然能够直接调用干吗还要call、apply方法呢，我先说一下 call、apply 和bind的区别吧；

var aHello = {
    name : "hello",
    setYourAge : function(name,age){
       console.log(name);
       console.log(age);
    }
}

document.querySelector('a').onclick = aHello.setYourAge.bind(aHello,'王佳欣',25);

bind的做用是【引用】，这个时候你打开浏览器控制台不会有输出。你点击a 标签的后，才会有输出，点一次，输出一次。
粗暴一点说，这就是区别立刻【调用】和【引用】的区别。

上面咱们说到，下面三局代码实现是同样的。那么call、apply有什么做用呢？

aHello.setYourAge.call(aHello,'王佳欣',25);
aHello.setYourAge.apply(aHello,['王佳欣',25]);
aHello.setYourAge('王佳欣',25);

call、apply有什么做用
你们开发中是否是有这样的需求（我老是喜欢用需求来做为入口）
咱们常常会在咱们项目中作一些通用的对象，这些对象用来处理咱们的一些通用的过程。好比：通用验证方法；(注：不少人喜欢用 继承的基础类 来做为例子.....我一时想不到好的继承例子，就用通用类的例子吧！)

/*通用验证对象*/
var validator = {
    validateName : function(){
         console.log(this.name);
    },
    validateAge  : function(){
         console.log(this.age)
    }
    //.....
}

你们能够看到咱们的 【通用对象validator】内，是没有定义属性（name、age）的。

这个时候好比咱们有两个对象须要验证；

/*对象kobe*/
var kobe = {
    name : 'kobe bryant',
    age  : -1
}

/*对象 allen*/ 
var allen = {
    name : 'allen iverson',
    age  : 10
}

那咱们调用验证的时候就须要用到call或者apply了
如：

var isKobeAgeValid = validator.call(kobe);

var isAllenAgeValid = validator.call(allen);

额！差很少了了.....

 

转载自 王佳欣 连接：http://www.zhihu.com/question/20289071/answer/93261557 来源：知乎 著做权归做者全部，转载请联系做者得到受权。