JavaScript 함수호출 Call / Bind 메서드

처음 자바스크립트를 배울 땐 쓰라는대로 함수를 쓰고 this 도 그냥썼지만, 

몇개의 프로젝트를 경험하고 나서 다시 공부해보는 JS는 정말 신기하고 재밌는 도구이구나 .!

자바스크립트의 함수

JS의 함수 : 자신만의 this를 정의하는것

 

예시로 sayHello 라는 함수를 만들고 this를 실행시키면 Window 객체가 나온다.

즉 JS에서 기본적인 this = windowr객체  라는것 

나는 sayHello에서 window를 쓰고싶지 않다. this를 그때그때 알맞은 객체로 바꿔야 하는데 이것이 바로 

this의 binding!

this를  알맞게 바꿔주는 함수가 있는데 그것이 바로 call apply, bind이다 .

 

---

 

자바스크립트에서는 함수를 많이 다루고 this를 다뤄야 할 경우가 많음!!

자바스크립트에서는 메서드를 통해 함수를 호출 할 수 있다.

일반적으로 함수를 호출하면 호출형태에 따라 this 가 달라지지만,

call, apply, bind 메서드에서는 함수의 this를 지정하여 호출한다.

 

 

일반적인 함수 호출 방법

sum(이 부분) 

sum 함수 호출 시 (  ) 안에 인자를 전달해 호출한다.

function sum(){
    return a+b
}


sum(2,3)

 

 

call

함수를 바로 실행

실행할 때마다 객체의 this값을 바꾸는 (context바꾸는) 메서드

 

모든 함수는 call이라는 메서드를 가지고 있음  (함수도 객체이기 때문에 )

 

A. call ( "this 로 지정할 것", "파라미터인자값")

sum.call( this 대체 값 , 인자)
sum.call('kim')

 

 

예제 1)

var kim = {name: 'kim', first:10, second:20}
var lee = {name: 'lee', first:10, second:10}


function sum(){
    return this.first + this.second;
}


//sum 이라는 객체를 실행시키는 
// sum.call( )


sum.call(kim); //this=kim  30

sum이라는 function은 kim이라는 객체의 멤버가 아니었지만 

함수를 호출할 때 첫번째 인자로 sum이 내부적으로 사용할 this의 값을 kim으로 지정하니 

sum이라는 함수는 Kim의 멤버인 메서드가 됨 

 

 

예제 2)

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name);
//"cheese"

 

Food 에서 

Product의 this 는 Food 의 this 야! 라고 선언

---

 

bind

함수의 내부적으로 사용할 this를 영구적으로 고정할 새로운 함수 생성

 

A.bind("내부적으로 사용할 this", "인자값")

sum. bind (	sum의 this 로 영구히 지정할 것	sum의 파라미터 인자값  )
sum.bind(	kim	)

 

var kim = {name: 'kim', first:10, second:20}
var lee = {name: 'lee', first:10, second:10}

function sum(prefix){
    return prefix +(this.first + this.second);
}



var kimSum = sum.bind(kim,"->");
console.log(kimSum()); // -> 30

sum이 바뀐것 X

새로운 함수 (kimSum) 로 바뀌어 생성된것이기 때문에 sum (원래 함수)에 영향을 주지 않음 

 

 

 

🧐 생각해볼 것 

	call	bind
공통점	this를 지정하여 함수를 호출
차이점	함수 호출	함수 생성
	실행할 때마다 객체의 this 값을 바꾸는 메서드	영구적으로  this 값을 고정시킨 새로운  함수를 생성하는 메서드

 

 

javascript에서 함수란 어떤 존재인가 

함수를 호출할 때 new를 붙이면 객체를 생성하는 생성자가 됨

특정한 객체나 class 에 종속되지 않고 필요에 따라 어떤 객체의 메서드도 될 수도 있는 것 

 

---

상속 extends 

ES5 : Object.create

ES6 : extends

 

 

 

객체에서 call 로 상속(extend) 만들어 보기 

 

function Car(brand) {		
this.carname = brand;		
}		
		
Car.prototype.present = function() {		
return 'I have a ' + this.carname;		
}		
		
//Model생성자와 prototype에 show 메서드 추가.
function Model(brand, mod) {
    Car.call(this,brand);		
    this.model = mod;		
}		

//extends 역할 
Model.prototype = Object.create(Car.prototype);
	
	
Model.prototype.show = function() {		
//debugger;
return this.present() + ', it is a ' + this.model;		
}		
		
	
		
//호출!!
const mycar = new Model("Ford", "Mustang");		
mycar.show();	// "I have a Ford, it is a Mustang"

 

function Model(brand, mod) {
    Car.call(this,brand);		
    this.model = mod;		
}		
	

this

Car의 객체를  내 것(Model )걸로 가져오는 것 

Model.prototype = Object.create(Car.prototype);

 

 

const mycar = new Model("Ford", "Mustang");	

Model 은 function이지만 new Model 로 부르면 생성자가 됨 

따라서 Model 은 생성자 

 

그런게 mycar을 보면 Car 의 constructor임 

Object.create를 햇기 때문

 

 

참고한 자료 

medium.com/@lyslg1018/javascript-call-apply-bind-f6768af01a52

[javascript]call, apply, bind

www.youtube.com/watch?v=wOiteGyan-I