我已经知道apply和call是类似的函数，它们设置this(函数的上下文)。
区别在于我们发送参数的方式(manual vs array)
问题:
但是什么时候应该使用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。
Ex:
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
在你应该使用的其他变量中使用car的引用
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，它将指向全局对象。
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将此附加到函数中并立即执行函数:
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"
TL; diana:
简单地说，bind创建函数，调用和apply执行函数，而apply期望数组中的参数
完整的解释
假设有一个乘法函数
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);
这将创建一个新的乘法函数并将其分配给magic乘法。
哦，不，我们将乘法功能隐藏到magic乘法中。
调用 magic乘法返回一个空函数b()
在执行过程中，它运行良好 magicMultiplication (6 5);/ / 30
打电话申请怎么样?
magicMultiplication.call(这3 2);/ / 6
magicMultiplication.apply(这一点,[5,2]);/ / 10
bind:它将函数与所提供的值和上下文绑定，但不执行函数。要执行函数，需要调用函数。
调用:它使用提供的上下文和参数执行函数。
apply:它使用提供的上下文和执行函数 参数作为数组。
在以后调用该函数时使用bind。apply和call都调用函数。
Bind()还允许将附加的参数挂在args数组上。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
调用/apply立即执行函数:
func.call(context, arguments);
func.apply(context, [argument1,argument2,..]);
Bind不会立即执行函数，而是返回包装好的apply函数(供以后执行):
function bind(func, context) {
return function() {
return func.apply(context, arguments);
};
}
