This

 

자바스크립트에는 this라는 키워드가 존재한다.

또한 이 this 키워드가 다른 언어와는 다르게 동작을 해서 잘 알아두어야 한다.

node.js와 브라우저의 js는 서로 다른 의미의 this를 가지며, 여기선 브라우저의 this를 알아볼 것이다.

 

가장 포괄적인 설명은 this는 호출한 객체를 의미한다는 것이다.

 

1. 전역 객체

브라우저에서 window객체는 브라우저에서 시행되는 가장 큰 객체로 존재한다.

따라서 달리 참고할 대상이 없는 this는 모두 window를 의미한다.

 

// 전역에서 사용되는 this는 전역(global)과 같다.

var a = 27;
console.log(this.a);
// OUTPUT: 27

function sum() {
  console.log(this.a + this.b + this.c);
}
var a = 1;
var b = 2;
var c = 3;
sum();
// OUTPUT: 6

 

2. 객체 안에서 호출된 this

객체 안에서 호출된 this는 해당 객체를 나타낸다.

 

// 전역에서 선언한 함수도 객체 안에서 호출된다면 그 객체를 this로 가진다.
function sum() {
  console.log(this.a + this.b + this.c);
}

const obj = { a: 2, b: 3, c: 4, sum };
obj.sum();
// OUPUT: 9

 

// 객체가 this임.
var obj1 = {
  name: "LGH",
  func1: function () {
    console.log(this);
  },
  func2: function () {
    console.log(this.name);
  },
};

obj1.func1();
// OUTPUT: {name: 'LGH', func1: f, func2: f}
obj1.func2();
// OUTPUT: LGH

 

obj1 안의 함수가 호출하는 this는 함수를 호출한 객체인 obj1을 나타낸다.

 

따라서 객체 안에 객체 안에서 호출된 this는 자신과 가장 가까운 객체를 나타낸다.

 

// 객체안 객체?
var objOut = {
  age: 27,
  sayOut: function () {
    console.log(this);
  },
  objIn: {
    weight: 60,
    sayIn: function () {
      console.log(this);
    },
  },
};

// objOut에서 호출된 sayOut의 this는 objOut이다.
objOut.sayOut();

// objIn에서 호출된 sayIn의 this는 objIn이다.
objOut.objIn.sayIn();

 

3.  Arrow function

 

화살표 함수는 this가 없다.

따라서 this가 작동하는 방식이 특이한데, 그것은 상위의 this를 찾아서 사용하는 것이다.

 

var arrowObj = {
  age: 27,
  arrowFunc: () => console.log(this),
};

arrowObj.arrowFunc();
// OUTPUT: Window(전역 객체)

 

위의 상황에선 화살표 함수가 참조할 상위 this가 없어서 객체안에서 호출되었지만 그냥 window를 받는다.

 

var arrowObj2 = {
  age: 27,
  func: function () {
    console.log(this);
    let arrowFunc = () => console.log(this);
    arrowFunc();
  },
};

arrowObj2.func();
// OUTPUT: {age: 27, func: f}

 

위 상황에서는 객체 안의 func가 있고 그 안에 화살표 함수가 this를 사용한다.

이때에는 화살표 함수가 func의 this를 참조할 수 있고 이 때 func의 this는 arrowObj2이므로 화살표 함수의 this가 arrowObj2가 된다.

 

 

this를 잘 쓰면 함수가 간결해지고 객체와 연관성이 깊어지므로 잘 활용할 수 있어야 한다.