[JavaScript構文]だからこれはMond-1です

始める前に...

厳格モードと非厳格モードの間にいくつかの違いがあることをお伝えしたいと思います.
厳格なパターン?
JAvascriptはかなり長い間互換性の問題がありませんでした.既存の機能を変更せずに新しい機能を追加しました.
このようなメリットは、作成したコードが破壊されないことです.しかし、JavaScript作成者が行ったエラーや不完全な決定が言語に永遠に埋め込まれるという欠点もあります.
この状況はECMAScript 5(ES 5)が登場するまで2009年まで続いた.新しいES 5は新しい機能を追加し、既存の機能をいくつか変更しました.既存の機能を変更したため、サブ互換性の問題になる可能性がありますよね?したがって、ほとんどの変更はES 5のデフォルトモードで有効になっています.代わりに、use strictという特殊なインジケータを使用して「厳格モード」(strictmode)を有効にした場合にのみ、この変更が有効になります.
ソース(https://ko.javascript.info/strict-mode)
ここでは厳格なパターンに従うことはありません.

1.この基本原理

にthisの基本原理

基本的には、親オブジェクト自体を使用します.
ほとんどの場合、thisの値は、関数を呼び出す方法によって決定されます(実行時に割り当てに設定することはできません).
次の例を示します.

const test = {
  prop: 42,
  func: function () {
    return this.prop;
  },
};

console.log(test.func()); //output: 42

基本的に、thisは上位オブジェクト自体を受け入れる.funcの上位オブジェクトはtestである.そのためthis===testです.

🤔 グローバルに呼び出すと?

全境呼thisはどうしますか?
グローバルには(もちろん)親オブジェクトはありません.グローバル自体がトップオブジェクトだから...(グローバルもオブジェクトです.Webブラウザではwindowオブジェクトはグローバルオブジェクトです.)
したがって、ドメイン全体のthisは、ドメイン全体のオブジェクト自体を受け入れる.

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

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b); // "MDN"
console.log(b); // "MDN"

参考までにglobalThisのプロパティもあります.の双曲線コサインを返します.

2.一般関数コンテキストのthis

Universion関数コンテキストにおける基本的な動作原理

前述したように、thisの値は親オブジェクト自体を値とします.
もし私が関数だったら、誰が私を呼び出したのかが重要です.私を呼んだやつは私の父の相手だからだ.✨
次の例を示します.

functions f1() {
  return this;
}

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

f1という名前の関数でthisが呼び出されます.では、thisの値はf1の親であるべきである.f1の親は...?グローバル・オブジェクト.
したがって、thisはwindow(グローバルオブジェクト)となる.

📮 call()とapply()で私の関数コンテキストを別の関数コンテキストに渡します。

例1

// call 또는 apply의 첫 번째 인자로 객체가 전달될 수 있으며 this가 그 객체에 묶임
var obj = { a: "Custom" };

// 변수를 선언하고 변수에 프로퍼티로 전역 window를 할당
var a = "Global";

function whatsThis() {
  return this.a; // 함수 호출 방식에 따라 값이 달라짐
}

whatsThis(); // this는 'Global'. 함수 내에서 설정되지 않았으므로 global/window 객체로 초기값을 설정한다.
whatsThis.call(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다.
whatsThis.apply(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다.

call()およびapply()は、第1のパラメータとして伝達されたオブジェクトをthisにバインドすることができる.(これは、thisの値が対象となることを意味する.)
また、call()とapply()は変数を伝達する方法が異なる.
✔変数の値を解いて渡す.
✔変数の値パケットを1つの配列に転送します.
したがって、call()を使用するかapply()を使用するかによって結果が異なります.
次の例を示します.

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = { a: 1, b: 3 };

// 첫 번째 인자는 'this'로 사용할 객체이고,
// 이어지는 인자들은 함수 호출에서 인수로 전달된다.
add.call(o, 5, 7); // 16

// 첫 번째 인자는 'this'로 사용할 객체이고,
// 두 번째 인자는 함수 호출에서 인수로 사용될 멤버들이 위치한 배열이다.
add.apply(o, [10, 20]); // 34

call()を使用すると、配列内の変数をパラメータに直接渡すことができるので、よく使用することができます.
また、渡された値がオブジェクトでない場合は、オブジェクトに変換してみます.apply()またはapply()はグローバルオブジェクト、nullはデジタルオブジェクト、undefinedはStringオブジェクトです.

📎 7メソッドを使用してこの値を固定します。

'어쩌구'方法に伝達される最初のパラメータはbind()に固定される.

function f() {
  return this.a;
}

var g = f.bind({ a: "azerty" });
console.log(g()); // azerty

var h = g.bind({ a: "yoo" }); // bind는 한 번만 동작함!
console.log(h()); // azerty

var o = { a: 37, f: f, g: g, h: h };
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

3.矢印関数のthis

矢印関数では、bind()は、独自の静的範囲を含む.
言い換えれば、これは私が発表した時点の範囲です.
(一般関数の場合、これは私が呼び出したときの範囲です.この点に注意してください.)
したがって、this、thisまたはcall()などのapply()値を人為的に組み合わせることは無視される.

var globalObject = this;
var foo = () => this;
console.log(foo() === globalObject); // true

// 객체로서 메서드 호출
var obj = { func: foo };
console.log(obj.func() === globalObject); // true

// call을 사용한 this 설정 시도
console.log(foo.call(obj) === globalObject); // true

// bind를 사용한 this 설정 시도
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

オブジェクトまたは関数で宣言された矢印関数を読み込むときは注意してください.

// 화살표 함수의 this는 선언된 이 시점에서, 자신이 포함된 상위 객체로 고정된다.
// 따라서 function() {...}이 어떻게 호출되느냐에 따라 달라진다.
var obj = {
  bar: function () {
    var x = () => this;
    return x;
  },
};

// **obj의 메소드로써** bar를 호출하면 this가 obj로 설정된다
// 반환된 화살표함수 그 자체를 fn에 할당
var fn = obj.bar();

// obj의 메서드 bar에서 생성된 fn이기 때문에
// fn의 상위객체는 obj가 된다
console.log(fn() === obj); // true

// 호출 없이 obj의 메소드를 참조한다면 주의하세요.
var fn2 = obj.bar;
// 화살표 함수의 this를 bar 메소드 내부에서 호출하면
// fn2의 this를 따르므로 window를 반환할것입니다.
console.log(fn2()() == window); // true

ソース

[MDN - this]