this

This

자바스크립트에서 this는 상당히 어려운 개념인데, 다른 언어와 다른 동작 방식을 가지고 있기 때문이다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있어 이걸 가리킬 줄 알았는데 그게 아니네? 하는 상황이 발생할 수 있다.

this 값은 런타임에 결정된다. 즉, this의 값은 컨텍스트에 따라 달라지기 때문에 동일한 함수라도 다른 객체에서 호출했다면 'this’가 참조하는 값이 달라진다.

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

 

암시적 this 바인딩

this는 컨텍스트, 사용된 맥락에 따라 값이 달라진다. 이는 Scope와 관계가 있으며, 객체에도 큰 영향이 있다. this의 컨텍스트는 다음과 같이 볼 수 있다.

1. 전역공간
2. 함수 호출
3. 함수 안 메서드 호출

전역공간

전역 실행 맥락에서 this는 엄격 모드 여부에 관계 없이 전역 객체, window를 참조한다.

// 웹 브라우저에서는 window 객체가 전역 객체
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

함수 호출

함수 내부에서 this의 값은 함수를 호출한 방법에 의해 좌우되는데, 전역에 선언된 일반 함수와 객체 안에 메소드로 크게 구분할 수 있다.

일반 함수의 경우, 비엄격 모드에서 단순 호출된 this는 전역공간 window을 참조한다. 반면 엄격 모드에서 this 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로 this는 undefined로 남아 있게 된다.

//-------비엄격 모드-------
function f1() {
  return this;
}

// 브라우저
f1() === window; // true

// Node.js
f1() === global; // true


//-------엄격 모드---------
function f2(){
  "use strict"; // 엄격 모드 참고
  return this;
}

f2() === undefined; // true

메서드

함수가 객체의 프로퍼티 값이면 메서드로서 호출된다. 이때 메소드 내부의 this는 해당 메소드를 소유한 객체, 즉 해당 메소드를 호출한 객체에 바인딩된다.

const obj={
   name: 'obj',
   method: function(){
      return this.name
   }
}
obj.method()  //'obj' 호출되는 대상의 객체를 바라봄(name을 가리킴)

const obj2={
   name: 'obj',
   depth: {
      name: 'nested obj'
      method: function(){
         return this.name
      }
   }
}

obj2.depth.method()  //'nested obj'

화살표 함수

화살표 함수는 일반 함수와는 달리 ‘고유한’ this를 가지지 않는다. 화살표 함수에서 this를 참조하면, 화살표 함수가 아닌 ‘평범한’ 외부 함수에서 this 값을 가져온다. 이를 Lexical this (렉시컬 this)라고 한다.

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // 보라

명시적 바인딩

ES2015에서는 함수를 어떻게 호출했는지 상관하지 않고 this값을 설정할 수 있는 bind 메서드가 추가되었다. bind를 사용하면 예상치 못한 this의 동작을 알아보기 쉽게 바꿔줄 수 있다. call, apply, bind 메소드를 사용해 this를 바인딩할 수 있다.

 

var로 선언/const, let 선언 차이

var을 사용하면 this는 window객체를 가리키게 된다. window는 전역객체라 안전하지 않고, 누구나 수정 가능하기 때문에 const를 사용해서 안전하게 관리하는 것이 좋다.

function.call()

명시적으로 조작하고 싶은 this의 대상, 두번째 인자)

const person={
  name:'땡땡',
  sayName: function(){
    return this.name+'입니다';
  },
}

const human={
  name:'왈왈',
  sayName: function(){
    return this.name+'입니다';
  },
}

function sayFullName(firstName){
  return firstName+this.sayName()
}

const result=sayFullName.call(person, '김')
// 김땡땡입니다
const result2=sayFullName.call(human, '박')
// 박왈왈입니다

function.apply()

배열을 인자로 받을 수 있음=> argument도 받을 수 있다

const result=sayFullName.call(person, ['장', 'Jang'])

function.bind()

bind, 의미 그대로 묶어놓는 것으로, this의 값을 고정시킴

const sayFullNamePerson=sayFullName.bind(person)
console.log(sayFullName.bind('김'))   // 김땡땡입니다

const sayFullNameZero=sayFullName.bind(zero)
console.log(sayFullNameZero.bind('제로'))   //제로베이스입니다

---

참고 자료

 

https://hanamon.kr/javascript-this%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

https://ko.javascript.info/object-methods#ref-1268