코어 자바스크립트 (3. this)

문린이·2022년 10월 31일

스터디 자바스크립트

함수와 객체의 구분이 느슨한 자바스크립트에서 this는 실질적으로 이 둘을 구분하는 거의 유일한 기능이다.

3-1 상황에 따라 달라지는 this

this는 함수를 호출할 때 결정된다.

전역공간

전역공간에서 this는 전역 객체를 가리킨다.
-> 자바스크립트의 모든 변수는 특정 객체에 프로퍼티로서 동작하기 때문이다.

메서드 내부에서의 this

함수랑 메서드를 구분하는 유일한 차이는 독립성이다.
-> 자바스크립트는 상황별로 this 키워드에 다른 값을 부여하게 함으로써 이를 구현

함수로서 호출과 메서드로서의 호출을 구분하는 법은 함수 앞에 점이 있는 여부로 구분할 수 있다.

var obj = {
  methodA: function () {
    console.log(this);
  },
  inner: {
    methodB: function () {
      console.log(this);
    },
  },
};

obj.methodA(); /// { methodA: [Function: methodA], inner: { methodB: [FunctionmethodB] }}

obj.inner.methodB(); // { methodB: [Function: methodB] }

함수 내부에서의 this

var obj1 = {
  outer: function () {
    console.log(this); // (1) obj1 
    var innerFunc = function () {
      console.log(this); // (2) 처음: 전역객체, (3) 나중: obj2
    };
    innerFunc();
    var obj2 = {
      innerMethod: innerFunc,
    };
    obj2.innerMethod(); 
  },
};

obj1.outer();

(1)은 앞에 점이 있으므로 메서드로서 호출된 것
-> this에는 마지막 점 앞의 객체인 obj1이 바인딩

(2)은 앞에 점이 없으므로 함수로서 호출된 것
-> this가 지정되지 않았고 자동으로 스코프 체인상의 최상위 객체인 전역객체가 바인딩

(3)은 (1)과 같다.

this를 우회하는 방법

self

var obj = {
  outer: function () {
    var self = this;
    var Func = function () {
      console.log(self); // { outer: [Function: outer] }
    };
    Func();
  },
};

obj.outer();

화살표 함수

var obj = {
  outer: function () {
    var Func = () => {
      console.log(this); // { outer: [Function: outer] }
    };
    Func();
  },
};

obj.outer();

함수 내부에서의 this (콜백 함수 호출)

setTimeout함수, forEach 메서드는 this를 지정하지 않기 때문에 this는 전역객체

addEventListener 메서드는 콜백 함수를 호출할 때 자신의 this를 상속 즉, 메서드명의 점 앞부분이 this

콜백 함수에서의 this는 정의할 수 없다. 콜백 함수의 제어권을 가지는 함수가 콜백 함수의 this를 무엇으로 할지를 결정하며, 특별한 경우가 아니면 기본적으로 함수와 마찬가지로 전역객체를 바라본다.

생성자 함수 내부에서의 this

자바스크립트는 함수에 생성자로서의 역할을 함께 부여

new 명령어와 함께 함수를 호출하면 해당 함수가 생성자(class)로서 동작

어떤 함수가 생성자 함수로서 호출된 경우 내부에서의 this는 곧 새로 만들 구체적인 인스턴스(클래스를 통해 만든 객체) 자신이 된다.

var Cat = function (name, age) {
  (this.bark = "야옹"), 
  (this.name = name), 
  (this.age = age);
  console.log(this); // Cat { bark: '야옹', name: '초코', age: 7 }
};
var choco = new Cat("초코", 7);

console.log(choco); // Cat { bark: '야옹', name: '초코', age: 7 }