20201014 this 용법

1. 일반 함수로 실행

function a() {
  console.log(this);
  return ;
}
a(); // window

함수를 그냥 실행하게 되면 this의 값은 전역 객체(window)를 참조하게 됩니다.

 

 

2. 메서드로 실행

- 메서드는 객체 안에 있는 함수로, 객체명.함수명 형태로 . 이 붙어있는 형태로 함수를 호출하는 경우입니다.

const obj = {
  func() {
    console.log(this);
    return ;
  },
  sub: {
    subFunc() {
      console.log(this);
      return ;
    }
  }
}
obj.func(); // (1) obj
obj.sub.subFunc(); // (2) sub

 

3. apply/ call / bind

 

- apply/call/bind는 명시적으로 this값을 개발자가 원하는 객체로 지정할 수 있도록 도와주는 메서드입니다.

 

 

4. new 연산자 - 생성자 함수

function Person(name,age) {
  this.name = name,
  this.age = age,
  // return 문이 없음을 유의
}
  
function PersonReturn(name, age) {
  this.name = name,
  this.age = age,
  
  return {
    name: "고릴라",
    age: 13
  }
}
  
const 영희 = new Person("영희", 23); // (1)
const 의섭 = new Person("의섭", 26); // (2)
  
const 고릴라 = new PersonReturn("원숭이", 31);
console.log(고릴라.name); // 고릴라

•  this는 함수를 호출할 때 결정되는 것
•  전역 범위에서 사용될 때 this는 전역객체를 가르킴
•  함수에서 사용될때도 전역객체를 가르킴
•  객체에 속한 메서드에서 사용될 때 그 메서드의 객체(점 앞에 명시된 객체)를 가르킴
•  객체에 속한 메서드의 내부함수에서 사용될땐 전역객체를 가르킴
•  생성자에서 사용될 때 생성자로 인해 생성된 새로운 객체를 가르킴

 

출처 : https://amyhyemi.tistory.com/224 

https://velog.io/@uiseop/this%EC%9A%A9%EB%B2%95%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C