JavaScript:thisとcall、apply、bind

これは何ですか。

関数を呼び出すオブジェクト.
コアは、thisの値は呼び出しメソッドによって決定されます.(誰が呼び出し(実行)したのですか?)
この関数を使用して、関数を再使用します.
このオプションを使用すると、他のオブジェクトで関数を繰り返し使用できます.

function menuGlobal(){
  console.log("오늘의 메뉴는 "+ this.name);
}

------------------------------
              
var myFood = {
  name : "김치찌개",
  menu : menuGlobal
}

myFood.menu();

"결과 : 오늘의 메뉴는 김치찌개"

-------------------------------

var yourDinner = {
  name: '된장찌개',
  menu : menuGlobal
}

yourDinner.menu();

"결과 : 오늘의 메뉴는 된장찌개"

状況に応じて自動的に値を割り当てるthisも制御できる必要があります.」
call、apply、bindは代表的に存在する.
1. call()
この値を変更したり、関数を実行するときに使用するパラメータを渡したりできます.

call() 메서드는 함수가 사용할 인자를 전달할 수 있기 때문에 인자를 받을 weatherCondition으로 지정해주었다.

// code
function weatherGlobal(weatherCondition) {
  console.log('오늘의 날씨는' + weatherCondition + this.weather) 
  // 여기서 this는 맨 밑에 weatherGlobal을 호출한 .call( 객체, ___ ) 객체가 가지고 있는 weather을 바라본다.
}

var today = {     <-- 함수가 따로 필요 없는 객체를 생성.
  weather : '맑음 입니다.'
}

var tomorrow = {
  weather : '눈 입니다'
}

weatherGlobal.call(today, ' 30도 ')  "결과 : '오늘의 날씨는 30도 맑음 입니다.'"
// weatherGlobal함수는 call()안에 넣어준 객체를 바라보게 된다.
// 또한 인자값(weatherCondition)을 넣을 수 있다.

weatherGlobal.call(tomorrow, ' -12도 ')  "결과 : '오늘의 날씨는 -12도 눈 입니다'"

ターゲットオブジェクトをcall()で指定します.
2. apply()
関数を実行すると、引数が配列にバインドされ、一度に渡されます.

function weatherGlobal(weather, temperature) { // 인수로 배열을 전달할 것이기 때문에 두개의 인자를 만들었다.
  [weather, temperature].forEach(function(el){
   console.log("오늘의 날씨는 "+ this.city + el);
  },this)  // forEach 같은 반복문에서 this를 전달 받으려면 두번째 인자로 this를 선언해주어야 한다.
// this를 선언해주지 않으면! 
// forEach안에 실행되는 function은 그 안에 this로 불러오는 객체를 바라보게 되는데 this를 선언하지 않으면
// 전역 객체인 window객체를 불러오게 된다.
}

var today = {
 city : "London"
}

var tomorrow = {
 city : "Sydney"
}

weatherGlobal.apply(today, [" 비"," -4도"])

결과 : 
'오늘의 날씨는 London 비'
'오늘의 날씨는 London -4도'"


weatherGlobal.apply(tomorrow, [" 폭우"," 10도"])

결과 :
'오늘의 날씨는 Sydney 폭우'
'오늘의 날씨는 Sydney 10도'

🔎 call()とapply()の違い
call()は、関数を実行するときに1つ以上のパラメータを渡します.
apply()は、渡すパラメータを配列にグループ化し、一度に渡します.したがって、2つの引数のみが使用されます.
引数を配列に送信する以外は、call()とapply()は同じ機能を実行します.
3. bind()
es 5に構文が追加されました.
この値をどこで使用しても、呼び出しオブジェクトは固定されます.

function weatherGlobal(weather){
  console.log("오늘의 날씨는 "+ weather + this.city);
}

var today = {
 city : "London"
}

var tomorrow = {
 city : "Sydney"
}

var weatherBindToday = weatherGlobal.bind(today);
// weatherBindToday 변수에 weatherGlobal 함수 안에 있는 this의 값을 bind를 사용해서 today로 정의해버렸다.
var weatherBindTomorrow = weatherGlobal.bind(tomorrow);



weatherBindToday('맑음 '); // 결과 : '오늘의 날씨는 맑음 London'
weatherBindTomorrow('폭우 ') // 결과 : '오늘의 날씨는 폭우 Sydney'

🔎 bind()だけの力を見て

"var today 변수에 새로운 key 값을 설정하고 새로 만든 key의 값으로 weatherBindTomorrow의 함수를 사용할 수 있다."

function weatherGlobal(weather){
  console.log("오늘의 날씨는 "+ weather + this.city);
}

var today = {
 city : "London"
}

var tomorrow = {
 city : "Sydney"
}

var weatherBindToday = weatherGlobal.bind(today);
var weatherBindTomorrow = weatherGlobal.bind(tomorrow);

today.newKeyBox = weatherBindTomorrow;
console.log(today) --> {city : 'London', newBox: f}

// today 변수 안에 newBox 키가 생성되고 값으로는 Sydney의 값을 갖고 있는 weatherBindTomorrow 함수가 들어갔다.

today.newKeyBox('나는야 시드니 ') // 결과 : "오늘의 날씨는 나는야 시드니 Sydeny"

これにより、他のオブジェクトで実行される関数は、その関数のみを表示するオブジェクトをロックすることもできます.
+矢印関数のthis
矢印関数のthisは、通常のthisのように、関数を呼び出すオブジェクトを指定しません.
親Scopeにthisを割り当てます.
📝 このアイテムをクリア

は呼び出し関数のオブジェクトを表す.

call()およびapply()は、この割り当ての対象を指定できます.

bind()メソッドでは、指定したオブジェクトが固定される新しい関数が作成されます.

矢印関数では、親Scopeのオブジェクト割当てが受信されます.