TIL 07 - this

hojung choi·2021년 5월 25일

js

목록 보기

8/17

this

함수가 호출되는 시점에 this 값이 결정된다.
이 this의 값은 "함수가 호출되었을때 속해있던 객체의 참조"이다.
여기서 가장 중요한 포인트는 함수가 호출 ! 선언이 아니라🙅🏻‍♀️ 호출🙆🏻‍♀️

var jung = {
  name: "jung",
  sayHello : function(){
    console.log("Hello" + this.name);
  }
}

jung.sayHello(); // Hello jung

함수를 jung.sayHello라는 이름으로 참조해서 실행하고 있다.
jung.sayHollo가 속한 객체는 jung이다. 즉, sayHello 메서드가 호출되는 실행 문맥의 디스 바인딩 컴포넌트가 가리키는 객체는 jung이다 따라서 this값이 jung을 가르키므로 this.name값은 jung이 된다.

기본 바인딩

function foo() {
    console.log(this); 
}

foo(); //// window

전역의 this는 기본적으로 window이다. 단, 엄격모드에서의 this는 undefind이다.

암시적 바인딩

함수 호출 시 객체의 프로퍼티로 접근해 실행하는 암시적 바인딩인다

var name = "a";
function f1() {
    console.log(this.name);
}
f1(); // a

var obj = {
    name: "b",
    say: f1
};
obj.say(); // b

var f3 = obj.say;
f3(); // a

하나씩 살펴보자!

첫번째 호출 f1();,
f1함수가 호출되는 위치에서 this가 바인딩이 된다.
f1이 호출되어 있는 시점은 전역으로 전역변수로 선언된 name값을 가져와 a가 console창에 찍히게 된다.

두번째 호출 obj.say();
obj.say()가 호출되는 위치에서 this가 바인딩 되어진다.
객체 obj의 프로퍼티 say에 f1이라는 함수의 참조를 할당하고 객체를 통해 f1을 호출하면 객체를 바인딩하는 규칙을 갖는다

세번째 호출 f3();
f3에 obj의 프로퍼티 say를 참조하게되면 일반함수로 바뀐다.
즉, 기본바인딩 규칙을 따르게 되며 this는 전역 컨텍스트에 바인딩 된다.

명시적 바인딩

이름에서부터 알 수 있듯이 좀 더 직관적으로 코드에 의도를 나타내는 바인딩이다.
자바스크립트의 call, apply, bind 내장 함수를 사용해 명시적으로 바인딩 할 컨텍스트를 정해줄 수 있다.

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

const obj = {
  name:'choi'
};

foo.call(obj); // 'choi'

new연산자 바인딩

자바스크립트 함수 앞에 new를 붙여 실행하면

새로운 객체를 반환
새로운 객체는 객체의 메소드 호출시 this로 바인딩 된다

function User(name) {
  this.name = name;
  this.hello = function(){
    console.log(this.name);
  }
}

const user1 = new User('choi');

user1.hello() //'choi'

예외사항

es6문법인 화살표 함수와 setTimeout 콜백 함수의 예외 사항을 알아보자!

setTimeout

setTimeout의 콜백함수는 setTimeout이 호출하기 때문에 setTimeout에 의존적이다.
따라서 콜백함수의 this는 전역 객체로 바인딩 된다.
** 여기서 콜백함수의 자세한 부분은 나중에 알아보도록 하고 일단은 함수 매개변수 안에 들어가있는 함수라고 생각하자!

function hello() {
  setTimeout(function callback(){ console.log(this.name) })
}

const obj = {
  name: 'Kim',
  hello: hello
};

const name = 'Lee'

hello(); // 'Lee'
obj.hello(); // 'Lee'
hello.call({name: 'chris'}); // 'Lee'

화살표 함수

위에서 설명한 규칙들은 함수가 호출되는 시점에서 바인딩 규칙이 적용되는 동적 바인딩이다!
반면 화살표 함수는 기존의 컨텍스트 바인딩 규칙을 따르지 않는다. 따라서 정적 바인딩이라고 한다.
코드상 상위 블록의 컨택스트를 this로 바인딩 한다.
** 컨텍스트의 개념이 헷갈리면 210524의 TIL을 복습하고 오자!

function hello() {
  setTimeout(() => { 
    console.log(this.name) 
  })
}

const obj = {
  name: 'Kim',
  hello: hello
};

const name = 'Lee'

hello(); // 'Lee'
obj.hello(); // 'Kim'
hello.call({name: 'Choi'}); // 'Choi'