JavaScript this 정리

2016-03-10 02:35:18

JavaScript에서 this 키워드는 흔히 객체지향적으로 자바스크립트를 작성할 때 종종 사용되곤 한다. 하지만 학부생 수준에서 배우게 되는 다른 객체지향언어(C++ / Java)와는 여러가지 상이한 점이 존재한다.

다음은 평범한 this의 용례다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

var hyunseob = new Person('이현섭', 27);
console.log(hyunseob.name); // 이현섭
console.log(hyunseob.age);  // 27

생성자(constructor)로서 사용하게 되면 다른 객체지향 언어와 비슷한 방식. 즉, 생성된 객체의 멤버변수를 참조하게 된다. 이것은 prototype을 사용해서 정의한 객체의 메소드에서도 동일하다.

// 위 코드에 이어서
Person.prototype.isYoung = function() {
  return this.age < 25;
}

console.log(hyunseob.isYoung()); // false

하지만 this 키워드는 기본적으로 전역객체(브라우저에서는 window와 같다.)이므로 굳이 위와 같이 객체 메소드 내부에서 호출하지 않아도 사용할 수 있다.

1 2	console.log(this.hyunseob.isYoung()); // false console.log(window === this) // true

this를 생성자 혹은 객체의 메소드에서 사용하지 않는 경우 this는 전역객체가 된다.

var seungmin = Person('이승민', 28);

console.log(seungmin); // undefined
console.log(name);     // 이승민
console.log(age);      // 28

위에서는 Person 함수를 new 키워드 없이 사용.. 즉, 생성자로 사용하지 않았기 때문에 this가 전역객체가 되었고, 덩달아 name과 age는 전역변수가 된 것이다. 더구나 Person 함수는 리턴하는 값이 없기 때문에 seungmin이라는 변수는 값이 초기화 되지 않았다. ~~미안해요 승민이형~~

특히, strict mode를 사용해서 함수를 정의하는 경우에는 다음과 같이 this는 undefined 값이 된다.

function returnThis() {
  return this;
}

function returnThisStrict() {
  'use strict';
  return this;
}

console.log(returnThis() === this);       // true
console.log(returnThisStrict() === this); // false
console.log(returnThisStrict());          // undefined

하지만 strict mode로 정의한 함수라도 특정 객체의 메소드로 호출된다면 this는 호출한 객체를 참조하게 된다.

1	console.log(window.returnThisStrict() === window); // true

또한, 다음과 같이 apply를 사용해서 내가 원하는 값을 this로 던져줄 수 있다.

var jaehoon = {};
Person.apply(jaehoon, ['석재훈', 28]);

console.log(jaehoon.name); // 석재훈
console.log(jaehoon.age);  // 28

이것은 call을 사용해도 똑같이 구현할 수 있다.

var hosuk = {};
Person.call(hosuk, '신호석', 24);

console.log(hosuk.name); // 신호석
console.log(hosuk.age);  // 24

call과 apply는 this로 넘겨지는 값이 객체가 아닐 때 자동으로 객체로 변환하므로 조심해야 한다. 또한 만약 this로 null 혹은 undefined같은 값을 넘기는 경우 this는 전역객체를 참조한다.

ES5에서는 this값을 넘기기 위해서 bind를 사용할 수도 있다. 이것은 ES6-cheatsheet에서 언급한 예에서 처럼 중첩된 함수 내에서 this의 컨텍스트를 보존하는 용도로 종종 사용된다.

var heeduk = {};
Person.bind(heeduk)('이희덕', 30);

console.log(heeduk.name); // 이희덕
console.log(heeduk.age);  // 30

참고링크

JavaScript

HyunSeob

저만이 쓸 수 있는 글을 쓰도록 노력하겠습니다.

JavaScript this 정리

참고링크

Related posts