자바스크립트 this 5가지 패턴

자바스크립트 this 는 정말 헷갈리는 것 중 하나다. 

그래도 5가지 패턴을 잘 기억하고 있으면, 공부에 도움이 많이 된다.

 

console.log(this);

var fun = function() {
  console.log(this);
}
------------------------
1. 전역
Global Reference  : console.log(this);
=> window, global

2. 함수 호출
Free Function Invocation : fun();
=> window, global

3. call, apply 호출
call or apply Invocation : fun.call(obj); fun.apply(obj)
=> first arg 

4. 생성자
Construction Mode  : new fun();
=>a new object created for that Invocation

5. 메서드 호출
Method Invocation : obj.mtd();
=> object on the left of the CALL TIME dot


참고: 코드스테이츠 this 과정 중

 

예제

1. 전역

크롬 웹콘솔에서 실행을 시켜보았다.

* node 전역 환경에서 console.log(this) 하면 { } 빈객체를 반환한다.

여기서 this는 global 객체를 가리키지 않고, module.exports or exports 를 가리킨다.

module.exports 과 exports 는 사용방법은 조금 다르지만 같은 참조 관계라고 보면된다.

https://www.zerocho.com/category/NodeJS/post/5b67e8607bbbd3001b43fd7b

node 에서 확인해보기

console.log(this); // {}
console.log(this === global); // false
console.log(this === exports); // true
console.log(this === module.exports); // true

 

 

 

2. 함수 호출

함수 호출 시 화살표 함수는 다르게 작동하므로 위에 제로초님 블로그를 참고하자!

 

크롬 웹콘솔

vscode node12

 

const fn1 = function() {
  console.log(this === global); // ture
  console.log(this === module.exports); // false
};

const fn2 = () => {
  console.log(this === global); // false
  console.log(this === module.exports); // true
};

fn1();
fn2();

화살표 함수 안의 this는 상위 객체를 가리키는데, node 에서는 global 이 아니고, module.exports(or exports) 이다.

화살표 함수에서의 this 는 그냥 전역(함수 밖)에서 this 를 입력하는 것과 같다고 생각하면 될 것 같다.

https://www.zerocho.com/category/NodeJS/post/5835b500373b5b0018a81a10

 

 

3. call, apply 메서드 호출

const objA = {
  foo(y) {
    return this.x + y;
  }
};

const objB = {
  x: 10
};

const r1 = objA.foo.call(objB, 5);   // objB 가 this
const r2 = objA.foo.apply(objB, [100]);
console.log(r1); // 15
console.log(r2); // 110

apply 인 경우 [] 배열 안에 값을 넣어주어야 한다.

 

 

4. 생성자 객체 생성

class Students {
  constructor(name, score) {
    this.name = name;
    this.score = score;
  }

  info() {
    console.log(`info: ${this.name}, ${this.score}`);
  }
}

const stu001 = new Students('sherlock', 100);
const stu002 = new Students('lily', 80);
stu001.info(); // info: sherlock, 100
stu002.info(); // info: lily, 80

 

 

인스턴스 객체 stu001, stu002 가 this 

 

5. 메서드 호출

메서드 (method) 는 객체 안의 함수. 

const objC = {
  name: 'sherlock',
  hello() {
    console.log(`my name is ${this.name}`);
  }
};

objC.hello(); // my name is sherlock

this 는 objC.