[JS] this 바인딩이란?

this를 사용하면서 그냥 쓰는 거 아니야라는 생각을 가졌는데, 궁금해서 찾아보다 보니 종류와 차이점을 기록하면 좋을 것이라고 생각하여 글을 작성하게 되었습니다. 

 

혹시라도 부정확한 정보를 전달드릴 수 있습니다. 다만 틀린 부분이 있으면 댓글을 남겨주세요. 

---

자바스크립에서 this는 함수가 어떻게 호출되었는지에 따라 달라집니다. 

이를 this 바인딩이라고 합니다.

오늘은 this 바인딩의 종류와 차이점을 작성하도록 하겠습니다.

 

1. 기본 바인딩(Default)

- 일반 함수 호출 시, strict mode가 아니면 전역객체를 가리킵니다.

var v = 3; // let, const로 선언한 전역 변수는 window객체의 프로퍼티가 될 수 X
// 일반 모드
function normal(){
	console.log(this.v);
}

normal(); // 출력 - 3

//strict 모드
'use strict';
function strict(){
	console.log(this) // undefined
	// console.log(this.v); // 에러 발생
}

strinct(); // 출력 - undefined 에러

// 중첩함수
const obj = {
	method: function() {
    	function inner() {
        	console.log(this.v)
        }
        inner();
    }
};
obj.method() // 출력 - 3

 

2. 암시적 바인딩

- 객체의 메서드로 호출될 때, 해당 객체를 가리킵니다.

// 기본 객체
const user = {
  name: '철수',
  age: 25,
  greet: function() {
    console.log(`안녕하세요, 저는 ${this.name}이고 ${this.age}살입니다.`);
  }
};
user.greet(); // 출력 - 안녕하세요, 저는 철수이고 25살입니다.

// 중첩 객체
const company = {
  name: '테크컴퍼니',
  team: {
    name: '개발팀',
    showTeam: function() {
      console.log(this.name); // 가장 가까운 객체
    }
  }
};
company.team.showTeam(); // 출력 - 개발팀

// this를 잃어버리는 경우
const person = {
  name: '영희',
  sayName: function() {
    console.log(this.name);
  }
};

person.sayName(); // 출력 - 영희

const sayNameFunc = person.sayName; // 함수만 분리
sayNameFunc(); // 출력 - undefined 에러 - 함수만 분리하여 객체의 this가 없음

 

3. 명시적 바인딩

- call(), apply(), bind() 함수를 사용하여 명시적으로 this를 지정합니다.

// call
function name(){
	console.log(this.name);
}

const person1 = {name:'철수'};
const person2 = {name:'영희'};

name.call(person1); // 출력 - 철수
name.call(person2); // 출력 - 영희

// apply
function sum(){
	let total = 0;
    for(let i=0; i<arguments.length;i++){ 
    // arguments는 모든 일반 함수 내부에 자동으로 존재하는 특별한 객체입니다.
		total +=arguments[i];
    }
    console.log(`합계:${total}`);
}

sum.apply(null,[1,2,3,4,5]) // 출력 - 합계:15

// bind
const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

console.log(module.getX()); // 출력 - 42

const unboundGetX = module.getX;
console.log(unboundGetX()); // undefined - this 손실

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // 출력 - 42 - this가 module로 고정됨

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2); // 첫 번째 인자를 2로 고정
console.log(double(5)); // 출력 - 10
console.log(double(10)); // 출력 - 20

에러가 발생하는 bind는 제거 한 후 출력하였습니다.

 

4. new 바인딩

function Person(name) {
  this.name = name;
}
const person1 = new Person('민수');
console.log(person1.name); // 출력 - 민수

 

 

위처럼 4가지의 this 바인딩의 예시를 볼 수 있습니다.

추가적으로 제가 조금 더 알고 싶었던 부분은 일반함수 vs 화살표 함수의 this 차이입니다.

---

일반 함수 vs 화살표 함수의 this 차이

const obj = {
  name: "객체",
  regularFunc: function () {
    console.log(this.name); // 출력 - 객체

    setTimeout(function () { // 메서드 내의 setTimeout 함수는 객체와는 별개의 독립적인 함수
      console.log(this.name); // undefined -여기서 this는 전역(window)을 의미함
    }, 100);

    setTimeout(() => {
      console.log(this.name); // 출력 - 객체
    }, 100);

    setTimeout(
      function () {
        console.log(this.name); // 출력 - 객체
      }.bind(this),
      100
    );
  },
};
obj.regularFunc();

 

 

1. 일반 함수

- 동적 바인딩: 호출 방식에 따라 this가 결정됩니다.

- 자신만의 this를 가지고 있습니다.

- 메서드 내의 setTimeout 함수는 객체와는 독립적인 함수로서 this 사용 시 전역(window)을 의미합니다.

 

2. 화살표 함수

- 렉시컬 바인딩: 선언된 위치의 상위 스코프의 this를 사용합니다.

- 자신만의 this를 가지지 않습니다.

 

 

Ref.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

Function.prototype.apply() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Function.prototype.bind() - JavaScript | MDN

https://dev-note-97.tistory.com/307

[Javascript] this 바인딩 규칙