我已经知道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
当前回答
JavaScript调用()
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应用()
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函数是不同的，调用单独的参数，但应用数组 如:(1、2、3) **
JavaScript绑定()
name: "Lokamn",
dob: 12,
anotherPerson: {
name: "Pappu",
dob: 12,
print2: function () {
console.log(this)
}
}
}
var bindFunction = person.anotherPerson.print2.bind(person)
bindFunction()
其他回答
function. prototype.call()和function. prototype.apply()都使用给定的这个值调用函数，并返回该函数的返回值。
另一方面，function .prototype.bind()使用给定的这个值创建一个新函数，并返回该函数而不执行它。
让我们取一个这样的函数:
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
语法
呼叫(thisArg, arg1, arg2， .) (thisArg专心,argsArray) bind(thisArg[， arg1] [， arg2])
Here
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
简单来说，所有方法都用于在常规函数中显式地设置上下文(this)
Call: Call调用给定上下文的函数，并允许一个一个地传递参数
Apply: Apply在给定上下文调用函数，并允许将参数作为数组传递
Bind: Bind通过设置提供的上下文返回一个新函数，并允许逐个传递参数
注:
Call和Apply都是相似的，唯一不同的是它们期望参数的方式 上述方法不适用于箭头函数
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
它们都将其附加到函数(或对象)中，区别在于函数调用(见下文)。
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"
