call, apply, bind

- JavaScript의 함수는 각자 자신만의 this를 정의한다.

• 일반 함수 호출(전역 함수, 중첩 함수, 일반 함수로 호출되는 메서드 내에서 정의한 중첩 함수 내부, 콜백 함수) : 기본적으로 this에는 전역 객체가 바인딩 된다.

var name = "kim" // const, let으로 선언한 전역 변수는 window 전역 객체에 추가되지 않는다.

function fn() {
  var name = "lee"
  console.log(this.name); // "kim"
  // 전역 객체 (브라우저에서는 window, Node.js에서는 global)
}
fn();

• 메서드 호출 : 메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체가 바인딩 된다.

const person = {
    name: 'Alice',
    sayHello: function() {
        return `Hello, my name is ${this.name}`;
    }
};

const anotherPerson = {
    name: 'Bob'
};

// person 객체의 sayHello 메서드를 호출
console.log(person.sayHello());  // "Hello, my name is Alice"

// sayHello 메서드를 anotherPerson에 할당
anotherPerson.sayHello = person.sayHello;

// anotherPerson을 사용하여 sayHello 메서드를 호출
console.log(anotherPerson.sayHello());  // "Hello, my name is Bob"

• 생성자 함수 호출 : 생성자 함수 내부의 this에는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩된다.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
    };
}

// 새로운 Person 인스턴스 생성
let alice = new Person('Alice', 30);

// alice 인스턴스의 sayHello 메서드 호출
console.log(alice.sayHello());  // "Hello, my name is Alice and I am 30 years old."

// 다른 Person 인스턴스 생성
let bob = new Person('Bob', 25);

// bob 인스턴스의 sayHello 메서드 호출
console.log(bob.sayHello());  // "Hello, my name is Bob and I am 25 years old."

• 화살표 함수 호출 : 화살표 함수 내부에서의 this는 해당 화살표 함수가 선언된 컨텍스트(주로 상위 함수)의 this를 그대로 가리킨다. 또한 화살표 함수는 call, apply, bind 메서드를 사용하여 this를 변경할 수 없다.

let group = {
    title: "Programming Group",
    students: ["Alice", "Bob", "Charlie"],

    showList() {
        const title = "English Group";
        this.students.forEach(
            (student) => console.log(this.title + ': ' + student)
        );
    }
};

group.showList();

// Programming Group: Alice
// Programming Group: Bob
// Programming Group: Charlie

// 화살표 함수 내부의 this는 상위 함수의 this를 상속받는다.
// forEach의 콜백 함수(화살표 함수)의 상위 함수는 showList 매서드이며
// showList의 this는 group이다.
// 따라서, forEach의 콜백 함수 내부의 this.title은 group.title이다.

 

- JavaScript의 call,bind, apply와 같은 함수의 기본 메서드는 함수의 this 컨텍스트를 설정할 수 있다.

 

※ call과 apply

const countryObj = { country : "Korea" }

function getCountryAndCityInfo(city) {
  console.log(`Country : ${this.country}, City : ${city}`);
}

getCountryAndCityInfo("seoul"); // Country : undefined, City : seoul
getCountryAndCityInfo.call(countryObj, "seoul") // Country : Korea, City : seoul
getCountryAndCityInfo.apply(countryObj, ["seoul"]) // Country : Korea, City : seoul

- call과 apply는 함수를 호출하는 매서드로써, 첫 번째 인자에 this 값을 전달하고 두 번째 인자부터는 함수에 전달할 파라미터를 입력하는 방식이다.

- call과 다르게 apply는 두 번째 인자부터 모두 배열에 넣어야 한다.

 

※ bind

const obj = { country : "Korea" }

function getCountryAndCityInfo(city) {
  console.log(`Country : ${this.country}, City : ${city}`);
}

const koreaCityInfo = getCountryAndCityInfo.bind(obj);

koreaCityInfo("seoul"); // Country : undefined, City : seoul
koreaCityInfo("busan"); // Country : undefined, City : busan

- bind는 call과 apply와 달리 함수를 실행하지 않고, 매개변수로 전달한 객체가 this로 바인딩된 새로운 함수를 반환한다.

---

학습 단계로 잘못된 정보가 있을 수 있습니다. 잘못된 부분에 대해 알려주시면 정정하도록 하겠습니다.

참고 : https://wooooooak.github.io/javascript/2018/12/08/call,apply,bind/