为什么需要JavaScript bind（）？

Z时代
2024-01-10
分类：问答

示例1中的问题是“ this”引用了全局名称而不是myName对象。

我了解在将this的值设置为特定对象时使用bind（）的方法，因此它可以解决示例1中的问题，但是为什么首先会出现此问题？这仅仅是创建Javascript的方式吗？

我还想知道为什么示例3解决了这个问题，以及示例2和示例3之间的区别。

this.name = "John"
var myName = {
  name: "Tom",
  getName: function() {
    return this.name
  }
}
var storeMyName = myName.getName; // example 1
var storeMyName2 = myName.getName.bind(myName); // example 2
var storeMyName3 = myName.getName(); // example 3
console.log("example 1: " + storeMyName()); // doesn't work
console.log("example 2: " + storeMyName2()); // works
console.log("example 3: " + storeMyName3); // works

回答：

为什么需要JavaScript bind（）？

值this是决定如何一个功能叫。如果是您

调用该函数，则通常无需使用.bind，因为您可以控制调用函数的方式，因此也可以控制其this值。

但是，通常不是您调用函数。函数作为回调和事件处理程序传递给其他函数。他们被称为其它的代码，你有无法控制如何

调用该函数，因此无法控制this将引用。

如果您的函数需要this设置为特定值，而您又不是调用该函数的人，则需要.bind将该函数设置为特定this值。

换句话说：.bind允许您设置的值，this而不是调用它现在。

这是引用/调用函数的比较：

                    +-------------------+-------------------+
                    |                   |                   |
                    |      time of      |       time of     |
                    |function execution |    this binding   |
                    |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|  function object  |      future       |      future       |
|         f         |                   |                   |
|                   |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|   function call   |       now         |        now        |
|        f()        |                   |                   |
|                   |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|     f.call()      |       now         |        now        |
|     f.apply()     |                   |                   |
|                   |                   |                   |
+-------------------+-------------------+-------------------+
|                   |                   |                   |
|     f.bind()      |      future       |        now        |
|                   |                   |                   |
+-------------------+-------------------+-------------------+