[오늘의 학습] 211206

Javascript

this

• 자신이 속한 객체를 참조

간단한 예제

function checkName(){
  console.log(this.name);
}

var name = 'X-men'; 

let Wolverine = {
  name : 'Hugh Jackman',
  sayName : checkName
};

let Magneto = {
  name : 'Max Eisenhardt',
  sayName : checkName
};

checkName();         // X-men
Wolverine.sayName(); // Hugh Jackman
Magneto.sayName();   // Max Eisenhardt

• 변수 'name'은 전역(window)으로 선언했기 때문에  window.name === 'X-men'이 성립한다.
• 함수 'checkName'을 선언하게 되면 각자 소속된 객체의 'name' 값을 불러오는 것을 알 수 있다.
• this는 함수가 '실행'될 때 그 값이 결정된다.

call()

var Wolverine = {
  name : 'Hugh Jackman',
  sayName : function(){    
    console.log(this.name);
  }
};

var Magneto = {
  name : 'Max Eisenhardt',
};

// call() 메서드 확인하기
Wolverine.sayName.call(Magneto); // Max Eisenhardt

• 이 메서드의 인수에 this로 사용할 값을 전달
• 'Wolverine.sayName'이 작동하게 되면 익명함수가 실행
• 실행된 익명함수에 설정된 인수가 없지만 call 메서드 내의 'Magneto'를 가져오게 된다.
• console.log 내에 this가 전역변수로 선언된 'Magneto' 객체를 가리키게 되면서 'Max Eisenhardt' 결과값이 나온다.

apply()

var Wolverine = {
  name : 'Hugh Jackman',
  sayName : function(is, is2){    
    console.log(this.name + ' is ' + is + ' or ' + is2);
  }
};

var Magneto = {
  name : 'Max Eisenhardt',
};

// apply() 메서드 확인하기
Wolverine.sayName.apply(Magneto, ['villain', 'hero']);
// Max Eisenhardt is villain or hero

• 이 메서드의 인수에 this로 사용할 값을 전달(배열의 형태로도 전달 가능)
• 'Wolverine.sayName'이 작동하게 되면 익명함수가 실행
• is에 'villain'이, is2에 'hero'가 전달되었다.
• apply() 메서드 내의 모든 값들이 활용되었다.

bind()

• this가 고정된 새로운 함수를 반환