javascript - this 요약

wecode 스터디 발표용으로 this 다시 정리

자바스크립트에는 함수(function)와 메소드(method)가 있다. 함수는 독립적으로 기능을 수행하고 메소드는 자신을 호출한 객체에 관한 기능을 수행한다.

함수와 객체(메소드) 구분이 느슨한 자바스크립트에서 this는 이 둘을 구분하는 기능을 한다.

다른 언어에서 this가 클래스에서 생성한 객체를 의미한다면 자바스크립트는 함수를 어떻게 호출하느냐에 따라 바라보는 대상이 달라진다.

크게 함수로 호출할 때, 메소드로 호출했을 때, 생성자와 this, call과 apply 바인딩으로 나눌 수 있다.

함수로 호출

function func(){
  console.log(this)
}

func() // Window {...}

전역 객체(Window)는 특수한 객체고 모든 객체는 이 객체의 프로퍼티다.

this는 현재 실행되는 함수를 프로퍼티로 가진 객체를 가리킨다. 함수 내에서 this는 전역 객체(Window)를 가리킨다. 다시 말해 Window가 a 함수를 프로퍼티로 가지고 있다.

메소드로 호출

const obj = {
  name: 'dongha',
  say: function() {
    return '저는 ' + this.name;
  }
}

console.log(obj.say()) // 저는 dongha

메소드로 호출했을 때 this는 자신이 속한 객체를 가리킨다. 쉽게 말해 obj.say()에서 say() 앞에 있는 객체를 가리키는 것이다.

생성자와 this

function Person() {
    console.log(this); // Person {}
}
new Person(); 

new 연산자를 이용하여 생성자를 호출하면 빈 객체가 만들어지고 그 빈 객체 안에 this가 존재한다. this는 생성자를 통해 만들어진 빈 객체를 가리킨다.

function Person() {
    console.log(this.age); // undefined
    this.age = 29;
    console.log(this.age) // 29
}
new Person(); 

생성자 함수로 새로운 객체를 만들면 this는 빈 객체를 가리킨다. 거기에 age 프로퍼티를 새롭게 할당하면 this.age는 값을 출력한다.

function Person() {
    this.name = 'kim';
    console.log(this); // Person { name: 'kim' }
}
const me = new Person();
console.log(me); // Person { name: 'kim' }

만약 일반 함수로 실행됐다면 this는 전역객체를 가리키고 window 객체에 name이란 프로퍼티와 "kim" 이란 값이 추가되었을 것이다. 함수에 return이 없기 때문에 변수 kim은 undefined가 출력될 것이다.

하지만 생성자 함수는 빈 객체를 생성하고 this는 곧 빈 객체를 가리키기 때문에(빈 객체가 되기) 프로퍼티와 값을 할당하고 kim 변수에 { name: 'kim' } 객체를 할당한다. 결론적으로 console.log엔 객체가 출력된다.

call과 apply 바인딩

call 메소드

Function.prototype.call(thisArg[,arg1[, arg2], ...]]])

call 메소드는 호출 주체인 함수를 즉시 실행하는 명령이다. 첫 번째 인자를 this로 바인딩 이후 인자는 호출 함수의 매개변수다. call 매서드를 이용하면 객체를 this로 지정할 수 있다.

const func = function(a, b, c) {
    console.log(this, a, b, c)
}


func(1, 2, 3) // Window{...} 1 2 3 
func.call({ x: 1 }, 4, 5, 6) // {x:1} 4 5 6

call을 이용해 {x:1}을 this로 지정할 수 있다.

apply 메소드

Function.prototype.apply(thisArg[, argsArray])

apply는 call과 동일한 기능이다. 하지만 두 번째 인자로 배열을 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다.

const func = function(a, b, c) {
    console.log(this, a, b, c) // {x:1} 4 5 6
}

func.apply({ x: 1 }, [4, 5, 6])

참고 :
https://im-developer.tistory.com/96?category=846746

https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/lecture/2563?tab=note&mm=close

코어 자바스크립트