his

リファレンス , コンテキストの実行 , arrow function

this

複数の言語において、thisは自分の属する対象を表す.
JavaScriptのthisは他の言語のようにnewキーワードで自分を表すことができますが、使用する方法はもっと多いです.
より詳細には、JavaScriptでは、thisが実行コンテキストになります.(オブジェクト関連)
実行contextとは、호출자가 누구냐는 것と理解できる.(注目するオブジェクトの程度を知る)thisは、関数の呼び出し方法に従って動的に決定されるので、このバインディングによって、どの値に関連するかを決定することができる.
バインディングとは、呼び出しに基づいて特定のオブジェクトにリンクすることです.
この4つのバインド操作を見てみましょう

1.デフォルトバインド(グローバルオブジェクト)

一般関数の実行方法に従って、thisはグローバルオブジェクト(window)をcontextオブジェクトとする.

var name = 'red';

function foo () {
    console.log(this.name);
}

foo(); // red

グローバル範囲で定義された変数は、グローバルオブジェクトに登録されます.
ここで、foo()のように関数を呼び出す方式を一般関数実行方式と呼ぶ.
したがって、var name = redはwindow.name = redに等しく、このオブジェクトに変数を登録することは、グローバルスキャンで変数を宣言することに等しい.
別の例

var age = 100;

function foo () {
    var age = 99;
    bar(age)
}
function bar () {
    console.log(this.age);
}

foo();

上記のコードでは、bar関数はfoo関数内部で通常の関数実行方式で実行されるため、bar関数にどのようなパラメータが伝達されてもbar関数内部のthis.ageはwindow.ageを指すため、グローバル変数100が出力される.

2.暗黙的バインド（実行方法）

暗黙的バインドとは、関数がオブジェクトを介して呼び出されると、このオブジェクトがthisのcontextオブジェクトになることを意味します.

var b = 100;

function test() {
  console.log(this.a);
}

var obj = {
  a: 20,
  func1: test,
  func2: function() {
    console.log(this.a);
  }
};

obj.func1(); // 20
obj.func2(); // 20

上記の例では、func1およびfunc2がobjによって呼び出されるので、objはthisとなる.
したがって、出力をconsole.log(this.b)に変更すると、undefinedが出力される.
ここでは、デフォルトのバインドに関連付けることができます.

var b = 100;

function test() {
  console.log(this.b);
}

var obj = {
  a: 20,
  func1: test,
  func2: function() {
    console.log(this.b);
  }
};

var obj2 = {
  b: 40
};

obj.func1(); // 20
obj.func2(); // 20

活動場所を表す

var gFunc1 = obj.func1;
gFunc1(); // 100

obj2.func = obj1.func;
obj2.func(); // 40

上記コードが付加されると、gFunc1は100を出力する.
グローバルスキャンで生成された変数がグローバルオブジェクトに登録されているため、gFunc1のthis contextがグローバルオブジェクトとなり、グローバル変数のbを出力することができる.
逆に、obj2.funcはobj2 contextで生成されるので、obj2のb変数値が出力される.

3.明示的なバインド

関数オブジェクトには、call、apply、bindのメソッドがあり、このときに最初のパラメータに渡されるのがthis contextオブジェクトです.

function test() {
  console.log(this);
}

var obj = { name: "yuddomack" };
test.call(obj); // { name: 'yuddomack' }

上記のコードでは、testのthisはwindowではなく、objです.(この関数のthisはthisと明確に表すことができます!!)

4.バインドジェネレータ

newキーワードを介してクラス設計モードでバインドされます.

function foo(a) {
  this.a = a;
  this.qwer = 20;
}

var bar = new foo(2);
console.log(bar.a); // 2
console.log(bar.qwer); // 20

動作順から見ると
1.新しいオブジェクトを作成します.
2.新しく生成されたオブジェクトのプロトタイプチェーンは、呼び出し関数のプロトタイプチェーンに関連付けられます.
3.生成されたオブジェクトをこのコンテキストとして明示的に使用して関数を実行します.
4.生成されたオブジェクトを返します.
この言葉はどういう意味ですか.

// 1. 새 객체가 만들어짐
var obj = {};
// 2. 새로 생성된 객체의 Prototype 체인이 함수의 프로토타입과 연결됨
Object.setPrototypeOf(obj, foo.prototype); // 프로토타입을 연결합니다. 이 글에서는 무시해도 상관없습니다.
// 3. 1에서 생성된 객체를 context 객체로 사용(명시적으로)하여 함수가 실행됨
foo.call(obj, 2);
// 4. 이 함수가 객체를 반환하지 않는 한 1에서 생성된 객체가 반환됨
var bar2 = obj; // 여기서 foo는 반환(return)이 없으므로 인스턴스가 생성(된 것처럼 동작)

console.log(bar2.a); // 2
console.log(bar2.qwer); // 20

newでオブジェクトを生成するふりをして、実際には上記のコードのようなプロセスが発生します.(以上のプロセスは新しい形で一度に完了!)
一言で言えば、再創造の対象を指す.

5. Arrow Function(es6)

矢印関数では、thisが特に動作します.
矢印関数で宣言されたscopeの一部を使用するthis contextです.

function objFunction() {
  console.log(this.foo); // 13 
  return { 
    foo: 25, 
    bar: () => console.log(this.foo) // 13 vs 25
  }; 
} 

objFunction.call({foo: 13}).bar();

barが矢印関数でない場合、25(暗黙的バインド)を出力する必要があります.これは、メソッドを持つオブジェクトを指すためです.
矢印関数はLexical thisを有するため、出力される13は、親環境thisを継承する明示的なバインドと同じである.
これらの特徴は、コールバック関数を記述する際に役立ちます.コールバックも関数であるため、es 5ではthisがグローバルオブジェクトを指し、es 6は親環境のthisを継承します.