想象一下，绑定是不可用的。 你可以简单地构建如下:

var someFunction=...
var objToBind=....

var bindHelper =  function (someFunction, objToBind) {
    return function() {
        someFunction.apply( objToBind, arguments );
    };  
}

bindHelper(arguments);

当您希望稍后在特定上下文中调用该函数(在事件中很有用)时，请使用.bind()。当您希望立即调用函数并修改上下文时，请使用.call()或.apply()。

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上的实际实现。

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

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

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

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

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"                                     

所有这些方法背后的主要概念是函数挖掘。

函数借用允许我们在不同的对象上使用一个对象的方法，而不必复制该方法并在两个不同的地方维护它。它是通过使用。调用()，。Apply()，或。Bind()，所有这些方法的存在都是为了显式地在我们所借用的方法上设置此值

Call立即调用函数，并允许您逐个传入参数 一个 Apply立即调用函数，并允许传入参数 作为一个数组。 Bind返回一个新函数，您可以通过调用函数随时调用/调用它。

下面是所有这些方法的示例

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

CALL

第一个参数，例如调用方法中的name总是一个引用 To (this)变量和后者将是函数变量

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

应用

Apply方法与call方法相同 唯一的区别是，函数参数是在数组列表中传递的

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

BIND

Bind方法与call方法相同，不同之处在于，Bind返回一个可以稍后通过调用它来使用的函数(不立即调用它)。

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

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

printMyNAme()是调用该函数的函数

下面是jsfiddle的链接

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

我之前创建了函数对象、函数调用、call/apply和bind之间的比较:

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