JS this

글 작성 동기?

this의 작동방식이 java와 다르다는 것은 알고 있었지만, 쓰다보면 익숙해질거라 생각하고 그냥 넘어갔지만, 한번 확실히 정리해두는게 좋겠다 싶어서 공부하여 글을 작성했습니다.

 

 

핵심

this바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

즉 this를 어떻게 어디에 쓰느냐에 따라 다름!!

 

 

 

 

1.그냥 this

전역this

그냥 this를 사용할경우 전역객체인 window가 출력됩니다.

 

 

2.함수 안의 this

var val = 10;
var fun = function () {
  let val = 5;
  console.log(this.val);
};

fun();

해당 값은 결과가 10이 나옵니다. 즉 그냥 함수안에 쓰이면 전역객체에 연결됩니다.

("use strict" 사용하면 undefined)

 

 

3.메서드 안의 this

var value = 10;
const obj = {
  value: 100,
  fun: function () {
    console.log(this.value);
  },
};
obj.fun();

해당 결과 값은 100이 나옵니다. 메서드 안에서 this가 쓰이면 해당 메서드를 호출한 객체에 연결됩니다.

 

 

4.생성자 함수

var num = 10;
function Num(num) {
  this.num = num;
}
let a = new Num(5);
console.log(a.num); //5

생성자 함수에서는 생성자 함수가 생성하는 인스턴스에 연결됩니다.

 

 

5. bind함수 사용(es5)(출처 piemaweb)

function Person(name) {
  this.name = name;
  this.doSomething = function (callback) {
    callback();
  };
}

function foo() {
  console.log("#", this.name);
}

var p = new Person("Lee");
p.doSomething(foo); // undefined

이렇게 쓸경우 foo안의 this는 전역객체를 가리키기 때문에, undefined가 결과로 나옵니다.

 

그러나

function Person(name) {
  this.name = name;
  this.doSomething = function (callback) {
    callback.bind(this)();
  };
}

function foo() {
  console.log("#", this.name);
}

var p = new Person("Lee");
p.doSomething(foo); // LEE

bind를 이용해 인스턴스에 연결시켜주면 정상적으로 LEE가 나오게 됩니다.