Reference:
https://www.jianshu.com/p/012223103355

http://www.ecma-international.org/ecma-262/5.1/#sec-12.4

js基础知识---call,apply,bind的用法

小兴nice 关注

2017.04.09 00:36* 字数 1858 阅读 736评论 2喜欢 11

call，apply详解

javascript中，call和apply方法的用途是为了扩充函数赖以生存的作用域，通俗点来说，就是为了动态改变函数体内部this的指向。
用途： 扩充函数赖以生存的作用域。
好处： 对象与方法之间不需要任何的耦合关系。
javascript的一大特点是，函数存在定义时上下文，运行时上下文，和上下文是可变的，这样的概念。

先上一个例子：

function showColor(){
    console.log("my color is:" + this.color);
}
window.color = "red";

showColor.call(window);    //my color is:red

上面的例子中，shouwColor函数并没有对外部调用自己传入的参数进行接收，那么调用者是怎么样通过调用该函数来得到想要的结果呢？
先来解释下，上面这段代码。代码中，定义了一个showColor函数，以及一个挂载在window下的一个全局对象color，showColor.call(this)执行了shouwColor函数，并且改变了shouwColor函数中this的指向，call方法传入的第一个参数，始终代表着this的指向。当传入的第一个参数是window的时候，shouwColor函数中的this就指向了window，那么this.color就相当于window.colorl了，打印出来的结果就自然是window.color的值了。

var colorObj = {"color":"blue"};
showColor.call(colorObj);    //my color is:blue

那么我们再来定义一个colorObj 对象，对象中，有一个属性color，call方法中第一个参数是colorObj 对象，那么一样的道理，shouwColor函数中的this就指向了**colorObj **对象了。这就是call方法的简单运用了。

call，apply方法的定义

call方法:
语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 window 对象被用作 thisObj。

apply方法：
语法：apply([thisObj[,argArray]])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 window 对象将被用作 thisObj， 并且无法被传递任何参数。

call，apply方法的区别

对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不太一样。例如，有一个函数定义如下：

function test(arg1,arg2){
    ......
}

就可以通过以下方式调用了

test.call(this,arg1,arg2);
test.apply(this,[arg1,arg2]);

其中 this 是你想指定的上下文，可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

call，apply方法的示例

1.数组的合并

var facebookImg = ["fb1.jpg","fb2.jpg","fb3.jpg"];
var youtubeImg = ["yt1.jpg","yt2.jpg","yt3.jpg"];
Array.prototype.push.apply(facebookImg,youtubeImg); //返回值为合并后的facebookImg数组的长度

facebookImg的值为: ["fb1.jpg","fb2.jpg","fb3.jpg"，"yt1.jpg","yt2.jpg","yt3.jpg"]
或者合并后赋值给一个新数组(不改变原数组的值)

var facebookImg = ["fb1.jpg","fb2.jpg","fb3.jpg"];
var youtubeImg = ["yt1.jpg","yt2.jpg","yt3.jpg"];
var allImg = [];
allImg.push.apply(allImg,facebookImg);
allImg.push.apply(allImg,youtubeImg);

2.获取数组中的最大值和最小值
js获取数组中的最大值和最小值,有多种方法，比如冒泡排序等，使用apply和call方法也是可以达到相同的效果的。

var  numbers = [5, 458 , 120 , -215 ]; 
var applyMaxInNumbers = Math.max.apply(Math, numbers);   //458
var applyMinInNumbers = Math.min.apply(Math,numbers); //-215

number 本身没有 max 方法，但是 Math 有，我们就可以借助 call 或者 apply 使用其方法。

3.类（伪）数组使用数组方法
Javascript中存在一种名为伪数组的对象结构。比较特别的是 arguments 对象，还有像调用 getElementsByTagName , document.childNodes 之类的，它们返回NodeList对象都属于伪数组。不能应用 Array下的 push , pop 等方法。
但是我们能通过 Array.prototype.slice.call 转换为真正的数组的带有 length 属性的对象，这样 domNodes 就可以应用 Array 下的所有方法了。

4.定义一个 log 方法，让它可以代理 console.log 方法
一般我们都会去这样的实现：

function log(msg){
    console.log(msg);
}
log("testData1");          //testData1
log("data1","data2");      //data1

上面的这种实现的方式在传入一个参数的时候是满足要求的，但是当传入的参数是多个的话，就失效了，因为log方法只接受了第一个且唯一一个参数。那么如果要在传入多个参数的情况下也能够实现，就可以用到call和apply方法了，注意，当不清楚参数的具体个数时，建议最好运用apply方法。

function log(){
    console.log.apply(window,arguments);
}
log("testData1");          //testData1
log("data1","data2","data3");      //data1,data2,data3

接下来的要求是给每一个 log 消息添加一个"(doView)"的前辍，比如：

log("hello world");    //(doView)hello world

那么就可以利用伪数组转为标准数组的方式，然后再使用unshift方法操作数组

function log(){
  var argsData = Array.prototype.slice.call(arguments);
  argsData.unshift('(doView)');
  console.log.apply(window, args);
};

5.借用构造函数继承的实现
javascript中的继承方式实现由多种，包括原型继承，借用构造函数继承与组合继承等。那么现在就用call和apply方法来简单实现下javascript中的构造函数的继承吧。

function superType(name){
    this.name = name;
}
function subType(name,age){
    this.age = age;
    superType.call(this,name);
}
var types1 = new subType("yqxcn", 30);
console.log("age:" + types1.age);        //age:30
console.log("name:" + types1.name);      //name:yqxcn,继承自superType属性值

var types2 = new subType("wx272252", 18);
console.log("age:" + types2.age);        //age:18
console.log("name:" + types2.name);      //name:wx272252,继承自superType属性值

bind的用法

bind方法虽然与call,apply的用法有点不同，但是其作用也是一样的，也是可以改变函数体内this的指向。
MDN的解释是：bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

以最开始的例子为例：

function showColor(){
    console.log("my color is:" + this.color);
}
window.color = "red";
showColor.bind(window);      //这里并不会打印出想要的结果

这个例子就可以很好的证明了上面MDN的解释了，当浏览器执行"showColor.bind(window); "这一句代码的时候，bind()创建了一个绑定函数，也就是说这句代码只是创建了一个函数，却并没有调用执行该函数，就像我们自己定义了一个普通函数而没有调用它，所以这句代码需要改成如下：

showColor.bind(window)();    //my color is:red

这也是apply、call、bind的不同之处。bind方法是创建一个函数，然后可以在需要调用的时候再执行函数，并非是立即执行函数；而call，apply是在改变了上下文中的this指向后并立即执行函数。

总结

• call，apply，bind都是可以改变函数体内this的指向。
• call，apply，bind使用时，传入的第一个参数都是用来传递this的指向的，也就是对上下文的指定。
• call，apply，bind都是可以传入多个参数，不同的是，call和bind的后续参数都是按照顺序传参，而apply的传参类型是数组；bind的参数可以在函数执行的时候再次添加。

原创文章，站在前辈们的经验上的总结，文中如有不正之处，还望指正！