this 키워드

일반적으로 this는 객체의 프로퍼티인 함수에서 의미가 있다.

this 값은 런타임에 결정된다. 즉 컨텍스트에 따라 달라진다.

 

기본적으로 this를 개발자 도구에서 실행하면 window 전역 객체를 참고하는 것을 볼 수 있다.

this === window는 true이다.

함수에서 사용되는 this는 함수 호출한 방법에 따라 변경된다.

const person = {
    name: 'june', 
    say(){
       return `name is ${this.name}`
    }
}

person.say();
//"name is june"

this가 person의 프로퍼티여서가 아닌, person에서 say를 호출했기 때문에, this는 person를 나타낸다.

 

call()

call() 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출한다고 한다. (???????)

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

Function.prototype.call() - JavaScript | MDN

 

구문

func.call(thisArg[, arg1[, arg2[, ...]]])

예제

 

let person1 = {
  name: 'park'
};

let person2 = {
  name: 'lee',
  sayHello(){
     console.log(`${this.name} is saying hello 😀`)
  }	
};

person2.sayHello.call(person1);
//park is saying hello 😀

person2의 sayHello의 this가 person1에 name으로 묶여서 출력되는 걸 볼 수 있다.

 

 

apply()

이미 존재하는 함수를 호출할 때 다른 this를 객체에 할당할 수 있다. (???????)

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

Function.prototype.apply() - JavaScript | MDN

구문

func.apply(thisArg, [argsArray])

예제

 

let person1 = {
  name: 'park'
};

let person2 = {
  name: 'lee',
  sayHello(){
     console.log(`${this.name} is saying hello 😀`)
  }	
};

person2.sayHello.apply(person1);
//park is saying hello 😀

첫번째 매개변수로 객체를 제공하면 this가 그 객체로 묶이는건 call()과 동일하나, apply의 매개변수는 배열의 형태로 와야 한다.

let person1 = {
  name: 'park'
};

let person2 = {
  name: 'lee',
  sayHello(firstSentence, secondSentence){
     console.log(`${firstSentence} ${this.name} is saying hello 😀 ${secondSentence}`)
  }	
};

person2.sayHello.apply(person1, ['nice to meet you', 'good bye 👐']);
//nice to meet you park is saying hello 😀 good bye 👐

그러하다!

 

bind()

함수처럼 호출가능한 특수 객체를 반환하며, 이 객체를 호출하면 this가 고정된 함수가 반환. (???????)

 

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

Function.prototype.bind() - JavaScript | MDN

구문

func.bind(thisArg[, arg1[, arg2[, ...]]])

예제

let person1 = {
  name: 'park'
};

let person2 = {
  name: 'lee',
  sayHello(){
     console.log(`${this.name} is saying hello 😀`)
  }	
};

let person3 = person2.sayHello.bind(person1);
person3(); 
// park is saying hello 😀

 

 

이번거 정말 어려운거 같다. 

머리아퍼!!

하지만 머리나쁜 내 잘못이지 뭐 😇

 

참고

https://ko.javascript.info/bind

함수 바인딩

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

this - JavaScript | MDN