js에서 apply()와call() 그리고bind의 차이

1. 콜, apply의 역할과 응용 함수는 두 가지 계승되지 않은 방법을 포함한다. 그것이 바로 apply()와call()이다.이 두 가지 방법의 용도는 모두 특정한 작용역에서 함수를 호출하는 것이고 실제로는 함수 체내의this 대상의 값을 설정하는 것과 같다.우선,apply() 방법은 두 개의 매개 변수를 수신한다. 하나는 그 중에서 함수를 실행하는 작용역이고, 다른 하나는 매개 변수 그룹이다.여기서 두 번째 매개변수는 Array의 인스턴스일 수도 있고 arguments 객체일 수도 있습니다.예를 들면 다음과 같습니다.

function sum(num1, num2){
    return num1 + num2;
}
 
function callSum1(num1, num2){
    return sum.apply(this, arguments);        //  arguments 
}
 
function callSum2(num1, num2){
    return sum.apply(this, [num1, num2]);    //  
}
 
alert(callSum1(10,10));   //20
alert(callSum2(10,10));   //20

위의 예에서callSum1()은sum() 함수를 실행할 때this를this값으로 전송한다(전역 역할 영역에서 호출되기 때문에 전송된 것은 window 대상이다)와arguments 대상이다.callSum2 역시sum() 함수를 호출하지만,this와 하나의 매개 변수 그룹을 전달합니다.이 두 함수는 모두 정상적으로 실행되고 정확한 결과를 되돌려줄 것이다.
주의: 엄격한 모드에서 환경 대상을 지정하지 않고 함수를 호출하면this값이 window로 바뀌지 않습니다.함수를 대상에 명확하게 추가하거나 apply () 또는call () 를 호출하지 않으면this값은undefined가 됩니다.
call () 방법은 apply () 방법의 작용과 같고, 그것들의 차이는 매개 변수를 수신하는 방식이 다르기 때문이다.call () 방법의 경우 첫 번째 파라미터는this값에 변화가 없고 다른 파라미터는 함수에 직접 전달된다.다시 말하면call() 방법을 사용할 때 함수에 전달되는 매개 변수는 반드시 하나하나 열거해야 한다. 아래의 예와 같다. 

function sum(num1, num2){
    return num1 + num2;
}
 
function callSum(num1, num2){
    return sum.call(this, num1, num2);
}
 
alert(callSum(10,10));   //20

콜() 방법을 사용하는 경우 콜섬()은 각 매개변수를 명시적으로 전달해야 합니다.결과는 apply () 를 사용하는 것과 다를 것이 없습니다.apply()를 사용하느냐,call()를 사용하느냐는 함수에 매개 변수를 전달하는 방식이 가장 편리한지에 달려 있다.만약에arguments 대상에 직접 전송하거나 함수에서 먼저 받은 것도 하나의 수조를 포함하려고 한다면 apply()를 사용하는 것이 더욱 편리할 것이다.그렇지 않으면 콜()을 선택하는 것이 더 적합할 수 있습니다.(함수에 매개 변수를 전달하지 않는 상황에서 어떤 방법을 사용하든 상관없다.)
사실상 전달 매개 변수는 apply()와call()의 진정한 용무가 아니다.그것들의 진정한 강점은 함수를 확장하여 운행하는 작용역을 넓힐 수 있다는 것이다.다음은 하나의 예를 보겠습니다.

window.color = "red";
var o = { color: "blue" };
 
function sayColor(){
    alert(this.color);
}
 
sayColor();                //red
 
sayColor.call(this);       //red
sayColor.call(window);     //red
sayColor.call(o);          //blue

sayColor () 는 전역 함수로 정의되어 있으며, 전역 역할 영역에서 호출될 때, "red"를 표시합니다.this에 대한 것이기 때문입니다.color의 값을 구하면 window로 변환됩니다.color의 값을 구하다.그리고sayColor.call(this)과sayColor.콜 (window) 은 전역 역할 영역에서 함수를 현저하게 호출하는 두 가지 방식이며, 결과는 당연히 '레드' 를 표시합니다.그러나sayColor를 실행하면ll(o)일 때 함수의 실행 환경이 달라진다. 이때 함수 체내의this 대상이 o를 가리키기 때문에 결과는'blue'이다.
콜()(또는 apply())를 사용하여 작용역을 확장하는 가장 큰 장점은 대상이 방법과 어떠한 결합 관계도 필요 없다는 것이다.다음 코드를 다시 보십시오. 

window.color = "red";
var o = { color: "blue" };
 
function sayColor(){
    alert(this.color);
}
 
sayColor();                //red
 
o.sayColor = sayColor;
o.sayColor();          //blue

우리는 먼저 sayColor() 함수를 대상o에 넣은 다음에 o를 통해 그것을 호출한다.위의 예에서 지금의 이 불필요한 절차는 필요 없다
 

2. bind와call,apply의 차이

bind ()가this를 바꾸면 함수를 실행하지 않고 새this를 연결하는 함수를 되돌려줍니다
ECMAScript 5는 또한 bind() 방법을 정의합니다.이 방법은 함수의 실례를 만들 것입니다. this 값은 bind() 함수에 연결된 값입니다.예를 들면 다음과 같습니다.

window.color = "red";
var o = { color: "blue" };
 
function sayColor(){
    alert(this.color);
} 
var objectSayColor = sayColor.bind(o);
objectSayColor();    //blue

bind방법을 언급하면 여러분은call방법,apply방법도 생각하실 거예요.그것들은 모두 Function 대상에 내장된 방법으로, 그들의 첫 번째 매개 변수는 호출 방법에서this의 지향을 바꾸는 데 사용된다.주의해야 할 것은 bind는 나중에 호출할 수 있도록 새로운 함수를 되돌려주는 것이다.apply,call는 원함수를 즉시 호출한다.오늘 우리는 주로bind방법의 이해와 사용을 설명한다.
bind 방법은 EcmaScript5에 새로 추가된 방법입니다. 이 방법은 mdn에 소개되어 있습니다.
bind () 방법은 새로운 함수 (귀속 함수라고 함) 를 만듭니다. 호출될 때this 키워드를 제공하는 값으로 설정하고, 새로운 함수를 호출할 때, 제공하기 전에 주어진 매개 변수 서열을 제공합니다.
구문:fun.bind(thisArg[, arg1[, arg2[, ...]]])
thisArg 매개 변수는 바인딩 함수가 호출될 때 this를 가리키는 매개 변수임을 나타냅니다.new 조작부호를 사용하여 귀속 함수를 호출할 때 이 인자는 무효입니다.
매개 변수arg1, arg2, ... ：는 귀속 함수가 호출될 때 이 매개 변수는 실참 전에 귀속된 방법에 전달됩니다.