- 자바스크립트에는 this라는 키워드가 있다. this는 문맥에 따라서 다양한 값을 가지는 데, this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별된다.
- this의 값들은 크게 4가지 정도로 나눌 수 있다. 즉, this를 이용하는 함수를 4가지 방식 중에서 어떤 방식으로 실행하느냐에 따라 this의 값이 결정된다는 뜻이다.
- 이러한 특성 때문에 this가 무엇을 지칭하는지 알기 위해서 우리는 this가 사용된 함수가 어디서 어떻게 실행되었는지를 찾아야만 한다.
- 일반 함수 실행 방식
첫 번째로, 일반 함수 실행 방식으로 함수를 실행했을 때 this의 값은 Global Object를 가리킨다. 즉 브라우저 상에서는 window객체를 말한다.
window란 전역 객체를 뜻하며 전역변수를 선언하면 window내에 들어가게 됨
var age = 100;
function foo () {
var age = 99;
bar(age)
}
function bar () {
console.log(this.age);
}
foo();
>> 여기서 this는 전역객체를 뜻하기 때문에 100이 출력된다- static mode 에서 일반 함수 실행 방식
Strict mode란 단어 그대로 엄격한 형식이라는 뜻이다. 즉, Strict mode에서 실행되는 모든 코드들에 좀 더 엄격한 규칙들을 적용하는 것을 말한다.
이러한 엄격한 방식을 적용하는 이유에는 여러 가지가 있겠지만 가장 크게는 비엄격 모드(Sloppy mode)에서 자주 일어나는 다양한 실수들을 방지하여 각종 에러들을 감소시키는 데 있다.
strict mode를 사용하려면 스크립트 코드 맨 상단에 'use strict'; 혹은 "use strict";라는 구문을 추가하면 된다.
var name = 'Julia';
function foo () {
console.log(this.name); // error
}
foo();- 보통 일반 함수 실행 방식에서 this는 window 객체를 가리킨다고 했다. 그러나 strict mode에서 this는 무조건 undefined이다.
- 그렇기 때문에 위 코드에서 this.name을 출력하면, foo함수가 아무리 일반 함수 실행 방식으로 실행되었다고 하더라도 strict mode이기 때문에 this는 undefined가 된다.
- undefined에는 어떠한 속성도 없으므로 this.name은 실행할 수 없어 에러가 출력되게 된다.
- 보통 코드를 작성할 때 this가 실수로 window 객체로 인식되어 예상치 못한 에러가 발생하는 경우가 많은 데, strict mode는 그러한 버그의 발생을 애초에 방지해준다.
- 도트 표기법
Dot Notation이란 우리가 Object를 만들고 그 Object의 key와 value를 부여한 후 도트(.)로 값에 접근하는 방식을 말한다. 아래 예제를 보면 이해가 쉽다.
var age = 100;
var ken = {
age: 35,
foo: function () {
console.log(this.age); // 35
}
}
ken.foo();- 이렇게 Dot Notation으로 함수가 실행되면, this는 그 도트 앞에 써있는 객체 자체를 가리킨다. 즉, 위 코드에서 this.age의 this는 ken을 가리킨다. 그러므로 this.age는 ken.age와 같기 때문에 35가 출력된다.
- 명백한 바인딩 (Explicit Binding) / call, bind, apply
var age = 100;
function foo() {
console.log(this.age);
}
var ken = {
age: 35,
log: foo
}
foo.call(ken, 1, 2, 3);위 코드에서 우리는 foo 함수에 call 메소드를 사용하여 실행하였는 데, 인자로 각각 ken, 1, 2, 3을 주었다. 이 인자들 중에서 가장 첫 번째로 쓴 ken이 바로 this의 값으로 지정된다. 1, 2, 3은 this의 값과는 상관없이 순서대로 foo 함수가 된다.
그러므로 위 코드에서 this.age는 ken.age가 되어 35가 출력된다.
var age = 100;
function foo() {
console.log(this.age);
}
var ken = {
age: 35,
log: foo
}
foo.apply(ken, [1, 2, 3, 4, 5]);- 위 코드에서 apply또한 같은 역할을 한다. apply는 this의 값을 지정해주는 인자 외에도 배열을 인자로 넣을 수 있는 데, 이 배열의 값이 순차적으로 foo 함수의 인자가 된다.
- new 키워드를 사용한 함수 실행
함수를 그냥 foo()와 같은 형태로 실행할 수도 있지만 new 키워드를 사용해서 생성자 함수로 만들어 사용할 수도 있다. 이 경우에 this는 빈 객체가 된다.
function Person () {
console.log(this);
}
new Person();
>> Person {}