Javascript call() & apply() vs bind()?

Javascript call() & apply() vs bind()?

그 을 알고 있다.apply ★★★★★★★★★★★★★★★★★」call를 설정하는 유사한 함수입니다.this(일부러)

차이는 인수를 전송하는 방법에 있습니다(수동 vs 배열).

질문:.

,, 제, 제, 제, 니, 니, 니, 니, 니, but, but, but, but, but, 를 쓰면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

.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에서 광범위하게 사용하지만 컨텍스트는 비동기 액션을 시작한 인스턴스로 해야 합니다.

단순하고 순진한 바인드 구현은 다음과 같습니다.

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

(다른 arg를 건네주는 등) 더 많은 것이 있습니다만, 자세한 내용을 읽고 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는 인수를 한 번에 하나씩 나열하는 것이 아니라 배열과 같은 개체를 사용한다는 점을 제외하고는 호출과 유사합니다.

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"                                     

심플한 형식으로 답변

• 호출하면 함수가 호출되어 인수를 하나씩 전달할 수 있습니다.
• 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용임을 기억함으로써 어느 것이 어느 것인지 항상 기억합니다.

바인드는 조금 달라요.새로운 함수를 반환합니다.Call and Apply는 현재 기능을 즉시 실행합니다.

바인드는 많은 것에 좋다.위의 예시와 같이 카레 기능에 사용할 수 있습니다.간단한 hello 기능을 사용하여 helloJohn 또는 helloKelly로 바꿀 수 있습니다.onClick과 같은 이벤트에도 사용할 수 있습니다.이 이벤트에서는, 언제 기동할지는 알 수 없지만, 어떤 콘텍스트를 설정할지는 알 수 있습니다.

참조: 코드 플래닛.이오

함수 호출, 함수 호출, 함수 호출, 함수 호출, 함수 호출,call/apply ★★★★★★★★★★★★★★★★★」bind금금: :

.bind 을 할 수 .this현재 값을 지정하고 나중에 함수를 실행할 수 있습니다. 새 함수 개체를 반환하기 때문입니다.

TL;DR:

간단히 말하면 bind는 함수를 만들고 호출하고 apply는 함수를 실행하는 반면 apply는 배열 내의 파라미터를 예상합니다.

상세설명

, 이렇게 '있다'가 있다고 가정해보세요.multiplication

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

이번에는 하다를 사용해서 표준 볼까요?bind

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

여기서 멀티비2(b)는 곱셈(2,b)과 같다.

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

바인드된 두 개의 매개 변수를 모두 전달하면 어떻게 됩니까?

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

getSixAlways()는 곱셈(3,2)과 같습니다.

getSixAlways();//6

6을 하고 6을 반환한다.getSixAlways(12); //6

var magicMultiplication = multiplication.bind(this);

그러면 새로운 곱셈 함수가 생성되어 magicMultiplication에 할당됩니다.

아니요, 곱셈 기능을 magic Multipliation에 숨기고 있습니다.

, " "magicMultiplication됩니다.function b()

하면 잘 magicMultiplication(6,5); //30

전화해서 신청하는 게 어때요?

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

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

하면 을을설 for for for for for for for for for for for for 할 수 있습니다.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);

이 모든 방법의 배후에 있는 주요 개념은 함수 굴착입니다.

함수 차용 기능을 사용하면 한 개체의 메서드를 다른 개체에서 사용할 수 있습니다. 이 메서드의 복사본을 만들고 두 개의 다른 위치에 유지할 필요가 없습니다.이것은 .call(), .apply() 또는 .bind()를 사용하여 이루어집니다.이러한 모든 것은 빌리는 메서드에서 명시적으로 설정하기 위해 존재합니다.

1. 콜은 함수를 즉시 호출하여 인수를 하나씩 전달할 수 있습니다.
2. Apply는 함수를 즉시 호출하여 인수를 배열로 전달할 수 있도록 합니다.
3. 바인드는 새로운 함수를 반환하며 함수를 호출하여 언제든지 호출/호출할 수 있습니다.

이 모든 방법의 예를 다음에 나타냅니다.

let name =  {
    firstname : "Arham",
    lastname : "Chowdhury",
}
printFullName =  function(hometown,company){
    console.log(this.firstname + " " + this.lastname +", " + hometown + ", " + company)
}

불러

첫 번째 인수(예: 호출 메서드 내의 이름)는 항상 (이) 변수를 참조하며, 후자는 함수 변수가 됩니다.

printFullName.call(name,"Mumbai","Taufa");     //Arham Chowdhury, Mumbai, Taufa

적용합니다.

apply 메서드는 콜 메서드와 동일하지만 유일한 차이점은 함수 인수가 배열 목록에서 전달된다는 것입니다.

printFullName.apply(name, ["Mumbai","Taufa"]);     //Arham Chowdhury, Mumbai, Taufa

바인드

bind 메서드는 call과 동일하지만 bind는 나중에 bind를 호출함으로써 사용할 수 있는 함수를 반환합니다(즉시 호출하지 않음).

let printMyNAme = printFullName.bind(name,"Mumbai","Taufa");

printMyNAme();      //Arham Chowdhury, Mumbai, Taufa

printMyNAME()은 함수를 호출하는 함수입니다.

다음은 jsfiddle 링크입니다.

https://codepen.io/Arham11/pen/vYNqExp

둘 다 및 지정된 함수를 호출합니다.this및 functionvalue의 합니다.

한편Function.prototype.bind(), 는 지정된 기능을 사용하여 새로운 기능을 만듭니다.thisvalue는하지 않고 합니다.value는 하지 않고 반환됩니다.

그럼 다음과 같은 함수를 사용해 보겠습니다.

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

이제 다음과 같은 오브젝트를 보겠습니다.

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

다음과 같이 함수를 오브젝트에 바인드할 수 있습니다.

Obj.log = logProp.bind(Obj);

그럼 에는 뛰어가 요?Obj.log내의 의 장소: "Manywhere" : "Manywhere" : "Manywhere" :

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

---

를 끄는 은, 「이러다」의 값 , 「이러다」의 값도 할 수 입니다.thisprop:

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래, 음, 음, 음, 음, 음, 음, 다, using, using, using, using, using, using, using, using, using, using, using, using, using, using, using, using, using, using, using, using, using, 을 사용해서Apply ★★★★★★★★★★★★★★★★★」Call★★★★★★ 。

• bind()하게 하다

  함수 커링(기능. Currying)은 부분 함수 애플리케이션이라고도 하며, 일부 인수가 이미 설정된 상태에서 새로운 함수를 반환하는 함수(1개 이상의 인수를 받아들이는 함수)를 사용하는 것입니다.

  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메서드는 모두 메서드를 호출할 때 이 값을 설정하기 위해 사용되며 JavaScript 코드에서 직접 제어와 범용성을 사용할 수 있도록 약간 다른 방식으로 수행됩니다.

  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

  • 어레이 메서드 차용

    이번에는 '만들다'를 볼까요array-like및한 objectobject를 합니다.

    // 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()가변성 함수를 실행하다

는 가변애리티 함수의 1가지 예입니다.

// 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 ()method는 다양한 함수를 실행하는 데 도움이 됩니다.위의 방법 대신, 우리는 다음을 사용하여 숫자 배열을 전달해야 합니다.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 및 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

바인드 함수의 보다 광범위한 사용에 대해 설명하겠습니다.

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

func();
// Number: 1

왜? 현재 func는 넘버1과 바인드 되어 있기 때문에 이 경우 바인드를 사용하지 않으면 글로벌오브젝트를 가리키게 됩니다.

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 an array of arguments
displayDetails.apply(Name, ['Nishant'])
// Nishant, this is your name: age25 workSSE

call/multiple은 기능을 즉시 실행합니다.

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

bind는 함수를 즉시 실행하지는 않지만 랩 적용 함수를 반환합니다(나중에 실행할 경우).

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

구문

• call(thisArg, arg1, arg2, ...)
• apply(thisArg, argsArray)
• bind(이 Arg[, 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

적용 및 바인드를 호출합니다.어떻게 다른지 알 수 있어요.

일상 용어를 사용하여 콜을 학습하고 신청해 봅시다.

가 세 대 .your_scooter , your_car and your_jet같은 메커니즘(메커니즘)으로 시작합니다.를 만들었습니다.automobilepush_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」를 하고 있습니다.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()

다음으로 적용 후 콜 수용2개의 파라미터를 실시합니다.

1. 맥락
2. 논쟁들

여기서 코드의 마지막 줄에 콘텍스트를 설정합니다.

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

call과 apply의 차이점은 apply는 배열 형식의 파라미터를 받아들이지만 call은 단순히 콤마로 구분된 인수 목록을 받아들이기 때문입니다.

JS 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);

JavaScript Call()

const person = {
    name: "Lokamn",
    dob: 12,
    print: function (value,value2) {
        console.log(this.dob+value+value2)
    }
}
const anotherPerson= {
     name: "Pappu",
     dob: 12,
}
 person.print.call(anotherPerson,1,2)

JavaScript apply()

    name: "Lokamn",
    dob: 12,
    print: function (value,value2) {
        console.log(this.dob+value+value2)
    }
}
const anotherPerson= {
     name: "Pappu",
     dob: 12,
}
 person.print.apply(anotherPerson,[1,2])

**call 및 apply 함수는 다른 call take 개별 인수이지만 take 어레이를 적용합니다.[ 1, 2, 3 ]**

JavaScript bind()

    name: "Lokamn",
    dob: 12,
    anotherPerson: {
        name: "Pappu",
        dob: 12,
        print2: function () {
            console.log(this)
        }
    }
}

var bindFunction = person.anotherPerson.print2.bind(person)
 bindFunction()

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

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

call() :--여기에서는 함수 인수를 배열 형식이 아닌 개별적으로 전달합니다.

var obj = {name: "Raushan"};

var greeting = function(a,b,c) {
    return "Welcome "+ this.name + " to "+ a + " " + b + " in " + c;
};

console.log(greeting.call(obj, "USA", "INDIA", "ASIA"));

apply() :--여기에서는 함수 인수를 배열 형식으로 전달합니다.

var obj = {name: "Raushan"};

var cal = function(a,b,c) {
    return this.name +" you got " + a+b+c;
};

var arr =[1,2,3];  // array format for function arguments
console.log(cal.apply(obj, arr)); 

bind() :--

       var obj = {name: "Raushan"};

       var cal = function(a,b,c) {
            return this.name +" you got " + a+b+c;
       };

       var calc = cal.bind(obj);
       console.log(calc(2,3,4));

바인드는 사용할 수 없습니다.다음과 같이 쉽게 구성할 수 있습니다.

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;

함수에 대한 향후 호출에는 바인드를 사용합니다. 다.apply ★★★★★★★★★★★★★★★★★」call함수를 호출합니다.

bind()에서는 args 배열에 추가 인수를 추가할 수도 있습니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

    // 1) Call:
    
    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
    
    // 2) Apply:
    
    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
    
    // 3) Bind:
    
    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

Apply/Call/Bind를 사용해야 하는 경우

전화와 신청은 꽤 호환성이 있다.배열로 보내는 것이 더 쉬울지 쉼표로 구분된 인수 목록을 보낼지 결정하십시오.

콜은 콤마(구분 리스트)용이며, Apply는 어레이용입니다.

바인드는 조금 달라요.새로운 함수를 반환합니다.Call and Apply는 현재 기능을 즉시 실행합니다.

바인드는 많은 것에 좋다.위의 예시와 같이 카레 기능에 사용할 수 있습니다.간단한 hello 기능을 사용하여 hello on 또는 hello Kelly로 전환할 수 있습니다.onClick과 같은 이벤트에도 사용할 수 있습니다.이 이벤트에서는, 언제 기동할지는 알 수 없지만, 어떤 콘텍스트를 설정할지는 알 수 있습니다.

간단히 말해서, 모든 메서드는 정규 함수에서 명시적으로 컨텍스트(이것)를 설정하기 위해 사용됩니다.

콜: 콜은 지정된 컨텍스트에서 함수를 호출하여 인수를 하나씩 전달할 수 있습니다.

Apply: apply는 지정된 컨텍스트에서 함수를 호출하고 인수를 배열로 전달합니다.

Bind: bind는 지정된 컨텍스트를 설정하여 새로운 함수를 반환하고 인수를 하나씩 전달할 수 있습니다.

주의:

1. Call과 Apply는 둘 다 비슷하지만 다른 점은 인수를 예상하는 방식입니다.
2. 전술한 방법은 화살표 기능에서는 동작하지 않습니다.

JavaScript에서 call(), apply() 및 bind() 메서드의 첫 번째 차이점은 실행 시간!call()과 apply()는 즉시 실행되지만 bind()는 나중에 명시적으로 호출해야 하는 새로운 함수를 만듭니다.

또 다른 차이점은 인수를 전달할 때 call()은 쉼표로 구분된1개씩 전달할 수 있고 apply()는 인수 배열로 전달할 수 있으며 bind()는 둘 다 수행할 수 있습니다.

아래의 샘플 코드를 첨부했습니다!

const person = {
    fullName : function (randomMessage) {
        return `Hello, ${this.firstName} ${this.lastName} ${randomMessage}`;
    }
}

const personOne = {
    firstName : "John",
    lastName : "Doe"
}

const personTwo = {
    firstName : "Jack",
    lastName : "Adhikari"
}

let fullNameBind = person.fullName.bind(personOne, "--Binding");
let fullNameCall = person.fullName.call({firstName : "Sarah", lastName: "Holmes"}, "--Calling");
let fullNameApply = person.fullName.apply(personTwo, ["--Applying"]);

console.log(fullNameBind());
console.log(fullNameCall);
console.log(fullNameApply);

call: 이 값을 바인드하고 함수를 호출하여 인수 목록을 전달할 수 있습니다.

apply: 이 값을 바인드하고 함수를 호출하여 인수를 배열로 전달할 수 있습니다.

bind: 이 값을 바인드하고 새로운 함수를 반환하며 인수 목록을 전달할 수 있습니다.

같은 장소에서 함수의 값을 변경할 수 있습니다.그 차이는 바인드 함수가 결과적으로 새로운 함수를 반환한다는 것입니다.콜 메서드와 적용 메서드는 함수를 즉시 실행하지만 적용은 배열을 파라미터로 받아들일 수 있으며 배열을 구분하여 해석합니다.또한 바인드 기능은 Currying이 될 수 있습니다.

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

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

위의 예에서는 데모를 호출합니다.setValue() 함수를 사용하여 이.getValue 함수를 직접 전달하면 데모를 호출하지 않습니다.setTimeout에서 이는 윈도 오브젝트를 참조하기 때문에 setValue는 직접 기능합니다.따라서 바인드를 사용하여 데모 오브젝트의 컨텍스트를 this.getValue 함수에 전달해야 합니다.이것은 우리가 함수를 제대로 호출하지 않고 데모 오브젝트의 컨텍스트를 가진 함수만 전달한다는 것을 의미합니다.

이해해 주셨으면 합니다.

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

언급URL : https://stackoverflow.com/questions/15455009/javascript-call-apply-vs-bind