[JavaScript]このバインディング

🚽 皆さんも気持ちの良い姿勢で読んでほしいです私もそう書きました
🙏🏻 私が理解するように書きました.間違った内容があったら私の気持ちを考えずに正しい知識をコメントで教えてくれればいいのにthisは自己参照変数です.'は自分の変数を参照し、ここで「自分」は対象を指す.
デフォルトでは、전역 객체 windowがバインドされ、関数呼び出しに応じて異なるオブジェクトがバインドされます.javascriptは関数を呼び出す方法が多いが、この文章では(主に使用されている)以下の3つの方法しかチェックしない.

呼び出し汎用関数

呼び出し方法

呼び出しコンストラクタ

関数呼び出しに基づいてこのアイテムをバインド

const foo = function () {
  console.dir(this)
}

/**
 * 일반 함수 호출
 * 전역 객체 window 바인딩
 */
foo() // window

/**
 * 메서드 호출
 * 메서드를 호출한 object 객체 바인딩
 */
const object = { method: foo }
object.method() // { method: [Function: foo] }

/**
 * 생성자 함수 호출
 * 생성자 함수가 생성할 객체(인스턴스) 바인딩
 */
new foo() // foo {}

一般関数の呼び出し
💡 関数が通常の関数として呼び出されると、常に전역 객체 windowがバインドされます.
メソッド内のネスト関数でも、これは同じです.

const object = {
  method: function () {
    
    function bar() {
      console.dir(this)
    }
    
    bar() // 메서드 내 중첩 함수를 일반 함수로 호출
  }
}

object.method() // window

bar()関数はメソッド内のネストされた関数として宣言され、通常の関数として呼び出される.
👉 関数をどこから呼び出しても、呼び出しが通常の関数の場合、windowオブジェクトを無条件にバインドします.
メソッド呼び出し
💡 関数が呼び出された場合、このメソッドは메서드를 호출한 객체をバインドします.

const objectA = {
  name: 'A',
  method: function () {
    return this.name
  }
}

console.log(objectA.method()) // A

const objectB = {
  name: 'B'
}

objectB.method = objectA.method // 메서드 할당
console.log(objectB.method()) // B

objectBメソッドを割り当てて呼び出すと、コード実行結果が変化します.この角度から見ると、持ち方(?)進行中のオブジェクトは意味がありません.誰が作成したとしても、thisは呼び出しメソッドのオブジェクトをバインドします.
🍯 理解TIP
サッカーをしていると思ってください.

const 축구선수 = {
  볼점유율: '50%',
  축구공: function() {
    return this.볼점유율
  }
}

// 축구선수가 드리블 하고 있다.
console.log(축구선수.축구공()) // 50%

仮定objectAオブジェクト呼び出し축구선수メソッド.サッカーの方法はサッカー選手のボールシェアを返還する.

const 손흥민 = {
  볼점유율: '80%',
  축구공: function() {
    return this.볼점유율
  }
}

// 손흥민 선수가 드리블 하고 있다.
console.log(손흥민.축구공()) // 80%

// 박지성 선수 등장
const 박지성 = {
  볼점유율: '85%'
}

박지성.축구공 = 손흥민.축구공 // 박지성에게 패스!⚽️

// 박지성 선수가 손흥민 선수에게 공을 넘겨받아 드리블 하고 있다.
console.log(박지성.축구공()) // 85%

孫興民がボールを持っている時は孫興民のボール占有率、朴智星がボールを持っている時は朴智星のボール占有率.つまり、サッカーは今ドリブルしている選手にとって意味があるということです.
説明するのは以下の通りです.

축구공()関数をメソッド

メソッドの축구공()メソッドを宣言するオブジェクトではなく、呼び出されたオブジェクトを参照します.

理解を助けるために「this do variant」という観点から「reference」という言葉が使われていますが、これは一般変数とは多少違います.
コンストラクタの呼び出し
💡 関数がコンストラクション関数として呼び出されると、バインドthisが呼び出されます.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.introduce = function () {
        return `안녕하세요. 제 이름은 ${this.name}이고, 나이는 ${this.age}살 입니다.`;
    };

    console.dir(this); // Person { name: 'bico', age: 29, introduce: [Function] }
}

const me = new Person("bico", 29);

console.log(me.introduce()); // 안녕하세요. 제 이름은 bico이고, 나이는 29살 입니다.

コンストラクション関数は、実行時まで黙って空のオブジェクトを作成し、このオブジェクトにバインドします.このオブジェクトは생성자 함수가 생성하게 될 객체(인스턴스)と呼ばれます.
コンストラクション関数は、同じ構造インスタンスを作成するテンプレートと同じです.快適な貼り付け対象と考えればいいだけです.似たようなものは인스턴스で、このボリュームはとても大きくて、次は...(これはCSSレベルとは全く関係ないので、発表者の皆さんに注意してもらいたいのですが...射手さんにCSSかどうかを聞き始めたばかりで、軽蔑されました.)
片付けてください.

클래스(Class)|常にオブジェクトを参照します.

thisバインドされたオブジェクトは、関数の呼び出し方法に依存します.

一般関数の呼び出し
👉 thisバインド.どこから呼び出しても、通常の関数を呼び出すとwindow!

メソッド呼び出し
👉 window 전역 객체バインド.メソッドを宣言したオブジェクトは、この立場にとって何の意味もありません.

コンストラクタの呼び出し
👉 메서드를 호출한 객체バインド.バインド時間が実行時よりも早いため、作成する正確な表現は使用されますが、作成されたオブジェクトのみと理解できます.仕事には影響ないようです.