グローバルコンテキストで動作するJavascriptでのバインディング関数

Question

私はこのコードを動作させる方法を理解しようと少し怒ってきました。私の目標は、larry eats pie, larry eats candy, larry eats cakeの出力を、aliceオブジェクト内の関数eatsをlarryオブジェクトにバインドすることです。以下のコードで私が望むのは、alice.eats関数をlarryオブジェクトにバインドするとlarryをthis.nameとし、その関数をlarryFoodsの配列で適用すると、それぞれの引数に対してlarry eats + [food]が生成されることを期待します。

//-----------------Does not work--------------// 
var alice = { 
     name: "alice", 
     speak: function(){ 
     console.log("Hi, I'm " + this.name); 
     }, 
     eats : function(){ 
     var theArgs = Array.prototype.slice.call(arguments); 
     theArgs.forEach(function(arg){ 
      console.log(this.name + " eats " + arg); 
     }); 
     } 
}; 
var larry = { 
    name: "larry" 
}; 
var larrySpeak = alice.speak.bind(larry); 
larrySpeak(); 
var larryFoods = [" pie", " candy", " and cake"]; 
var larryEats = alice.eats.bind(larry); 
larryEats.apply(larryFoods); 

私はforEachの機能は、私はこの問題を解決するbindを期待していた理由であるグローバルコンテキストで動作することを想定しています。どんな洞察も大歓迎です。

Answer 1

thisは、eats機能のforEachの「人」にはスコープが設定されていません。または視覚的に：

theArgs.forEach(function(arg){ 
    // "this".name is trying to resolve name according to the scope of the forEach 
    console.log(this.name + " eats " + arg); 
}); 

あなたはeats機能のこの内部のようにこの問題を解決することができます。

var scope = this; 
theArgs.forEach(function(arg){ 
    console.log(scope.name + " eats " + arg); 
}); 

最後に、あなたは非常に最後の行でapplyの使用を修正する必要があります。 applyには、バインドするコンテキストが必要です。すでにlarryに関数をバインドするので、あなただけの最初の引数としてnullを渡すことができます。

この：

larryEats.apply(larryFoods); 

は次のようになります。それらのものを固定した後

larryEats.apply(null, larryFoods); 

---

ここに実例があります：

var alice = { 
 
    name: "alice", 
 
    speak: function() { 
 
    console.log("Hi, I'm " + this.name); 
 
    }, 
 
    eats: function() { 
 
    var theArgs = Array.prototype.slice.call(arguments); 
 
    var scope = this; 
 
    theArgs.forEach(function(arg) { 
 
     console.log(scope.name + " eats " + arg); 
 
    }); 
 
    } 
 
}; 
 
var larry = { 
 
    name: "larry" 
 
}; 
 
var larrySpeak = alice.speak.bind(larry); 
 
larrySpeak(); 
 
var larryFoods = ["pie", "candy", "and cake"]; 
 
var larryEats = alice.eats.bind(larry); 
 
larryEats.apply(null, larryFoods);

Answer 2

これは私のために動作します：あなたはそこにコンテキストを失ったように、 `forEach`コールバックは、新しい` this`を持っていることを

var alice = { 
     name: "alice", 
     speak: function(){ 
     console.log("Hi, I'm " + this.name); 
     }, 
     eats : function(){ 
     var theArgs = Array.prototype.slice.call(arguments); 
     let that = this; 
     theArgs.forEach(function(arg){ 
      console.log(that.name + " eats " + arg); 
     }); 
     } 
}; 
var larry = { 
    name: "larry" 
}; 
var larrySpeak = alice.speak.bind(larry); 
larrySpeak(); 
var larryFoods = [" pie", " candy", " and cake"]; 
var larryEats = alice.eats; 
larryEats.apply(larry, larryFoods);