JavaScript中call()、apply()和bind()方法的第一个区别是它们的执行时间! Call()和apply()是相似的立即执行，而bind()创建了一个新函数，我们必须在任何稍后的时间显式调用!

另一个区别是，在传递参数时，call()允许我们用逗号分隔一个一个地传递，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);

在以后调用该函数时使用bind。apply和call都调用函数。

Bind()还允许将附加的参数挂在args数组上。

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

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/apply和bind之间的比较:

.bind允许您现在设置this值，同时允许您在将来执行该函数，因为它返回一个新的函数对象。

它们都将其附加到函数(或对象)中，区别在于函数调用(见下文)。

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