#deep in JavaScript#--JavaScriptのthis

シーケンス
ここ数年、ウェブフロントエンドの急速な発展に伴い、フロントエンド開発に投入される人が増えている.先端の特徴は入門が簡単で、精通が極めて難しいことです.多くの人は先端に触れたばかりの時に誤った認識を生みやすい.多くのフロントエンドエンジニアの中で、多くの開発者はjQueryのAPIを使って、いろいろなjqプラグインを集めて、これらのもので体験のいい小物を構築することができると感じています.現在、フロントエンドのエンジニアの両極化が深刻で、弊害の能流弊は膝を分けて献上し、五体投地させ、技術がlowの人を大きく落とすほどだ.実は、どんな技術を勉強しても、基礎と原理に対する理解は永遠に開発者の絶えず成長と進歩の本源であり、一人の能力を測る鍵でもある.そこで筆者は、仕事生活の研究で蓄積したものを皆さんと共有し、#deep in JavaScript#に整理し、研究の中核的、基礎的なものを皆さんと一緒に学びたいと思います.
に質問
jQueryを学ぶべきかJavaScriptを学ぶべきか.実際、それらの関係を明らかにすると、この問題はおかしいと思いますが、この問題は常に先端開発に入った開発者に言及されています.jQueryはオリジナルJavaScriptのパッケージで、便利なAPIをいくつか提供し、性能を最適化し、下位層の互換性を遮断するなど、確かに良いものです.ここまで言うと、JavaScriptの重要性ははっきりしています.そのため、トランザクションの本質を分析し、JavaScriptのいくつかの問題を深く掘り起こす必要があります.
話題
今日私たちが議論するのはJavaScriptのthisで、専門的に研究を勉強しなければ、その本源を明らかにするのは難しい.確かに、私はJava開発から転じたので、jsに触れて間もなく、jsの場合によってはJavaのthisと似ていると感じて、自然に同じものに分類されました.後続の学習の中で、他の人のブログと総括を見ていつも自分の前の理解が偏っていることを発見することができて、専門的な話の精力が深く研究して、総括するようです.最近読んだ『君の知らないJavaScript(上巻)』のJavaScriptのthisに対する説明まで、私の前のthisに対する理解をすべて通じて、私を明るくさせた.
いったい何がthisなのか、thisは指しているのか.
実は多くのプログラミング言語にthisがあり、ほとんどのオブジェクト向けの開発言語では、thisは現在のオブジェクトを指しています.JavaScriptはオブジェクト向けではない弱いタイプの言語なので、クラスの言い方もありません.ES 5ではfunctionは一等公民です.
上記の背景の下で、多くの人は連想します:thisは関数自身を指して、関数自身に対する参照を指します;次のコードを考慮します.

function sayHello () {
    this.content = 'hello';
}
console.log(content);    // ReferenceError: content is not defined
sayHello();
console.log(content);    // hello

コードは簡単で、関数が呼び出されていない場合、グローバル役割ドメインにはcontentの定義がないため、レポート参照エラーが発生します.関数を呼び出すと、ここでcontentをthisの属性として定義し、最後の出力と結びつけて、このcontentはグローバルオブジェクト(ブラウザではwindow、ノードではglobal)の属性として定義されます.メソッド定義時にthisがデフォルトでグローバルオブジェクトを指していることもよく見られます.
関数を指さない以上、あるオブジェクトを指し示しているように見えますか?前のコードは、次のように変更されました.

function sayHello () {
    console.log( window === this );
}
sayHello();    // true

厳密に等しい比較の結果function内部(関数呼び出し)のthisはグローバルオブジェクトwindow(ホストオブジェクトはブラウザ)を指しますが、なぜそうなるのでしょうか.直接作用ドメインの定義は、実際にはグローバルオブジェクトの下に定義されています.たとえば、次のようになります.

var a = 23;
console.log( window.a === a );    // true
function sayHello () {
    ......
}
console.log( window.sayHello === sayHello );    // true

したがってsayHello()はwindowと見なすことができる.sayHello()は(事実上そうである)、sayHello()内部のthisがwindowを指しているので、これは本当にあるオブジェクトを指しているようです.
指向と関数呼び出し
上のコードは、呼び出し元がwindowオブジェクトであるため、sayHello内部のthisはwindowを指し、他のオブジェクト呼び出しであれば?次のコードを考えます.

function sayHello () {
    console.log( this === window );
    console.log( this === obj);
}
var obj = {
    sayHello: sayHello
};
//   ：   obj.sayHello()，            ，          2017/1/23
// sayHello();    // false  true

obj.sayHello();    // false true

呼び出しオブジェクトがobjに変更されたため、thisポインタはobjに変更されました.上記のすべての議論を総合すると、thisは現在のオブジェクトへの参照であり、実行時に確認されることを指します.
参照先の変更
JavaScriptでは、thisは通常、3つの場合に変更されます.

オブジェクト

を作成する

callまたはapplyを使用して

を強制的に変更

オブジェクトは、ECMA 5+の定義に従ってnew Functionカテゴリのオブジェクトを作成するときに、オブジェクトの内部thisが現在のオブジェクトを指すため、

というコードがあります.

//        function name          ，        
function sayHello () {
    console.log( this === window );
}
new sayHello();    // false
```
  this       ，   new sayHello()         ；
      Function     call apply  （        ，           ，apply         ），          this  call apply          ：
```JavaScript
var obj = {
    content: 20;
};
var content = 10;
function sayHello () {
    console.log( this.content );
}
sayHello.call(obj);    // 20
```
           ，   this           ：
```JavaScript
function sayHello () {
    console.log( this === window );
    console.log( this === obj);
}
var obj = {
    sayHello: sayHello
};
sayHello();    // false  true
```

#     
      ECMAscript6      ，           。             ，  babel     ，                      JavaScript     。            ，             babel          。
   JavaScript       () => {};           。         ，this                     ：
```JavaScript
var sayHello = () => {
    console.log( this === window );
    console.log( this === obj );
};
var obj = {
    sayHello: sayHello
};
obj.sayHello();    // true false
```

#   
>       ，                  、      。
> -- Kai Zou

#   
           ，          （     ^_^）。        ，        。              ，      。