bind()、call()、apply()理解及用法

apply和call都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部this的指向），Function对象的方法，每个函数都能调用；

使用apply或call方法，其运行的上下文指向第一个参数，apply的第二个参数是一个参数数组，call的第二个及其以后的参数都是数组里面的元素。

apply和call的常用用法：

让类数组拥有方法；

binde 方法的使用

也是改变函数体内this的指向，bind()是es5中的方法，bind会创建一个新函数，称为绑定函数，当调用这个函数的时候，绑定函数会以创建它时传入bind（）方法的第一个参数作为this，传入bind（）方法的第二个及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数； 例如：（后面的代码皆取自张鑫旭大神的博客）

var button = document.getElementById("button"),
    text = document.getElementById("text");
    button.onclick = function() {
       alert(this.id); // 弹出text
    }.bind(text);

但由于ie6~ie8不支持该方法，所以若想在这几个浏览器中使用，我们就要模拟该方法，这也是面试常考的问题，模拟的代码如下：

if (!function() {}.bind) {
    Function.prototype.bind = function(context) {
        var self = this；
        var args = Array.prototype.slice.call(arguments);
            
        return function() {
            return self.apply(context, args.slice(1));    
        }
    };
}

上面的代码中this的指向是个容易理解错的地方。

首先，我们判断是否存在bind方法，然后，若不存在，向Function对象的原型中添加自定义的bind方法。

这里面var self = this这段代码让我很困扰，按理说，prototype是一个对象，对象的this应该指向对象本身，也就是prototype，但真的是这样吗。看看下面的代码：

function a(){};

a.prototype.testThis = function(){console.log(a.prototype == this);};

var b = new a();

b.testThis();//false

显然，this不指向prototype，而经过测试，它也不指向a，而指向b。所以原型中的this值就明朗了。指向调用它的对象。

Array.prototype.slice.call(arguments);

上面这段代码，它的作用是将一个类数组转化为真正的数组，arguments是传给call的那个上下文(由于arguments自己没有slice方法，这里属于借用Array原型的slice方法)。而且经过测试，若果你不给slice传参数，那就等于传了个0给它，结果就是返回一个和原来数组一模一样的副本。

这之后的代码就很好理解，返回一个函数，该函数把传给bind的第一个参数当做执行上下文，由于args已经是一个数组，排除第一项，将之后的部分作为第二部分参数传给apply，前面讲过apply的用法。

如此，我们自己的这个bind函数的行为就同es5中的bind一样了。

总之三个的使用区别：

• 都是用来改变函数的this对象的指向的；
• 第一个参数都是this要指向的对象；
• 都可以利用后续参数传参；
• bind是返回对应函数，便于稍后调用，apply、call是立即调用；

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/101085.html原文链接：https://javaforall.cn