Я уже знаю, что apply и call - это схожие функции, которые устанавливают this (контекст функции).
Разница заключается в том, как мы отправляем аргументы (ручной массив vs)
Вопрос:
Но когда я должен использовать метод 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));
Я создал это сравнение между объектами функций, вызовами функций, 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.
Надеюсь, что это поможет.
Все они прикрепляют этот к функции (или объекту), и разница в вызове функции (см. ниже).
вызов прикрепляет эту к функции и немедленно выполняет функцию:
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"
привязать прикрепляет эту к функции, и ее нужно вызвать отдельно следующим образом:
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"
Ответ в простейшей форме
Вызов
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) равно умножению (2, b);
multiby2(3); //6
multiby2(4); //8
Что делать, если я передаю оба параметра в bind
var getSixAlways = multiplication.bind(this,3,2);
Теперь getSixAlways() равно умножению (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: он связывает функцию с предоставленным значением и контекстом, но не выполняет эту функцию. Для выполнения функции вам нужно вызвать функцию.
вызов: он выполняет функцию с предоставленным контекстом и параметром.
применить: он выполняет функцию с предоставленным контекстом и как массив.
Вот одна хорошая статья, чтобы проиллюстрировать разницу между 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 и
мы могли бы не захотеть сделать это просто, чтобы заимствовать метод, потому что объект автомобилей может уже иметь свойство или имя метода showData.
Мы не хотим перезаписывать его случайно. Как мы увидим в нашем обсуждении Apply и Call ниже,
лучше всего заимствовать метод, используя метод Apply или Call.
bind() позволяют нам выполнять функцию
Функция Currying, также известная как приложение с частичной функцией, - это использование function (которые принимают один или несколько аргументов), который возвращает новую функцию с некоторыми уже установленными аргументами.
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 и заимствовать некоторые методы массива для работы с нашим объектом, подобным массиву.
// 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() для выполнения функции переменной arity
Math.max является одним из примеров функции переменной-arity,
// 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
вызов/применение немедленно выполняет функцию:
func.call(context, arguments);
func.apply(context, [argument1,argument2,..]);
привязка не выполняет функцию немедленно, но возвращает завернутую функцию apply (для последующего выполнения):
function bind(func, context) {
return function() {
return func.apply(context, arguments);
};
}
Применить и привязать. и как они отличаются.
Позволяет изучать вызов и применять с использованием любой ежедневной терминологии.
У вас есть три автомобиля 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, и вы хотите использовать сторонний 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()
Теперь примените и вызовите два параметра.
Итак, здесь мы устанавливаем контекст в последней строке кода.
automobile.push_button_engineStart.apply(your_scooter,[20])
Разница между вызовом и применением заключается в том, что apply принимает параметры в форме массива, тогда как вызов просто может принимать список аргументов, разделенных запятыми.
что такое функция 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);
все еще не выполняется?
Позвольте сделать это ясно как слеза. Время экспериментировать. Мы вернемся, чтобы вызвать и применить приложение-приложение и попытаться сохранить значение функции в качестве ссылки.
Не удалось выполнить описанный ниже эксперимент, потому что вызов и применение вызываются немедленно, поэтому мы никогда не доходим до стадии хранения ссылки в переменной, где функция привязки крадет шоу
var test_function = automobile.push_button_engineStart.apply(your_scooter);
Основное различие между Call, Apply и 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 связан с Number 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
Синтаксис
Здесь
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() does not 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() does not work with array and better with comma seperated parametersCall: call вызывает функцию и позволяет передавать аргументы один за другим.
Apply: Apply вызывает функцию и позволяет передавать аргументы в виде массива.
Bind: Bind возвращает новую функцию, позволяющую передавать массив this и любое количество аргументов.
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Представьте, привязка недоступна. вы можете легко построить его следующим образом:
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()/bind() отслеживает параллель с конечным эффектом присвоения переменной исходной функции, которая явно не возвращает значение
function A(arg){ alert(arg); } // side effects only, no return
function B(arg){ return arg; } // it does return a value
var checkA = A("A_alert"); // left assignment won't be performed
var checkB = B("B_return"); // left assignment as expected
alert(checkA) // undefined --> no value was returned
alert(checkB) // B_return --> as expected
*using call()*
checkA = function(){ return A("A_alert"); }; // left assignment requires explicitly function
checkA(); // A_alert
**using bind()**
checkA = A("A_alert").bind(window); // left assignment don't
checkA(); // A_alert
bind() 'prepackages' функция и возвращает эту функцию, вызов() выполняет только вызов,
Я думаю, что те же самые места из них: все они могут изменить это значение функции. Различия между ними: функция bind вернет новую функцию в результате; методы вызова и применения будут немедленно выполнять эту функцию, но apply может принять массив как params, и он будет анализировать выделенный массив. А также функция bind может быть Currying.
Функция связывания должна использоваться, если мы хотим назначить функцию с конкретным контекстом, например.
var demo = {
getValue : function(){
console.log('demo object get value function')
}
setValue : function(){
setTimeout(this.getValue.bind(this),1000)
}
}
в приведенном выше примере, если мы вызываем функцию demo.setValue() и передаем функцию this.getValue напрямую, то она не вызывает функцию demo.setValue напрямую, потому что это в setTimeout относится к объекту окна, поэтому нам нужно передать контекст демонстрационного объекта в this.getValue, используя bind. это означает, что мы передаем только функцию с контекстом демонстрационного объекта, а не вызывающую функцию вызова.
Надеюсь, понимаешь.
для получения дополнительной информации см. функция связывания javascript знает подробно