將JQuery.append.bind與匿名函數傳遞給Array.forEach循環之間的區別

我得到了兩種不同的行爲，我希望有人能解釋爲什麼。將JQuery.append.bind與匿名函數傳遞給Array.forEach循環之間的區別

function Test(id) { 
      this.target = $(id); 
      this.children = [ $('<div/>').text("A"), $('<div/>').text("B") ]; 
} 

// will add 0 1 A B 
Test.prototype.addToTarget = function() { 
    this.children.forEach(this.target.append.bind(this.target)); 
}; 

// will add A B   
Test.prototype.addToTargetEx = function() {    
    var target = this.target; 
    this.children.forEach(function(child){ 
     target.append(child); 
    }); 
};

來源

2015-04-05 MatUtter

可以添加一些背景？這兩種不同的行爲會是什麼？調用兩個不同的函數？ – Typo 2015-04-05 21:43:01

我的猜測是迭代遍歷對象中的每個屬性，而另一個遍歷DOM元素。 – Anthony 2015-04-05 21:47:10

或者類似的限制範圍：https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this – Anthony 2015-04-05 21:53:08

在第一個版本，你綁定this值，但forEach經過3個參數，它的回調，這是該項目時，指數和原始數組。

在第二個版本中，您隻手動傳遞給回調的第一個參數，而忽略最後兩個參數。

所以（對於這個問題的說明），你可以強迫你的第二個版本的行爲類似於第一這樣的...

this.children.forEach(function(child, idx, arr){ 
     target.append(child, idx, arr); // Passing all 3 args 
    });

現在，它更清晰的是.append()在每個迭代接收3個值。

使用.bind()沒有任何實際的解決方法。如果.append()僅用於識別傳遞的第一個參數，那麼它將起作用。

你可以做的一件事就是創建你自己定製的.bindN方法。它不能綁定this和單個參數，它可以綁定this並接收一個「限制器」，它將限制它允許接收的參數的數量。

它看起來是這樣的：

Function.prototype.bindN = function(thisArg, n) { 
    var origFunc = this; 
    return function() { 
     return origFunc.apply(thisArg, Array.prototype.slice.call(arguments, 0, n)); 
    } 
};

然後使用它是這樣的：

this.children.forEach(this.target.append.bindN(this.target, 1));

來源

2015-04-05 21:43:05

將JQuery.append.bind與匿名函數傳遞給Array.forEach循環之間的區別

回答

相關問題