[JavaScript] this 참조 바꾸기 - bind, call, apply

 

독감으로 골골대다가 회복후에 적는 밀린 블로그..

앞으로는 꾸준히 적어야겠다. 에효효 폭풍 업로드 예정

---

https://s2ej1n.tistory.com/58

[JavaScript] 자바스크립트 this 키워드 (메소드, 함수, 생성자함수, 화살표함수, Lexical this)

 

저번시간 this 강의에서 보통 함수 안에서 this를 사용하면 Window객체를 참조하게 된다.

⇒ 이거를 바꿀 수 있는 방법은 없나?

 

있다!

아래의 방법들이 그러한 방법이다!

 

1. call() 메소드 사용하기

call 메서드는 함수를 호출하는 함수

첫 번째 매개 변수로 어떠한 것을 전달해주면 → 호출되는 함수의 this 안에 window 객체가 아닌 전달받은 것을 받게 된다.

const fullName = function() {
    console.log(this.firstName + '' + this.lastName);
}

fullName();
// 여기서 호출을 하면 당연히 undifind가 뜨겠죠

 

⇒ 왜냐면 저기 this는 window 객체를 참조하는데,

window 객체에 firstName, lastName 이라는 속성이 없기 때문이다.

// Call();
const fullName = function() {
    console.log(this.firstName + '' + this.lastName);
}

const person1 = {
    firstName: 'John',
    lastName: 'Smith'
}

fullName.call(person1);

⇒ 이렇게 함수.call(객체) 를 넣어주면, 함수 안의 this가 person1의 객체를 가리키게된다.

 

또한 인수로 넣은것을 매개변수로 가져올 수도 있음.

 

즉, call은 윈도우 객체가 아닌 다른 객체를 가리키게 해주고, 인수로 어떠한 것들을 넣어서 사용할 수 있다.

---

2. Apply() 메소드 사용하기

const fullName = function(city, country) {
    console.log(this.firstName + ' ' + this.lastName, city, country);
}

const person1 = {
    firstName: 'John',
    lastName: 'Smith'
}

fullName.apply(person1, ["Oslo", "Norway"])
// 다른건 인수를 넣어줄 때 배열로 넣어주면 된다.

 

⇒ call()과 다른 점은 인수를 배열로 넣는다는 것.

---

3. bind() 메소드 사용하기

function func(language) {
    if (language === "kor") {
        console.log(`language: ${this.korGreetung}`);
    } else {
        console.log(`language: ${this.engGreetung}`);
    }
}

const greeting = {
    korGreetung: '안녕',
    engGreetung: 'Hello',
}

const boundFunc = func.bind(greeting);
// this에대 이 객체를 바인딩만 시켜주는것
// 변수에다 함수 할당하고, 재 호출해줘야함
boundFunc("kor");

 

const boundFunc = func.bind(greeting)(’eng’);

또는 이렇게 바인딩만 하고 바로 호출해도 된다.