背景

前两天在做小递次的需求的时刻用到bind的时刻才想起自身对这三的东西的相识比较浅陋，这个时刻用的时刻就有点怕。时刻照样要好好学习下，理解下怎样玩。

正文

先说call 和 apply吧：
ECMAScript3给Function的原型定义了两个要领，他们是Function.prototype.call 和 Function.prototype.apply. 在现实开辟中，特别是在一些函数式作风的代码编写中，call和apply要领尤其有效。

1、call和apply区分

实在他们的作用是一样的，只是通报的参数不一样罢了。
apply： 接收2个参数，第一个参数指定了函数体内this对象的指向，第二个参数为数组或许一个类数组。apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数最先）。
举个栗子：

let obj1 = {
    name: "copyes",
    getName: function(){
        return this.name;
    }
}
let obj2 = {
    name: 'Fanchao'
}

console.log(obj1.getName());  // "copyes"
console.log(obj1.getName.call(obj2));  // "Fanchao"
console.log(obj1.getName.apply(obj2));  // "Fanchao"

function showArgs(a, b, c){
    console.log(a,b,c);
}

showArgs.call(this, 3,4,5);
showArgs.apply(this, [5,6,7]);

2、罕见的call 和 apply 用法

• 数组之间追加

let arr1 = [12, 'foo', {name: 'fanchao'}, -1024];
let arr2 = ['copyes', '22', 1024];

Array.prototype.push.apply(arr1, arr2);
console.log(arr1);
// [ 12, 'foo', { name: 'fanchao' }, -1024, 'copyes', '22', 1024 ]

• 猎取数组中的最大值和最小值

let numbers = [5,665,32,773,77,3,996];
let maxNum = Math.max.apply(Math, numbers);
let maxNum2 = Math.min.call(Math, 5,665,32,773,77,3,996);

console.log(maxNum);
console.log(maxNum2);

• 考证是不是是数组（条件是toString()要领没有被重写过）

function isArray(obj){
    return Object.prototype.toString.call(obj)  === '[object Array]';
}

console.log(isArray(1));
console.log(isArray([1,2]));

• 类（伪）数组运用数组要领

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

3、经由过程一个面试题去深切理解下apply 和 call

定义一个 log 要领，让它可以代办 console.log 要领：

// 通例做法
function log(msg){
    console.log(msg);
}
log(12);
log(1,2)

上面可以基本解决打印输出题目，然则下面多参数的时刻就gg了。换个更好的体式格局吧。

function log(){
    console.log.apply(console, arguments);
}
log(12);
log(1,2)

接下来是要在每一条打印信息前面都要加上一个特定字符串’fanchao`s’又怎样说呢？

function log(){

    let args = Array.prototype.slice.call(arguments);
    
    args.unshift('(fanchao`s)');

    console.log.apply(console, args);
}
log(12);
log(1,2)

4、说完了call和apply，接下来说说bind

bind() 要领与 apply 和 call 很类似，也是可以转变函数体内 this 的指向。
MDN的诠释是：bind()要领会建立一个新函数，称为绑定函数，当挪用这个绑定函数时，绑定函数会以建立它时传入 bind()要领的第一个参数作为 this，传入 bind() 要领的第二个以及今后的参数加上绑定函数运行时自身的参数根据递次作为原函数的参数来挪用原函数。
看个栗子：

var func = function(){
    console.log(this.x);
    console.log(arguments);
}

 
func();  // undefined, {}
var obj = {
    x: 2
}
var bar = func.bind(obj,1);

bar(); // 2 , {'0':1}

一个有意思的事：

var bar = function() {
    console.log(this.x);
}
var foo = {
    x: 3
}
var sed = {
    x: 4
}
var func = bar.bind(foo).bind(sed);
func(); //3

var fiv = {
    x: 5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //3

在Javascript中，屡次 bind() 是无效的。更深条理的缘由， bind() 的完成，相当于运用函数在内部包了一个 call / apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次今后的 bind 是没法见效的。

5、这三个要领的异同点是什么呢？

照样先看个栗子：

var obj = {
x: 81,
};

var foo = {
getX: function() {
return this.x;
}
}

console.log(foo.getX.bind(obj)()); //81
console.log(foo.getX.call(obj)); //81
console.log(foo.getX.apply(obj)); //81

看到bind背面对了一对括号。区分是，当你愿望转变上下文环境以后并不是马上实行，而是回调实行的时刻，运用 bind() 要领。而 apply/call 则会马上实行函数。

总结

apply 、 call 、bind 三者都是用来转变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以应用后续参数传参；
bind是返回对应函数，便于稍后挪用；apply、call则是马上挪用 。