どのようなビープ音は

Watch on YouTube
link to codepen if you want to follow along
JavaScriptの“この”キーワードは、多くの新しい開発者のための紛らわしい話題でありえます.実際、それは私が仕事の面接で間違っていた問題であり、結果として私はそれを勉強し理解するための努力をしました(2回同じ間違いをしたくない).このブログ記事は、この' 4 'の原則と、それぞれがJavaScriptに適用されます.
これが英語で何を意味するかについて話しましょう.私があなたを言うならば、「ちょっとこれを見てください」-これは何ですか?あなたが本当に私があなたに若干の文脈を与えない限り、これが何を参照するか全くわからない.私がオブジェクトを拾って、それにポイントして、「これを見てください」と言うならば、あなたはすぐに、「これ」が私が指しているオブジェクトに言及すると理解することができます.JavaScriptで同じです.このコンテキストを全く与えないと、ウィンドウは私たちに返されます.これは私たちの最初の原則に'

ウィンドウ結合
ウィンドウのバインドは、我々が使用することを目的としていません.それは、我々が'この'キーワードのために文脈を与えないとき、何が起こるかです.JavaScriptを教えていない場合は、これをウィンドウに返します.
以下に例を示します:

function sound(){
console.log(this.bark);
}

sound() // we will get back the window in the console

これは、次の原理をもたらします.

暗黙の拘束
暗黙のバインディングはおそらく' this 'の最も一般的な原理であり、メソッドを持つオブジェクトに適用され、関数が呼び出されるとドットの左側を見ます.それがこれを意味するものです.
例を見ましょう.

const ada = {
name: 'Ada',
breed: 'Bali dog',
bark: 'woof woof'
sound: function(){
    console.log(this.bark);
  }
}

ada.sound(); // invoking the function. This bark refers to ada's bark because ada is the left of the dot when the function is invoked

暗黙のバインディングを覚えておく良い方法は、関数が呼び出されたときにドットの左側にあるものが何であれ、それが' this 'を参照することであることを暗示しています.

明示的結合
明示的な結合を使用すると、明示的に引数として渡されます.私たちは.call(), .apply(), or .bind() . これらをどのように使うかにはいくつかの違いがあります..call() - はすぐに関数を呼び出します.引数1で1を渡す.apply() - はすぐに関数を呼び出します.引数として渡す.bind() - 引数1を1で渡しますが、関数はすぐに呼び出されません.代わりに、後で呼び出すことができる新しい関数を返します.
例を見ましょう.call :

function sound(){
console.log(this.bark);
}

const ada = {
name: 'Ada',
breed: 'Bali Dog',
bark: 'woof woof'
}

sound.call(ada); // invoking the function here and binding this bark to Ada's bark - we will get back woof woof in the console.

例を見ましょう.bind :

function sound(){
console.log(this.bark);
}

const ada = {
name: 'Ada',
breed: 'Bali Dog',
bark: 'woof woof'
}

const goodDog = sound.bind(ada); // creating a new function called goodDog that can be invoked later

goodDog(); // we will get back bark bark in the console

新しい結合
new bindingはコンストラクタ関数で使用されます.関数は' new 'キーワード'を使用してコンストラクタ関数として呼び出されたときに、新しく作成されたオブジェクトを指します.この時点で、“コンストラクタ関数は何ですか?”大きな質問!コンストラクタ関数は他のオブジェクトを構成します.コンストラクタ関数に関するいくつかのことは、それが資本化された関数名を持っているということです.
例を見ましょう.

function Pet(name, breed, bark){
this.name = name;
this.breed = breed;
this.bark = bark;
}
Pet.prototype.sound = function(){ //here we are using the prototype keyword to abstract out the sound method so that we can pass it across newly created objects without if affecting memory
  console.log(this.bark);
}

const ada = new Pet('Ada', 'Bali Dog', 'woof woof'); // creating my new object - this.name will be 'Ada' this.breed will be 'Bali Dog' and this.bark will be 'woof woof' - 'this' is pointing to my newly created object which is ada. 

ada.sound()// will log 'woof woof'

つの最終的な呼び出しは、オブジェクトメソッドの中で矢印機能を使用しないでください.矢印関数はこの'キーワード'をバインドしません.これはバグではない、それは矢印機能の機能です.WESのボスの詳細については、本当に偉大なポストを書いたlinked here
私は、これがあなたのために役に立つことを望みます!コメントを私に教えてください3