メソッドと関数バインドと混同しました

Question

私は時間と関数とメソッドのバインディングを理解しようとしています。私はインターネット上の "束縛"についてのいくつかの記事を見てきましたが、私はそれらを簡単に理解することはできません。誰かが私にそれをもっとはっきりと説明できることを願っています。

私はこのJavaScriptコードがあります。

function Foo(name) { 
    this.name = name; 
} 

function sayHello() { 
    console.log('Hello ' + this.name); 
} 

var foo = new Foo('Jack'); 

var substFunc = foo.sayHello.bind(foo); 

substFunc(); 

を私はので、私は「こんにちは、ジャック」を表示するための方法としてそれを使用することができFoo()に拘束されることにsayHello()機能をしたいが、それはメッセージを失敗し、表示されましたコンソール上：

Uncaught TypeError: Cannot read property 'bind' of undefined(...)

Answer 1

は、あなたは非常に近かった、とFunction#bindのご理解は問題ではありませんでした

sayHelloは、あなたが好きそれにアクセスできるようにしかし、それは、グローバル変数で、fooのプロパティではありません。

var substFunc = sayHello.bind(foo); 

スニペット：

function Foo(name) { 
 
    this.name = name; 
 
} 
 

 
function sayHello() { 
 
    console.log('Hello ' + this.name); 
 
} 
 

 
var foo = new Foo('Jack'); 
 

 
var substFunc = sayHello.bind(foo); 
 

 
substFunc();

Answer 2

このエラーの今後あなたが使用しているためにアップしました

foo.sayHello 

...しかし、あなたは決してfooのためにその関数を定義していません。 sayHelloは独立した関数です。それは理にかなっていますか？

また、簡単なバインディングを理解するには、単純なjqueryイベントバインダーを使用します。

ボタンを押したときに機能をトリガーするようにボタンをバインドするとします。この関数はbuttonPressed（）です。ボタンはこの関数を呼び出したので...関数からthisを呼び出すと、ボタンを参照します。

$button.on('click', buttonPressed); 

function buttonPressed(){ 
    //this == button 
} 

しかし、 "this"変数で別の要素を操作したい場合は、その代わりに他の要素をバインドします。

$button.on('click', buttonPressed).bind($otherElement); 

function buttonPressed(){ 
    //this == otherElement 
}