国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

對ES5中apply、call和bind三個方法的解讀

王笑朝 / 3414人閱讀

摘要：對中和三個方法的解讀中，和都是為了改變某個函數運行時的上下文而存在的，其實就是為了改變所調用的函數體內部的指向。

對ES5中apply、call和bind三個方法的解讀

JavaScript中，apply、call 和 bind 都是為了改變某個函數運行時的上下文而存在的，其實就是為了改變所調用的函數體內部 this 的指向。

Function.prototype.apply()方法

Example

var nodeList = document.querySelectorAll("div");
Array.prototype.slice.apply(nodeList).forEach((node)=>{
  console.log(node);    // 輸出每一個div節點對象
});

代碼解讀：
上面是一段JS中常用的代碼，這段代碼表示的意義是，當我們獲取到一個類數組的對象的時候如何讓它可以調用所有數組所擁有的方法。我們都知道，所有的獲取dom元素的方法，返回的不是dom節點對象，就是包含節點對象的類數組，而類數組雖然從輸出來看和數組是沒什么區別的，但是在原型鏈上是有很大的差異的。像NodeList這個類數組就是不包含基本上所有數組的常用方法的，所以這個時候就需要 借 數組的slice方法來將NodeList這個歌類數組轉成真正的數組對象，這樣就可以直接調用push方法了。

Function.prototype.call()方法

Example

var nodeList = document.querySelectorAll("div");
Array.prototype.slice.call(nodeList).forEach((node)=>{
  console.log(node);    // 輸出每一個div節點對象
});

代碼解讀：上面這段代碼和apply方法中的例子是一模一樣的，所以，其實他們兩個方法的作用都是一致的，用法呢就是類似的，而為什么說是類似的呢，看下面這個例子：
Example：

var max1 = Math.max.call(null, 1,2,3); 
var max2 = Math.max.apply(null, [1,2,3]);
console.log(max1);      // 結果是3
console.log(max2)       // 結果是3

代碼解讀：從上面這個例子中可以看出，call和apply的用法不同之處在于，如果所調用的方法方法需要傳入參數，那么call需要從第二個入參開始傳入需要的值，而apply是在第二入參用數組來傳遞參數，這里要注意的是哪怕是參數只需要傳入一個，也全都按照這種語法規則，不然如上面的Math.max就會報TypeError，所以建議如下：當所調用的方法是0個參數的，那隨便哪個都可以，如果是1~2個參數的建議使用call方法，如果是3個及以上的用apply方法。

Function.prototype.bind()方法

Example

var nodeList = document.querySelectorAll("div");
var nodeArray = Array.prototype.slice.bind(nodeList);
nodeArray().forEach((node)=>{
  console.log(node);    // 輸出每一個div節點對象
});

代碼解讀：從上面的例子看一看出bind方法只是替換了所調用方法的this指向，并不會主動去執行這個方法，而apply和call方法是即改變了this指向，又立即執行的，所以bind一般用于不需要立即執行，只要求更改this指向的場景，如：click事件的回調函數一般就會用bind去改變回調函數的this指向，而在click事件觸發的時候執行。最后說明一下，bind的參數和call的參數傳遞是一致的，例子如下：

Example

var maxBind = Math.max.bind(null, 1,2,3); 
var max = maxBind();
console.log(max);      // 結果是3

結束語：上面就是javaScript對于如何改變運行時上下文的三個方法了，下面是我自己實現的一個類似運行時改變上下文的方法，不適合在實際場景中使用，僅供大家參考：

var Person = {
  context:null,
  name:"小明",
  say:function(greeting){
    var me = this.context || this;
    return greeting + me.name
  }
}
Person.say.__proto__.callCopy = function(_context,greeting){
  Person.context = _context;
  return Person.say(greeting);
}
var world1 =Person.say("你好 ");
var world2 = Person.say.callCopy({name:"xiaoMing"},"hello ");
console.log(world1);    // 你好 小明  
console.log(world2);    // hello xiaoMing

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84151.html

相關文章

  • underscore 源碼解讀之 bind 方法的實現

    摘要：概括地講，如果構造函數有返回值，且返回值是對象不能是，那么對其進行操作返回該對象，否則返回構造實例。所以在方法中，我們需要進一步判斷這個構造函數有沒有返回值，返回值是不是對象。 自從進入七月以來，我的 underscore 源碼解讀系列 更新緩慢，再這樣下去，今年更完的目標似乎要落空，趕緊寫一篇壓壓驚。 前文 跟大家簡單介紹了下 ES5 中的 bind 方法以及使用場景（沒讀過的同學建...

    xiaodao 評論0 收藏0

  • 可能遇到假的面試題：不用call和apply方法模擬實現ES5的bind方法

    摘要：來自朋友去某信用卡管家的做的一道面試題，用原生模擬的方法，不準用和方法。他們的用途相同，都是在特定的作用域中調用函數。不同之處在于，方法傳遞給調用函數的參數是逐個列出的，而則是要寫在數組中。 本文首發我的個人博客：前端小密圈，評論交流送1024邀請碼，嘿嘿嘿?。 來自朋友去某信用卡管家的做的一道面試題，用原生JavaScript模擬ES5的bind方法，不準用call和bind方法。 ...

    李世贊 評論0 收藏0

  • 可能遇到假的面試題：不用call和apply方法模擬實現ES5的bind方法

    摘要：來自朋友去某信用卡管家的做的一道面試題，用原生模擬的方法，不準用和方法。他們的用途相同，都是在特定的作用域中調用函數。不同之處在于，方法傳遞給調用函數的參數是逐個列出的，而則是要寫在數組中。 本文首發我的個人博客：前端小密圈，評論交流送1024邀請碼，嘿嘿嘿?。 來自朋友去某信用卡管家的做的一道面試題，用原生JavaScript模擬ES5的bind方法，不準用call和bind方法。 ...

    ConardLi 評論0 收藏0

  • 從一道面試題，到“我可能看了假源碼”

    摘要：返回的綁定函數也能使用操作符創建對象這種行為就像把原函數當成構造器。同時，將第一個參數以外的其他參數，作為提供給原函數的預設參數，這也是基本的顆?；A。 今天想談談一道前端面試題，我做面試官的時候經常喜歡用它來考察面試者的基礎是否扎實，以及邏輯、思維能力和臨場表現，題目是：模擬實現ES5中原生bind函數。也許這道題目已經不再新鮮，部分讀者也會有思路來解答。社區上關于原生bind的研...

    Carson 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<