この4つのバインド方法について簡単に説明します

もう一度この知識点の復習を行い、毎回温故知新の過程である.今回のthisの勉強は『君の知らないJavaScript』という本に基づいて、本の中の知識をまとめたものだ.
まず、一般的には、thisは関数が定義されたときにバインドされるのではなく、関数が呼び出されたときにバインドされることを明確にします.
では、関数のthisには4つのバインド方法があります.
1.デフォルトのバインド
直接関数を呼び出し、修飾されていない関数を使用して呼び出します.デフォルトのバインドしか使用できません.他のルールは適用できません.コードは次のとおりです.

function foo() {
  console.log(this.a);
}
var a = 1;
foo() // 1

2.暗黙的バインド
関数が呼び出されたときにコンテキストオブジェクトがある場合、thisはこのコンテキストオブジェクトをバインドします.コードは次のとおりです.

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo
}
var a = 1;
obj.foo() // 2

実はfooという関数がobjオブジェクトに属しているとは言えないが、foo関数が呼び出されたときの定着点は確かにobjオブジェクトを指しており、関数がコンテキストオブジェクトを参照している場合、暗黙的なバインドは関数呼び出しのthisをこのコンテキストオブジェクトにバインドする.
オブジェクト属性参照チェーンの最上位レベルのみ、または最上位レベルのみが呼び出し位置に影響します.

var foo = function () {
  console.log(this.a)
}
var obj2 = {
  a: 2
  foo: foo
}
var obj1 = {
  a: 1
  obj2: obj2
}
obj1.obj2.foo() // 2

暗黙的な損失
暗黙的バインド方式を適用してthisをバインドする場合、暗黙的にthisを失うことがよくあります.

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo
}
var bar = obj.foo;
var a = 'global';
bar() // 'global'

この場合、barはobj.fooの参照であるが、実際にはfoo関数自体を参照している.このときbar()は実際には修飾されていない関数呼び出しであり、デフォルトのバインドが適用される.
3.ハードバインド
call、apply、bindを使用して、関数を呼び出すときにコンテキストオブジェクトを直接指定すると、関数のthisが入力されたオブジェクトにバインドされます.コードは次のとおりです.

function foo() {
  console.log(this.a);
}
var obj = {
  a: 1
}
foo.apply(obj) // 1

4.newバインド
newを使用してコンストラクション関数を呼び出します.コードは次のとおりです.

function Foo(a) {
  this.a = a;
  console.log(this.a);
}
var obj = new Foo(2);
console.log(obj.a) // 2