JS中的call、apply、bind方法详解

JS中的call、apply、bind方法详解

一.在JavaScript中，call和apply都是为了改变某个函数运行时上下文context而存在的，换句话说，就是为了改变函数体内部this的指向。JavaScript的一大特点是，函数存在“定义时上下文”和“运行时上下文”以及“上下文是可以”改变的这样的概念。

function fruits() {}
 
fruits.prototype = {
    color: "red",
    say: function() {
        console.log("My color is " + this.color);
    }
}
 
var apple = new fruits;
apple.say();    //My color is red

var banana = {
    color: "yellow"
}
apple.say.call(banana);     //My color is yellow
apple.say.apply(banana);    //My color is yellow

如果有一个对象banana = {color ： “yellow”}，不想重新定义 say方法，那么可以通过call或apply方法，调用apple的say方法。

对于apply，call而言，除了接受的参数方式不太一样，作用是一样的。

var func = function(arg1, arg2) {
     
};

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

如上面这个方法，其中this是你想指定的上下文，可以是任何一个JavaScript对象，call需要把参数按顺序传递进去，而apply只是把参数放在数组里。

var array1 = [1 , "aaa" , {name:"moon"} , 666];
var array2 = ["hello" , 11 , 22];
Array.prototype.push.apply(array1, array2);// array1 为合并后的两个数组
var  numbers = [2, -2 , 0 , -666 ];
var maxInNumbers = Math.max.apply(Math, numbers),   //2
maxInNumbers = Math.max.call(Math,-1, -2 , 0 , 2); //2

上面这段代码是两个小例子，合并数组和获取数组最大值。

二.bind方法

var altwrite = document.write;
//altwrite("hello");//Uncaught TypeError: Illegal invocation
altwrite.bind(document)("hello")

上面这段代码，altwrite函数改变this只想global或者window对象，导致执行时提示非法调用的异常，正确方法是使用bind方法。

bind方法最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的this值。常见的错误就像上面例子一样，将方法从对象中拿出来，然后调用个，并且希望this指向原来的对象。如果不做特殊处理，一般户丢失原来的对象。使bind方法能解决这个问题。

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

创建一个func函数，当使用bind创建一个新的绑定函数之后，它被执行的时候，它的this会被设置成foo，而不是调用bar之前的时候全局作用域。

三.apply、call、bind比较

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

三个输出都是81，bind方法后面多了对括号，当希望改变上下文环境后并非立即执行，而是毁掉执行的时候，用bind方法。apply和call方法立即执行。

apply，call，bind三者都是用来改变函数的this对象的指向的；

apply，call，bind三者第一个参数都是this要指向的对象，也就是想指定的上下文。

apply , call , bind三者都可以利用后续参数传参；

bind是返回对应函数，便于稍后调用；apply，call方法则是立即调用