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()