bind()、call()、apply()明白及用法

2024年5月21日 203次阅读 来源: javascriptMen

apply和call都是为了转变某个函数运转时的上下文而存在的（就是为了转变函数内部this的指向），Function对象的要领，每一个函数都能挪用；

运用apply或call要领，其运转的上下文指向第一个参数，apply的第二个参数是一个参数数组，call的第二个及其今后的参数都是数组内里的元素。

apply和call的经常使用用法：

  1. 数组之间的追加；

    比方：多维数字转一维

     let arr=[1,[7,8],[5,6]];
 res=[].concat.apply([],arr)

  2. 扩大作用域具有Math的min和max要领，猎取数组中的最大值和最小值；

    let numbers = [5, 458 , 120 , -215 ];
    let maxInNumbers = Math.max.apply(Math, numbers), //458

       maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

  3. 考证是不是是数组；

    function isArray(obj){

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

    }

  4. 让类数组具有要领；

    比方: arguments对象，猎取到的文档节点等，并没有数组的那些要领：

    Array.prototype.slice.apply（argument）;
    //理论上来讲这个比较快，直接在原型上查找slice要领
    //但实际上比较慢
    或许
    [].slice.apply(arguments);
    //理论上来讲这个比较慢，因为要Array做一个实例化再查找slice要领
    //实际上比较快，因为如今的种种自动化东西会把上一种要领转换为这类，而第二种代码比较简约，所以会比较快；

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是马上挪用；
    原文作者：javascriptMen
    原文地址: https://segmentfault.com/a/1190000018327777
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞