JavaScriptのthis、apply、bind、callについて説明します.

ソース:https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

[概要]

符号化中はjavaでもjavascriptでも多く見られます.
今日では、これに関連するアプリケーション、バインド、呼び出し関数について説明します.

[this]

ほとんどの場合、thisの値は関数を呼び出す方法によって決まります.
コードを直接見ましょう

// 웹 브라우저에서는 window 객체가 전역 객체입니다.
console.log(this === window); // true

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

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

上のコードに示すように、グローバルコンテキストではwindowオブジェクトと同じです.
関数コンテキストのthisを見てみましょう.

let user = {
  name: "JOOO",
  age: 25,

  sayHi() {
    // 'this'는 '현재 객체'를 나타냅니다.
    alert(this.name);
  }

};

user.sayHi(); // JOOO

sayHi関数が実行されると、現在のオブジェクト、すなわちユーザーオブジェクトが参照されていることがわかります.

[call,apply,bind]

グローバルコンテキストと関数コンテキストから値を取得しました.
ただし、名前の付いた変数で値を指定する必要がある場合があります.
このときはcall、apply、bindを使用します.

1. call,apply

let user = {name : 'JOOO'}; // user 객체 생성
let sayHi = function(age){ // sayHi 함수 생성
	console.log(`안녕, 내 이름은 ${this.name}입니다. 나이는 ${age}입니다. `); 
};

sayHi(15); // this객체가 없는상태
sayHi.call(user,25); // this객체를 user로 설정, 파라미터 25
sayHi.apply(user,[35]); //this객체를 user로 설정, 파라미터 35

callとapplyの最初のパラメータは、このオブジェクトを設定することです.
2番目のパラメータには、スキップするパラメータ値が含まれます.
apply関数の2番目のパラメータはcallと異なる点は、配列が必要であることです.

2. bind

bindは関数を実行しません.
ただし、boundという関数はいつでも返すことができます.

let user = {name : 'JOOO'}; // user 객체 생성
let sayHi = function(age){ // sayHi 함수 생성
	console.log(`안녕, 내 이름은 ${this.name}입니다. 나이는 ${age}입니다. `); 
};

// user객체를 this로 설정하고 boundObj변수를 통해 나중에 사용할수있습니다.
let boundObj = sayHi.bind(user); 

boundObj(32); // 안녕, 내 이름은 JOOO입니다. 나이는 32입니다. 

[終了]

this、apply、bind、callを簡単に紹介しました.
この関数には矢印関数の唯一のthisはありません.
外部関数で見つけます.
そこまでは触れていないところも多いですが、実際にエンコードして利用すれば整理してアップロードします.
ありがとう!