This詳細

thisの定義:現在実行されているコードの環境オブジェクトを表します.
このため、thisの解析を「グローバル環境」と「関数環境」の二つのタイプの環境オブジェクトに分けることができます.
一、全体環境

console.log(this === window); // true 

var a = 10;
console.log(this.a); // 10

二、関数環境
関数の内部では、thisの値は、関数が呼び出された時の動作環境に依存します.
ここでは、メモリ内のデータ構造に関する知識点に関して、以下のような字面量のオブジェクトを定義すると、一連の関連関係が発生します.var obj = { name: 'Tom' };javascriptエンジンは先にメモリの中で生成します. } オブジェクトは、次にこのオブジェクトのメモリアドレスをobj変数に割り当てますので、 Obj変数はメモリアドレスだけを保存しています.Obj.nameを取得するには、JAvascriptエンジンはまずObj変数からメモリアドレスを取得して、そのアドレスから元のオブジェクトを取得して、name属性に戻ります.
属性値が関数の場合、この関数はメモリに保存されます.このメモリアドレスは属性に割り当てられます.したがって、このアドレスは環境によって実行される時の作用領域は異なります.thisオブジェクトは関数の現在の実行環境オブジェクトを指しています.実行環境はEvent Loop(イベントサイクル)にあります.プロセス中に変化するので、thisは関数環境において実行時に属します.

var name = 'Tom'; 

var obj = { 
    name: 'Iceberg', 
    say: function() { 
        console.log('my name is ' + this.name); 
    }, 
    sub: { 
        say: function() { 
            console.log('my name is ' + this.name); 
        } 
    } 
}; 

obj.say(); // my name is Iceberg 
obj.sub.say() // my name is undefined; 

var say = obj.say; 
say(); // my name is Tom;

上記の例では、Obj.say()実行環境はobjオブジェクトであり、Obj.sub.say()の実行環境はobj.subオブジェクトであり、Obj.subにはname属性がないため、undefinedとなり、var say=obj.sayとは、say方法のメモリアドレスをフル変数に付与することを意味し、グローバル変数name値から取得する.
シーンを使う
次に、thisの関数環境における異なる運用シーンから分析します.
1.イベントコールバック関数

var handler = { 
    nickname: 'anonymous', 
    register: function() { 
      console.log(this.nickname); 
    } 
} 
$('#registerBtn').on('click', handler.register); // undefined

以上の論理クリックトリガー後に出力されるのはundefinedです.関数がイベントトリガーのコールバック関数として実行される場合、thisはこのトリガーイベントに対応する要素を指します.$('#registerBtn').on('click', handler.register.bind(handler)); // anonymous2.コンストラクタは、構造関数におけるthisの論理を理解するためには、コンストラクタが実際化する過程で何が起こっているかを明確にする必要があります.

1.  function A() { 
2.  this.name = 'Tom'; 
3.  this.age = 20; 
4.  } 
5.  var a = new A();

newコマンドを使って構造関数Aを実装すると、次の流れが発生します.

1.       ，           
2.                prototype   
3.                this    
4.          
5.     this   （  return        ，    123，         return this   ）
6.         this                   。

ビッド

1.  function A() { 
2.  this.nickname = 'Tom'; 
3.  this.say = function() { 
4.  console.log(this.nickname); 
5.  } 
6.  } 
7.  var b = { nickname: 'John' }; 
8.  var a = new A(); 
9.  var say = a.say; 
10. var say1 = a.say.bind(a); 
11. var say2 = a.say.bind(b);
12. say(); // undefined
13. say1(); // Tom
14. say2(); // John

cal&appy

1.  function A() { 
2.  this.name = 'Tom'; 
3.  this.sayName = function(){ 
4.  console.log(this.name); 
5.  }; 
6.  } 

8.  function B() { 
9.  this.name = 'John'; 
10.  } 

12.  var a = new A(); 
13.  a.sayName.call(new B()); // John

まとめ:1.一般関数ではthisを使ってグローバルオブジェクトwindow 2を指す.オブジェクト方法として使用する場合、thisはそのオブジェクト3を指す.構造関数として使用する場合、thisはnewのインスタンス4.appplyまたはcallを指して使用する場合、この方法の最初のパラメータは変更後のコール関数のオブジェクトであり、関数の中でthisは最初のパラメータを指す.5.イベントトリガのコール関数として実行される場合、thisはthisは、thisです.このトリガーイベントに対応する要素を指します.
タイトル外:手書きでnew操作をする

//     
function Otaku(name, age) {
    this.name = name;
    this.age = age;
    //     
    this.habit = 'pk';
}
//             
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function() {
    console.log('I am' + this.name);
}
//     person  
const person = new Otaku('cty', 5000);
person.sayYourName();
console.log(person);