Javascript call () 및 apply () 대 bind ()?

Javascript call () 및 apply () 대 bind ()?

---

난 이미 알고 apply하고 call있는 일련의 유사한 기능이다 this(함수의 컨텍스트).

차이점은 인수를 보내는 방식 (수동 대 배열)에 있습니다.

질문:

하지만 언제이 bind()방법을 사용해야 합니까?

var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

alert(obj.getX.bind(obj)());
alert(obj.getX.call(obj));
alert(obj.getX.apply(obj));

jsbin

---

함수 개체, 함수 호출 call/apply및 bind얼마 전에이 비교를 만들었습니다 .

.bind새로운 함수 객체를 반환하기 때문에 나중에 함수를 실행할 수 있도록 허용하면서 지금this 값 을 설정할 수 있습니다 .

---

.bind()이벤트에서 유용한 특정 컨텍스트로 나중에 해당 함수를 호출하려는 경우 사용 합니다. .call()또는 .apply()함수를 즉시 호출하고 컨텍스트를 수정하려는 경우 사용하십시오 .

함수를 즉시 호출 / 적용하는 반면 bind나중에 실행될 때 원래 함수를 호출하기위한 올바른 컨텍스트가 설정된 함수를 반환합니다. 이렇게하면 비동기 콜백 및 이벤트에서 컨텍스트를 유지할 수 있습니다.

나는 이것을 많이한다 :

function MyObject(element) {
    this.elm = element;

    element.addEventListener('click', this.onClick.bind(this), false);
};

MyObject.prototype.onClick = function(e) {
     var t=this;  //do something with [t]...
    //without bind the context of this function wouldn't be a MyObject
    //instance as you would normally expect.
};

멤버 메서드를 전달하려는 비동기 콜백을 위해 Node.js에서 광범위하게 사용하지만 컨텍스트가 비동기 작업을 시작한 인스턴스가되기를 원합니다.

간단하고 순진한 bind 구현은 다음과 같습니다.

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

(다른 인수를 전달하는 것과 같은) 더 많은 것이 있지만 그것에 대해 더 많이 읽고 MDN 에서 실제 구현 을 볼 수 있습니다 .

도움이 되었기를 바랍니다.

---

그것들은 모두 이것을 함수 (또는 객체)에 연결하고 차이점은 함수 호출에 있습니다 (아래 참조).

call은 이것을 함수에 연결 하고 즉시 함수를 실행합니다.

var person = {  
  name: "James Smith",
  hello: function(thing) {
    console.log(this.name + " says hello " + thing);
  }
}

person.hello("world");  // output: "James Smith says hello world"
person.hello.call({ name: "Jim Smith" }, "world"); // output: "Jim Smith says hello world"

bind는 이것을 함수에 연결하고 다음 과 같이 별도로 호출해야합니다.

var person = {  
  name: "James Smith",
  hello: function(thing) {
    console.log(this.name + " says hello " + thing);
  }
}

person.hello("world");  // output: "James Smith says hello world"
var helloFunc = person.hello.bind({ name: "Jim Smith" });
helloFunc("world");  // output: Jim Smith says hello world"

또는 다음과 같이 :

...    
var helloFunc = person.hello.bind({ name: "Jim Smith" }, "world");
helloFunc();  // output: Jim Smith says hello world"

apply 는 한 번에 하나씩 인수를 나열하는 대신 배열과 유사한 객체를 사용한다는 점을 제외 하면 call 과 유사합니다 .

function personContainer() {
  var person = {  
     name: "James Smith",
     hello: function() {
       console.log(this.name + " says hello " + arguments[1]);
     }
  }
  person.hello.apply(person, arguments);
}
personContainer("world", "mars"); // output: "James Smith says hello mars", note: arguments[0] = "world" , arguments[1] = "mars"                                     

---

SIMPLEST 형식으로 답변

• Call 은 함수를 호출하고 인수를 하나씩 전달할 수 있습니다.
• Apply 는 함수를 호출하고 인수를 배열로 전달할 수 있도록합니다.
• Bind 는 새로운 함수를 반환하여이 배열과 임의의 수의 인수를 전달할 수 있습니다.

---

적용 대 호출 대 바인딩 예제

요구

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

say.call(person1, 'Hello'); // Hello Jon Kuperman
say.call(person2, 'Hello'); // Hello Kelly King

대다

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

say.apply(person1, ['Hello']); // Hello Jon Kuperman
say.apply(person2, ['Hello']); // Hello Kelly King

묶다

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say() {
    console.log('Hello ' + this.firstName + ' ' + this.lastName);
}

var sayHelloJon = say.bind(person1);
var sayHelloKelly = say.bind(person2);

sayHelloJon(); // Hello Jon Kuperman
sayHelloKelly(); // Hello Kelly King

각각을 사용하는 경우

전화 및 신청은 꽤 상호 교환 가능합니다. 배열로 보내는 것이 더 쉬운 지 쉼표로 구분 된 인수 목록으로 보내는 것이 더 쉬운 지 결정하십시오.

Call은 쉼표 (구분 된 목록) 용이고 Apply는 Array 용이라는 것을 기억하여 항상 어느 쪽인지 기억합니다.

바인딩은 약간 다릅니다. 새로운 함수를 반환합니다. 호출 및 적용은 현재 함수를 즉시 실행합니다.

Bind는 많은 일에 유용합니다. 위의 예와 같이 카레 기능에 사용할 수 있습니다. 간단한 hello 함수를 사용하여 helloJon 또는 helloKelly로 바꿀 수 있습니다. 또한 언제 발생하는지 알 수 없지만 원하는 컨텍스트를 알고있는 onClick과 같은 이벤트에 사용할 수도 있습니다.

참조 : codeplanet.io

---

this함수가 호출되는 방식 에 관계 없이 값을 설정할 수 있습니다 . 이것은 콜백으로 작업 할 때 매우 유용합니다.

  function sayHello(){
    alert(this.message);
  }

  var obj = {
     message : "hello"
  };
  setTimeout(sayHello.bind(obj), 1000);

동일한 결과를 얻으려면 call다음과 같이 표시됩니다.

  function sayHello(){
    alert(this.message);
  }

  var obj = {
     message : "hello"
  };
  setTimeout(function(){sayHello.call(obj)}, 1000);

---

우리가 multiplication기능 을 가지고 있다고 가정

function multiplication(a,b){
console.log(a*b);
}

다음을 사용하여 몇 가지 표준 함수를 만들 수 있습니다. bind

var multiby2 = multiplication.bind(this,2);

이제 multiby2 (b)는 multiplication (2, b)와 같습니다.

multiby2(3); //6
multiby2(4); //8

bind에서 두 매개 변수를 모두 전달하면 어떻게됩니까?

var getSixAlways = multiplication.bind(this,3,2);

이제 getSixAlways ()는 multiplication (3,2)과 같습니다.

getSixAlways();//6

매개 변수를 전달해도 6이 반환됩니다. getSixAlways(12); //6

var magicMultiplication = multiplication.bind(this);

이것은 새로운 곱셈 함수를 생성하고 그것을 magicMultiplication에 할당합니다.

아뇨, 우리는 magicMultiplication에 곱셈 기능을 숨기고 있습니다.

호출 magicMultiplication하면 공백이 반환됩니다.function b()

실행시 잘 작동합니다. magicMultiplication(6,5); //30

전화 및 신청은 어떻습니까?

magicMultiplication.call(this,3,2); //6

magicMultiplication.apply(this,[5,2]); //10

간단히 말해서, bind함수를 생성하고 함수 call를 apply실행하고 apply배열의 매개 변수를 기대합니다.

---

모두 Function.prototype.call()와 Function.prototype.apply()주어진있는 함수를 호출 this값을, 그 함수의 반환 값을 반환합니다.

Function.prototype.bind()반면에는 주어진 this값 으로 새 함수를 만들고 실행하지 않고 해당 함수를 반환합니다.

자, 다음과 같은 함수를 보겠습니다.

var logProp = function(prop) {
    console.log(this[prop]);
};

이제 다음과 같은 개체를 살펴 보겠습니다.

var Obj = {
    x : 5,
    y : 10
};

다음과 같이 함수를 객체에 바인딩 할 수 있습니다.

Obj.log = logProp.bind(Obj);

이제 Obj.log코드의 어느 곳에서나 실행할 수 있습니다.

Obj.log('x'); // Output : 5
Obj.log('y'); // Output : 10

---

정말 흥미로운 부분은에 대한 값 this뿐만 아니라 인수에 대해서도 바인딩 할 때입니다 prop.

Obj.logX = logProp.bind(Obj, 'x');
Obj.logY = logProp.bind(Obj, 'y');

이제 이렇게 할 수 있습니다.

Obj.logX(); // Output : 5
Obj.logY(); // Output : 10

---

bind : 제공된 값과 컨텍스트로 함수를 바인딩하지만 함수를 실행하지는 않습니다. 함수를 실행하려면 함수를 호출해야합니다.

call : 제공된 컨텍스트와 파라미터로 함수를 실행합니다.

apply : 제공된 컨텍스트와 매개 변수를 배열로 사용 하여 함수를 실행합니다 .

---

다음은 , 및 의 차이점을 설명하는 좋은 기사 입니다.bind()apply()call()

• bind()우리는 쉽게 결합 될 특정 개체 설정할 수 있습니다 이 함수 또는 메소드가 호출 될 때.

  // This data variable is a global variable​
  var data = [
      {name:"Samantha", age:12},
      {name:"Alexis", age:14}
  ]
  var user = {
      // local data variable​
      data    :[
          {name:"T. Woods", age:37},
          {name:"P. Mickelson", age:43}
      ],
      showData:function (event) {
          var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1​
          console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
      }
  }
  
  // Assign the showData method of the user object to a variable​
  var showDataVar = user.showData;
  showDataVar (); // Samantha 12 (from the global data array, not from the local data array)​
  /*
  This happens because showDataVar () is executed as a global function and use of this inside 
  showDataVar () is bound to the global scope, which is the window object in browsers.
  */
  
  // Bind the showData method to the user object​
  var showDataVar = user.showData.bind (user);
  // Now the we get the value from the user object because the this keyword is bound to the user object​
  showDataVar (); // P. Mickelson 43​
  

• bind() 우리가 방법을 빌릴 수 있도록

  // Here we have a cars object that does not have a method to print its data to the console​
  var cars = {
      data:[
         {name:"Honda Accord", age:14},
         {name:"Tesla Model S", age:2}
     ]
  }
  
  // We can borrow the showData () method from the user object we defined in the last example.​
  // Here we bind the user.showData method to the cars object we just created.​
  cars.showData = user.showData.bind (cars);
  cars.showData (); // Honda Accord 14​
  

  이 예제의 한 가지 문제점 showData은 cars객체 에 새 메서드 를 추가하고 있으며 cars 객체에 이미 속성 또는 메서드 이름이있을 수 있으므로 메서드를 빌리기 위해 그렇게하고 싶지 않을 수 있다는 것입니다 showData. 실수로 덮어 쓰고 싶지 않습니다. Apply및 Call아래 에 대한 논의에서 볼 수 있듯이 Apply또는 Call메서드를 사용하여 메서드를 빌리는 것이 가장 좋습니다 .

• bind() 함수 카레를 허용

  부분 함수 응용 프로그램 이라고도하는 함수 Currying 은 일부 인수가 이미 설정된 새 함수를 반환하는 함수 (하나 이상의 인수를 허용 함)를 사용하는 것입니다.

  function greet (gender, age, name) {
      // if a male, use Mr., else use Ms.​
      var salutation = gender === "male" ? "Mr. " : "Ms. ";
      if (age > 25) {
          return "Hello, " + salutation + name + ".";
      }else {
          return "Hey, " + name + ".";
      }
   }
  

  bind()이 greet기능 을 카레에 사용할 수 있습니다

  // So we are passing null because we are not using the "this" keyword in our greet function.
  var greetAnAdultMale = greet.bind (null, "male", 45);
  
  greetAnAdultMale ("John Hartlove"); // "Hello, Mr. John Hartlove."
  
  var greetAYoungster = greet.bind (null, "", 16);
  greetAYoungster ("Alex"); // "Hey, Alex."​
  greetAYoungster ("Emma Waterloo"); // "Hey, Emma Waterloo."
  

• apply()또는 이 값 call()을 설정하려면

  apply, call및 bind방법은 모든 방법을 호출 할 때이 값을 설정하는 데 사용됩니다, 그들은 우리의 자바 스크립트 코드의 사용을 직접 제어와 다양성을 허용하는 약간 다른 방법으로 그것을한다.

  apply하고 call는 상기 함수의 매개 변수를 통과 점을 제외하고이 값을 설정하는 경우의 방법은 거의 동일 apply ()같이 배열 하면 할 때, 각각의 매개 변수를 열거 받는 사람에게 전달하는 call ()방법.

  여기서 일례 사용하는 것 call또는 apply설정 이 콜백 함수.

  // Define an object with some properties and a method​
  // We will later pass the method as a callback function to another function​
  var clientData = {
      id: 094545,
      fullName: "Not Set",
      // setUserName is a method on the clientData object​
      setUserName: function (firstName, lastName)  {
          // this refers to the fullName property in this object​
          this.fullName = firstName + " " + lastName;
      }
  };
  
  function getUserInput (firstName, lastName, callback, callbackObj) {
       // The use of the Apply method below will set the "this" value to callbackObj​
       callback.apply (callbackObj, [firstName, lastName]);
  }
  
  // The clientData object will be used by the Apply method to set the "this" value​
  getUserInput ("Barack", "Obama", clientData.setUserName, clientData);
  // the fullName property on the clientData was correctly set​
  console.log (clientData.fullName); // Barack Obama
  

• apply또는로 함수 차용call

  • Borrow Array 메서드

    array-like객체를 생성 하고 배열과 유사한 객체에서 작동하기 위해 몇 가지 배열 메서드를 빌려 보겠습니다 .

    // An array-like object: note the non-negative integers used as keys​
    var anArrayLikeObj = {0:"Martin", 1:78, 2:67, 3:["Letta", "Marieta", "Pauline"], length:4 };
    
     // Make a quick copy and save the results in a real array:
     // First parameter sets the "this" value​
     var newArray = Array.prototype.slice.call (anArrayLikeObj, 0);
     console.log (newArray); // ["Martin", 78, 67, Array[3]]​
    
     // Search for "Martin" in the array-like object​
     console.log (Array.prototype.indexOf.call (anArrayLikeObj, "Martin") === -1 ? false : true); // true​
    

    또 다른 일반적인 경우는 arguments다음과 같이 배열로 변환 하는 것입니다.

      // We do not define the function with any parameters, yet we can get all the arguments passed to it​
     function doSomething () {
        var args = Array.prototype.slice.call (arguments);
        console.log (args);
     }
    
     doSomething ("Water", "Salt", "Glue"); // ["Water", "Salt", "Glue"]
    

  • 다른 방법 차용

    var gameController = {
         scores  :[20, 34, 55, 46, 77],
         avgScore:null,
         players :[
              {name:"Tommy", playerID:987, age:23},
              {name:"Pau", playerID:87, age:33}
         ]
     }
     var appController = {
         scores  :[900, 845, 809, 950],
         avgScore:null,
         avg     :function () {
                 var sumOfScores = this.scores.reduce (function (prev, cur, index, array) {
                      return prev + cur;
             });
             this.avgScore = sumOfScores / this.scores.length;
         }
       }
       // Note that we are using the apply () method, so the 2nd argument has to be an array​
       appController.avg.apply (gameController);
       console.log (gameController.avgScore); // 46.4​
       // appController.avgScore is still null; it was not updated, only gameController.avgScore was updated​
       console.log (appController.avgScore); // null​
    

• 가변 인수 함수 apply()를 실행하는 데 사용

다음 Math.max은 가변 인수 함수의 한 예입니다.

// We can pass any number of arguments to the Math.max () method​
console.log (Math.max (23, 11, 34, 56)); // 56

하지만 전달할 숫자 배열이 있다면 Math.max어떨까요? 우리는 이것을 할 수 없습니다 :

var allNumbers = [23, 11, 34, 56];
// We cannot pass an array of numbers to the the Math.max method like this​
console.log (Math.max (allNumbers)); // NaN

이 apply ()방법이 가변 함수를 실행하는 데 도움이됩니다 . 위의 대신 apply ()를 사용하여 숫자 배열을 전달해야합니다 .

var allNumbers = [23, 11, 34, 56];
// Using the apply () method, we can pass the array of numbers:
console.log (Math.max.apply (null, allNumbers)); // 56

---

call / apply는 즉시 함수를 실행합니다.

func.call(context, arguments);
func.apply(context, [argument1,argument2,..]);

bind 는 즉시 함수를 실행하지 않지만 래핑 된 적용 함수를 반환 합니다 (나중 실행을 위해) :

function bind(func, context) {
    return function() {
        return func.apply(context, arguments);
    };
}

---

apply 및 bind를 호출하십시오. 그리고 그들이 어떻게 다른지.

전화를 배우고 일상 용어를 사용하여 적용 할 수 있습니다.

your_scooter , your_car and your_jet동일한 메커니즘 (방법)으로 시작하는 세 대의 자동차 가 있습니다. automobile메서드 로 객체 를 만들었습니다 push_button_engineStart.

var your_scooter, your_car, your_jet;
var automobile = {
        push_button_engineStart: function (runtime){
        console.log(this.name + "'s" + ' engine_started, buckle up for the ride for ' + runtime + " minutes");
    }
}

언제 전화하고 사용하는지 이해합시다. 당신이 엔지니어이고, 당신이 가지고 있다고 가정하자 your_scooter, your_car하고 your_jet있는이 push_button_engine_start와 함께 제공되지 않은 당신이 제 3자를 사용하고자하는 push_button_engineStart.

다음 코드 줄을 실행하면 오류가 발생합니다. 왜?

//your_scooter.push_button_engineStart();
//your_car.push_button_engineStart();
//your_jet.push_button_engineStart();


automobile.push_button_engineStart.apply(your_scooter,[20]);
automobile.push_button_engineStart.call(your_jet,10);
automobile.push_button_engineStart.call(your_car,40);

따라서 위의 예는 your_scooter, your_car, your_jet에 자동차 객체의 기능을 성공적으로 제공합니다.

더 자세히 살펴 보겠습니다. 여기서는 위의 코드 줄을 분할합니다. automobile.push_button_engineStart사용되는 방법을 얻는 데 도움이됩니다.

또한 우리는 점 표기법을 사용하여 적용 또는 호출을 사용합니다. automobile.push_button_engineStart.apply()

이제 적용하고 두 개의 매개 변수를 수락합니다.

1. 문맥
2. 인수

그래서 여기서 우리는 코드의 마지막 줄에서 컨텍스트를 설정합니다.

automobile.push_button_engineStart.apply(your_scooter,[20])

call과 apply의 차이점은 apply 는 배열 형식의 매개 변수를 받아들이는 반면 call은 단순히 쉼표로 구분 된 인수 목록을 받아 들일 수 있다는 것입니다.

JS Bind 기능은 무엇입니까?

bind 함수는 기본적으로 무언가의 컨텍스트를 바인딩 한 다음 나중에 실행하기 위해 변수에 저장하는 것입니다.

이전 예제를 더욱 개선해 보겠습니다. 이전에 우리는 자동차 오브젝트에 속하는 메소드를 사용하여를 장비하는 데 사용했습니다 your_car, your_jet and your_scooter. 이제 우리가 원하는 push_button_engineStart실행의 나중 단계에서 자동차를 개별적으로 시작 하기 위해 별도의 개별 제공을 원한다고 상상해보십시오 .

var scooty_engineStart = automobile.push_button_engineStart.bind(your_scooter);
var car_engineStart = automobile.push_button_engineStart.bind(your_car);
var jet_engineStart = automobile.push_button_engineStart.bind(your_jet);


setTimeout(scooty_engineStart,5000,30);
setTimeout(car_engineStart,10000,40);
setTimeout(jet_engineStart,15000,5);

여전히 만족하지 않습니까?

눈물 방울로 명확히합시다. 실험 할 시간입니다. 다시 호출하여 함수 응용 프로그램을 적용하고 함수 값을 참조로 저장해 보겠습니다.

아래 실험은 호출 및 적용이 즉시 호출되기 때문에 실패하므로 bind 함수가 쇼를 훔치는 변수에 참조를 저장하는 단계에 도달하지 못합니다.

var test_function = automobile.push_button_engineStart.apply(your_scooter);

---

Call, Apply 및 Bind의 기본적인 차이점은 다음과 같습니다.

Bind는 실행 컨텍스트를 나중에 그림에 표시하려는 경우에 사용됩니다.

전의:

var car = { 
  registrationNumber: "007",
  brand: "Mercedes",

  displayDetails: function(ownerName){
    console.log(ownerName + ' this is your car ' + '' + this.registrationNumber + " " + this.brand);
  }
}
car.displayDetails('Nishant'); // **Nishant this is your car 007 Mercedes**

이 방법을 다른 변수에 사용하고 싶다고 가정 해 보겠습니다.

var car1 = car.displayDetails('Nishant');
car1(); // undefined

다른 변수에서 자동차 참조를 사용하려면 다음을 사용해야합니다.

var car1 = car.displayDetails.bind(car, 'Nishant');
car1(); // Nishant this is your car 007 Mercedes

bind 함수의보다 광범위한 사용에 대해 이야기 해 봅시다.

var func = function() {
 console.log(this)
}.bind(1);

func();
// Number: 1

왜? 이제 func는 번호 1로 바인딩되기 때문에이 경우 bind를 사용하지 않으면 Global Object를 가리 킵니다.

var func = function() {
 console.log(this)
}.bind({});

func();
// Object

Call, Apply는 문을 동시에 실행하고자 할 때 사용합니다.

var Name = { 
    work: "SSE",
    age: "25"
}

function displayDetails(ownerName) {
    console.log(ownerName + ", this is your name: " + 'age' + this.age + " " + 'work' + this.work);
}
displayDetails.call(Name, 'Nishant')
// Nishant, this is your name: age25 workSSE

In apply we pass the array
displayDetails.call(Name, ['Nishant'])
// Nishant, this is your name: age25 workSSE

---

호출 : 호출은 함수를 호출하고 인수를 하나씩 전달할 수 있습니다.

Apply : Apply는 함수를 호출하고 인수를 배열로 전달할 수 있습니다.

Bind : Bind는 새로운 함수를 반환하여이 배열과 임의의 수의 인수를 전달할 수 있습니다.

var person1 = {firstName: 'Raju', lastName: 'king'};
var person2 = {firstName: 'chandu', lastName: 'shekar'};

function greet(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}
function greet2(greeting) {
        console.log( 'Hello ' + this.firstName + ' ' + this.lastName);
    }


greet.call(person1, 'Hello'); // Hello Raju king
greet.call(person2, 'Hello'); // Hello chandu shekar



greet.apply(person1, ['Hello']); // Hello Raju king
greet.apply(person2, ['Hello']); // Hello chandu shekar

var greetRaju = greet2.bind(person1);
var greetChandu = greet2.bind(person2);

greetRaju(); // Hello Raju king
greetChandu(); // Hello chandu shekar

---

통사론

• 호출 (thisArg, arg1, arg2, ...)
• 적용 (thisArg, [argsArray])
• 바인드 (thisArg [, arg1 [, arg2 [, ...]]])

여기

• thisArg는 객체입니다.
• argArray는 배열 객체입니다.
• arg1, arg2, arg3, ...은 추가 인수입니다.

function printBye(message1, message2){
    console.log(message1 + " " + this.name + " "+ message2);
}

var par01 = { name:"John" };
var msgArray = ["Bye", "Never come again..."];

printBye.call(par01, "Bye", "Never come again...");
//Bye John Never come again...

printBye.call(par01, msgArray);
//Bye,Never come again... John undefined

//so call() doesn't work with array and better with comma seperated parameters 

//printBye.apply(par01, "Bye", "Never come again...");//Error

printBye.apply(par01, msgArray);
//Bye John Never come again...

var func1 = printBye.bind(par01, "Bye", "Never come again...");
func1();//Bye John Never come again...

var func2 = printBye.bind(par01, msgArray);
func2();//Bye,Never come again... John undefined
//so bind() doesn't work with array and better with comma seperated parameters

---

바인드를 사용할 수 없다고 상상해보십시오. 다음과 같이 쉽게 구성 할 수 있습니다.

var someFunction=...
var objToBind=....

var bindHelper =  function (someFunction, objToBind) {
    return function() {
        someFunction.apply( objToBind, arguments );
    };  
}

bindHelper(arguments);

---

    function sayHello() {
            //alert(this.message);
            return this.message;
    }
    var obj = {
            message: "Hello"
    };

    function x(country) {
            var z = sayHello.bind(obj);
            setTimeout(y = function(w) {
//'this' reference not lost
                    return z() + ' ' + country + ' ' + w;
            }, 1000);
            return y;
    }
    var t = x('India')('World');
    document.getElementById("demo").innerHTML = t;

---

나는 그것들의 같은 위치가 다음과 같다고 생각한다 : 그들 모두가 함수의이 값을 변경할 수있다. 차이점은 다음과 같다 : 바인드 함수는 결과적으로 새로운 함수를 반환 할 것이다; call 및 apply 메소드는 즉시 함수를 실행하지만 apply는 배열을 매개 변수로 받아 분리 된 배열을 구문 분석합니다. 또한 bind 함수는 Currying이 될 수 있습니다.

---

bind 함수는 예를 들어 특정 컨텍스트를 가진 함수를 할당하고자 할 때 사용해야합니다.

var demo = {
           getValue : function(){ 
             console.log('demo object get value       function') 
            }
           setValue : function(){  
              setTimeout(this.getValue.bind(this),1000)           
           }
 }

위의 예에서 demo.setValue () 함수를 호출하고 this.getValue 함수를 직접 전달하면 setTimeout의 이것이 window 객체를 참조하므로 demo.setValue 함수를 직접 호출하지 않으므로 this.getValue에 데모 객체 컨텍스트를 전달해야합니다. bind를 사용하는 기능. 실제로 함수를 호출하지 않고 데모 객체의 컨텍스트로만 함수를 전달한다는 의미입니다.

이해 바랍니다.

자세한 내용은 javascript bind function know in detail을 참조하십시오.

참고 URL : https://stackoverflow.com/questions/15455009/javascript-call-apply-vs-bind