call, apply, bind 메소드

• call, apply 메소드
• prototype과 class를 이용해서 객체 지향 이해하기

Function.prototype.call( )

현재 어떤 대상에 메서드를 사용하고 싶지만,
해당 값에는 메소드를 사용할 수 없을 때
--> 유사배열에 배열 메서드를 쓰고 싶을 때 형변환을 통해 쓰기보다
call을 사용해서 다른 메서드를 빌려와야 할 때, call을 사용한다.

call( ) 메소드는 주어진 this 값, 전달된 인수와 함께 함수를 호출한다.
call( )은 인수 목록을 받는다.

---

아래의 코드를 작성해서 call( )에 대해 공부해 볼 것이다.

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}

function Child(name, gender, age, favorite) {
  // 생성자 연결에 call( )을 사용
  // Person 객체의 생성자는 name, gender를 매개변수로 정의한다.
  // Child는 this, name, gender를 전달하는 Person을 호출하고 있다.
  // Person은 name과 gender 속성을 초기화하고, Child 함수에서는 age, favoriteChoco를 정의한다.
  Person.call(this, name, gender);
  this.age = age;
  this.favoriteChoco = 'mint chocolate';
}

let child1 = new Child('benny', 'female', 7);
console.log(`이름: ${child1.name}, 나이: ${child1.gender}, 가장 맛있는 초콜릿: ${child1.favoriteChoco}`);

call( ) 메소드에서 this는 null, undefined는 전역 객체로 대체되고,
원시값은 객체로 변환된다.

---

call( )는 이미 할당되어 있는 다르 객체의 함수/메서드를 호출하는 해당 객체를 재할당할 때 사용한다.
여기서의 this는 현재 객체(호출하는 객체)를 참조한다.

call( )를 사용하면 한 번 작성해 놓은 메소드를 새 객체를 생성해서 사용할 때, 메소드를 새로 만들 필요없이 call( )을 사용해서 다른 객체에 상속이 가능하다.

Function.prototype.apply( )

기본적으로 call과 유사하지만, call처럼 메소드를 빌려오는 것 보다는
배열 요소를 편하게 넣기 위해서 많이 사용한다.

spread 배열 펼쳐줄 때, (파마미터의 값을 받아올 때 rest parameter)

Math.max(1, 20, 30, 4);
let arr = [1, 20, 30, 4]; // 쉽지 않음

Math.max(null, arr);
// 배열이 들어가면 안 되는 함수에 배열을 묶어 넣어줄 때 사용

Math.max(...arr) // spreadSyntax 전개구문을 사용하면 편리하다

---

apply( ) 메소드는 주어진 this 값, 배열(또는 유사 배열 객체)로 제공되는 arguments로 함수를 호출한다.

apply( )는 인수들의 단일 배열을 전달 받는다.

아래의 코드를 작성해서 apply( ) 에 공부해 볼 것이다.

const numArr = [34, 2, 65, 38, 97, 5, 8, 1];
const maxNum = Math.max.apply(null, numArr);

console.log(maxNum); // 97

const minNum = Math.min.apply(null, numArr);
console.log(minNum); // 1

---

apply( )를 사용하면 이미 존재하는 함수를 호출할 때 다른 this의 객체를 할당할 수 있다.
여기서 this는 현재 객체, 호출하는 객체를 참조한다.
apply( )를 사용하면 새로운 객체마다 메소드를 재작성할 필요가 없고,
한 번만 작성해서 다른 객체에 상속시킬 수 있다.

Function.prototype.bind( )

bind( ) 메소드는 함수에 사용 가능한 메소드이다.
this를 바꿔서 새로운 함수를 만들어 준다. 고정하고 싶을 때 사용한다.

bind( ) 메소드가 호출되면 새로운 함수를 생성한다.
첫 번째 인자로 받는 값은 value는 this 키워드를 주고, 이어지는 인자들은 바인드된 함수의 인수에 제공된다.

아래의 코드를 작성해서 bind( ) 에 공부해 볼 것이다.

function add(num1, num2) {
  return this + num1 + num2; 
}

let add7 = add.bind(20, 30, 40);

console.log(add);
console.log(add7);
console.log(add7(25, 14));