함수가 호출되면 컨텍스트가 생성되고 그 다음 함수를 실행한다. 컨텍스트 내에 사용 변수가 없으면 스코프 체인을 따라 상위 컨텍스트에서 변수를 찾고 함수 실행이 마무리되면 컨텍스트가 사라진다.
컨텍스트 생성 시 그 안에 생성되는 것 중 하나가 this
this는 바로 스코프마다 생성된 고유한 실행 컨텍스트를 의미
this의 값은 함수의 선언이 아닌 호출한 방법에 의해 결정된다. 즉, 누가 this를 불렀는지에 따라 값이 달라짐
명시적 바인딩을 통해 this의 값을 변경시킬 수 있음
apply() call() 메서드를 통해 인자를 this로 만들어주는 기능을 한다.
function whoisThis() {
console.log(this);
}
whoisThis(); //window
var obj = {
x: 123,
};
whoisThis.call(obj); //{x:123}
TypeScript
복사
apply()
첫 번째 인자는 함수 내부에서 사용되는 this에 바인딩
두 번째 인자는 배열을 받으며 자신을 호출한 함수의 인자로 사용
function Character(name, level) {
this.name = name;
this.level = level;
}
function Player(name, level, job) {
Character.apply(this, [name, level]);
this.job = job;
}
var me = new Player('Nana', 10, 'Magician');
TypeScript
복사
call()
apply와 기능은 같으나 두 번째 인자가 배열이 아닌 목록을 받는다는 차이점이 있음
function Character(name, level) {
this.name = name;
this.level = level;
}
function Player(name, level, job) {
Character.call(this, name, level);
this.job = job;
}
var me = {};
Player.call(me, 'nana', 10, 'Magician');
TypeScript
복사
유사배열객체에서 배열 메서드를 쓸 때 사용함
function func(a, b, c) {
var args = Array.prototype.slice.apply(arguments);
args.push('hi!');
console.dir(args);
}
func(1, 2, 3); // [ 1, 2, 3, 'hi!' ]
var list = {
0: 'Kim',
1: 'Lee',
2: 'Park',
length: 3,
};
Array.prototype.push.call(list, 'Choi');
console.log(list);
TypeScript
복사
ES6부터는 array.from() 메서드를 사용할 수 있음
유사 배열 객체를 얕게 복사하여 새로운 array로 만들어준다.
화살표 함수에서의 this
전역 컨텍스트에서 실행되더라도 this를 새로 정의하지 않고 바로 바깥 함수나 클래스의 this를 사용함