자바스크립트 상황별 this

객체
- 상태(state)를 나타내는 프로퍼티 + 동작(behavior)을 나타내는 메서드
- 메서드는 프로퍼티를 참조하고 변경할 수 있어야한다.

 

2022.10.25 - [javascript] - 자바스크립트 객체 생성 방법

 

this

- 생성자 함수 또는 생성된 인스턴스를 참조하는 변수로 함수를 호출하면 함수 내부에 전달된다.

- 객체의 메서드 / 생성자 함수 내부에서만 의미가 있고 나머지는 전역변수로 window를 잡는다.

- strict mode가 적용된 일반 함수 내부의 this에는 undefined로 나온다.

- 화살표 함수는 this가 적용되지 않는다. (부모의 함수를 받아서 사용)

 

bind / call / apply : 일반 함수는 window가 this를 바라보는데 이것들을 쓰면 this를 바꿔준다.
bind는 함수를 따로 호출해야하는데 나머지는 자동으로 호출이된다.

 

* 정리

일반 함수 - 전역객체
메서드 호출/생성자 함수 - 그 해당 객체

객체.함수(); -> this는 객체를 바라본다.

 

console.log(this);
// 일반 함수는 호출될때 this에 변화가 없다면, window를 바라본다.
const kwak = {
   name : "kwak",
   who : function() {
      console.log(this.name);   // kwak
      function other() {
         console.log(this.name);   // window의 name이라 값이 없다.
      }
      other();
   },
   
}
kwak.who();

// 화살표 함수는 부모를 상속받아 바라본다.
const kwak = {
   name : "kwak",
   who : function() {
      console.log(this.name);   // kwak
      const other = () => {
         console.log(this.name);   // kwak
      }
      other();
   },
   
}
kwak.who();

// use strict
function A() {
    console.log(this);   // window
}
A();

function A() {
    'use strict'
   console.log(this);   // undifined
}
A();