成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Javascript中bind()方法的使用與實(shí)現(xiàn)

CastlePeaK / 2268人閱讀

摘要：秒后調(diào)用函數(shù)我有朵花瓣注意對于事件處理函數(shù)和方法也可以使用上面的方法綁定函數(shù)作為構(gòu)造函數(shù)綁定函數(shù)也適用于使用操作符來構(gòu)造目標(biāo)函數(shù)的實(shí)例。

在討論bind()方法之前我們先來看一道題目：

javascriptvar altwrite = document.write;
altwrite("hello");
//1.以上代碼有什么問題
//2.正確操作是怎樣的
//3.bind()方法怎么實(shí)現(xiàn)

對于上面這道題目，答案并不是太難，主要考點(diǎn)就是this指向的問題，altwrite()函數(shù)改變this的指向global或window對象，導(dǎo)致執(zhí)行時(shí)提示非法調(diào)用異常，正確的方案就是使用bind()方法：

javascriptaltwrite.bind(document)("hello")

當(dāng)然也可以使用call()方法：

javascriptaltwrite.call(document, "hello")

本文的重點(diǎn)在于討論第三個(gè)問題bind()方法的實(shí)現(xiàn)，在開始討論bind()的實(shí)現(xiàn)之前，我們先來看看bind()方法的使用：

綁定函數(shù)

bind()最簡單的用法是創(chuàng)建一個(gè)函數(shù)，使這個(gè)函數(shù)不論怎么調(diào)用都有同樣的this值。常見的錯(cuò)誤就像上面的例子一樣，將方法從對象中拿出來，然后調(diào)用，并且希望this指向原來的對象。如果不做特殊處理，一般會(huì)丟失原來的對象。使用bind()方法能夠很漂亮的解決這個(gè)問題：

javascriptthis.num = 9; 
var mymodule = {
  num: 81,
  getNum: function() { return this.num; }
};

module.getNum(); // 81

var getNum = module.getNum;
getNum(); // 9, 因?yàn)樵谶@個(gè)例子中，"this"指向全局對象

// 創(chuàng)建一個(gè)"this"綁定到module的函數(shù)
var boundGetNum = getNum.bind(module);
boundGetNum(); // 81
偏函數(shù)（Partial Functions）

Partial Functions也叫Partial Applications，這里截取一段關(guān)于偏函數(shù)的定義：

  
Partial application can be described as taking a function that accepts some number of arguments, binding values to one or more of those arguments, and returning a new function that only accepts the remaining, un-bound arguments.

這是一個(gè)很好的特性，使用bind()我們設(shè)定函數(shù)的預(yù)定義參數(shù)，然后調(diào)用的時(shí)候傳入其他參數(shù)即可：

javascriptfunction list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// 預(yù)定義參數(shù)37
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
和setTimeout一起使用

一般情況下setTimeout()的this指向window或global對象。當(dāng)使用類的方法時(shí)需要this指向類實(shí)例，就可以使用bind()將this綁定到回調(diào)函數(shù)來管理實(shí)例。

javascriptfunction Bloomer() {
  this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

// 1秒后調(diào)用declare函數(shù)
Bloomer.prototype.bloom = function() {
  window.setTimeout(this.declare.bind(this), 1000);
};

Bloomer.prototype.declare = function() {
  console.log("我有 " + this.petalCount + " 朵花瓣!");
};

注意：對于事件處理函數(shù)和setInterval方法也可以使用上面的方法

綁定函數(shù)作為構(gòu)造函數(shù)

綁定函數(shù)也適用于使用new操作符來構(gòu)造目標(biāo)函數(shù)的實(shí)例。當(dāng)使用綁定函數(shù)來構(gòu)造實(shí)例，注意：this會(huì)被忽略，但是傳入的參數(shù)仍然可用。

javascriptfunction Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function() { 
  return this.x + "," + this.y; 
};

var p = new Point(1, 2);
p.toString(); // "1,2"


var emptyObj = {};
var YAxisPoint = Point.bind(emptyObj, 0/*x*/);
// 實(shí)現(xiàn)中的例子不支持,
// 原生bind支持:
var YAxisPoint = Point.bind(null, 0/*x*/);

var axisPoint = new YAxisPoint(5);
axisPoint.toString(); // "0,5"

axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new Point(17, 42) instanceof YAxisPoint; // true

上面例子中Point和YAxisPoint共享原型，因此使用instanceof運(yùn)算符判斷時(shí)為true。

捷徑

bind()也可以為需要特定this值的函數(shù)創(chuàng)造捷徑。

例如要將一個(gè)類數(shù)組對象轉(zhuǎn)換為真正的數(shù)組，可能的例子如下：

javascriptvar slice = Array.prototype.slice;

// ...

slice.call(arguments);

如果使用bind()的話，情況變得更簡單：

javascriptvar unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

// ...

slice(arguments);
實(shí)現(xiàn)

上面的幾個(gè)小節(jié)可以看出bind()有很多的使用場景，但是bind()函數(shù)是在 ECMA-262 第五版才被加入；它可能無法在所有瀏覽器上運(yùn)行。這就需要我們自己實(shí)現(xiàn)bind()函數(shù)了。

首先我們可以通過給目標(biāo)函數(shù)指定作用域來簡單實(shí)現(xiàn)bind()方法：

javascriptFunction.prototype.bind = function(context){
  self = this;  //保存this，即調(diào)用bind方法的目標(biāo)函數(shù)
  return function(){
      return self.apply(context,arguments);
  };
};

考慮到函數(shù)柯里化的情況，我們可以構(gòu)建一個(gè)更加健壯的bind()：

javascriptFunction.prototype.bind = function(context){
  var args = Array.prototype.slice.call(arguments, 1),
  self = this;
  return function(){
      var innerArgs = Array.prototype.slice.call(arguments);
      var finalArgs = args.concat(innerArgs);
      return self.apply(context,finalArgs);
  };
};

這次的bind()方法可以綁定對象，也支持在綁定的時(shí)候傳參。

繼續(xù)，Javascript的函數(shù)還可以作為構(gòu)造函數(shù)，那么綁定后的函數(shù)用這種方式調(diào)用時(shí)，情況就比較微妙了，需要涉及到原型鏈的傳遞：

javascriptFunction.prototype.bind = function(context){
  var args = Array.prototype.slice(arguments, 1),
  F = function(){},
  self = this,
  bound = function(){
      var innerArgs = Array.prototype.slice.call(arguments);
      var finalArgs = args.concat(innerArgs);
      return self.apply((this instanceof F ? this : context), finalArgs);
  };

  F.prototype = self.prototype;
  bound.prototype = new F();
  retrun bound;
};

這是《JavaScript Web Application》一書中對bind()的實(shí)現(xiàn)：通過設(shè)置一個(gè)中轉(zhuǎn)構(gòu)造函數(shù)F，使綁定后的函數(shù)與調(diào)用bind()的函數(shù)處于同一原型鏈上，用new操作符調(diào)用綁定后的函數(shù)，返回的對象也能正常使用instanceof，因此這是最嚴(yán)謹(jǐn)?shù)?b>bind()實(shí)現(xiàn)。

對于為了在瀏覽器中能支持bind()函數(shù)，只需要對上述函數(shù)稍微修改即可：

javascriptFunction.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(
              this instanceof fNOP && oThis ? this : oThis || window,
              aArgs.concat(Array.prototype.slice.call(arguments))
          );
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };

歡迎光臨小弟博客：Superlin"s Blog
我的博客原文：Javascript中bind()方法的使用與實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85629.html

相關(guān)文章

  • 理解 JavaScript call()/apply()/bind()

    摘要：理解文章中已經(jīng)比較全面的分析了在中的指向問題，用一句話來總結(jié)就是的指向一定是在執(zhí)行時(shí)決定的，指向被調(diào)用函數(shù)的對象。與和直接執(zhí)行原函數(shù)不同的是，返回的是一個(gè)新函數(shù)。這個(gè)新函數(shù)包裹了原函數(shù)，并且綁定了的指向?yàn)閭魅氲摹? 理解 JavaScript this 文章中已經(jīng)比較全面的分析了 this 在 JavaScript 中的指向問題，用一句話來總結(jié)就是：this 的指向一定是在執(zhí)行時(shí)決定的，...

    duan199226 評論0 收藏0

  • JavaScript || 函數(shù)

    摘要：每個(gè)函數(shù)表達(dá)式包括函數(shù)對象括號和傳入的實(shí)參組成。和作用都是動(dòng)態(tài)改變函數(shù)體內(nèi)指向，只是接受參數(shù)形式不太一樣。在定義函數(shù)時(shí)，形參指定為一個(gè)對象調(diào)用函數(shù)時(shí)，將整個(gè)對象傳入函數(shù)，無需關(guān)心每個(gè)屬性的順序。 函數(shù) JavaScript中，函數(shù)指只定義一次，但可以多次被多次執(zhí)行或調(diào)用的一段JavaScript代碼。與數(shù)組類似，JavaScript中函數(shù)是特殊的對象，擁有自身屬性和方法 每個(gè)函數(shù)對象...

    learn_shifeng 評論0 收藏0

  • 《JS編程全解》—— 回調(diào)函數(shù)

    摘要：事件驅(qū)動(dòng)正是一種回調(diào)函數(shù)設(shè)計(jì)模式。由于不支持多線程，所以為了實(shí)現(xiàn)并行處理，不得不使用回調(diào)函數(shù)，這逐漸成為了一種慣例。上面的回調(diào)函數(shù)只是單純的函數(shù)而不具有狀態(tài)。如果回調(diào)函數(shù)具有狀態(tài)，就能得到更為廣泛的應(yīng)用。 回調(diào)函數(shù)模式 回調(diào)函數(shù)與控制反轉(zhuǎn) 回調(diào)函數(shù)是程序設(shè)計(jì)的一種方法。這種方法是指，在傳遞了可能會(huì)進(jìn)行調(diào)用的函數(shù)或?qū)ο笾?，在需要時(shí)再分別對其進(jìn)行調(diào)用。由于調(diào)用方與被調(diào)用方的依賴關(guān)系與通常...

    mj 評論0 收藏0

  • JavaScript之柯里化

    摘要：簡介柯里化，又稱部分求值，是把接收多個(gè)參數(shù)的函數(shù)變成接受一個(gè)單一參數(shù)最初函數(shù)的第一個(gè)參數(shù)的函數(shù)，并且返回接受剩余的參數(shù)而且返回結(jié)果的新函數(shù)的技術(shù)。按照作者的說法，所謂柯里化就是使函數(shù)理解并處理部分應(yīng)用。的思想極大地助于提升函數(shù)的復(fù)用性。 簡介 柯里化(Currying)，又稱部分求值(Partial Evaluation)，是把接收多個(gè)參數(shù)的函數(shù)變成接受一個(gè)單一參數(shù)(最初函數(shù)的第一個(gè)...

    since1986 評論0 收藏0

  • JS中的call、apply、bind方法詳解

    摘要：不能應(yīng)用下的等方法。首先我們可以通過給目標(biāo)函數(shù)指定作用域來簡單實(shí)現(xiàn)方法保存，即調(diào)用方法的目標(biāo)函數(shù)考慮到函數(shù)柯里化的情況，我們可以構(gòu)建一個(gè)更加健壯的這次的方法可以綁定對象，也支持在綁定的時(shí)候傳參。原因是，在中，多次是無效的。 bind 是返回對應(yīng)函數(shù)，便于稍后調(diào)用；apply 、call 則是立即調(diào)用 。 apply、call 在 javascript 中，call 和 apply 都是...

    zombieda 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<