为什么JavaScript bind()是必要的? [英] Why is JavaScript bind() necessary?

查看:135
本文介绍了为什么JavaScript bind()是必要的?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

示例1中的问题是'this'指的是全局名称而不是myName对象。

The problem in example 1 is 'this' referring to the global name instead of the myName object.

我理解在设置值时使用bind()这对于一个特定的对象,所以它解决了示例1中的问题,但为什么这个问题首先出现?它只是Javascript的创建方式吗?

I understand the use of bind() in setting the value of this to a specific object, so it solves the problem in example 1, but why does this problem occur in the first place? Is it just the way Javascript was created?

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

I'm also wondering why example 3 solves the issue and the difference between example 2 and 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()?

Why is JavaScript bind() necessary?

这个值如何函数调用决定。如果是谁调用该函数,那么通常不需要使用 .bind ,因为你可以控制如何调用该函数,因此它的这个值。

The value of this is determined by how a function is called. If it is you who calls the function then there is usually no need to use .bind, since you have control over how to call the function, and therefore its this value.

然而,通常是你打电话的人功能。函数作为回调和事件处理程序传递给其他函数。它们由其他代码调用,你无法控制如何调用该函数,因此无法控制这个将参考。

However, often it is not you who calls the function. Functions are passed to other functions as callbacks and event handlers. They are called by other code and you have no control over how the function is called, and therefore cannot control what this will refer to.

如果您的函数需要设置为特定值而您不是一个调用该函数,你需要 .bind 该函数为特定的这个值。

If your function requires this to be set to a specific value and you are not the one calling the function, you need to .bind the function to a specific this value.

换句话说: .bind 允许你设置这个的值而不用现在调用函数

In other words: .bind allows you to set the value of this without calling the function now.

以下是引用/调用函数的比较:

Here is comparison of referring to/calling functions:

                    +-------------------+-------------------+
                    |                   |                   |
                    |      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        |
|                   |                   |                   |
+-------------------+-------------------+-------------------+




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

I'm also wondering why example 3 solves the issue and the difference between example 2 and 3.

示例1/2和3不可能更加不同。 storeMyName storeMyName2 包含将来调用的函数,而 storeMyName3 包含当时调用 myName.getName() 的结果

Example 1/2 and 3 couldn't be more different. storeMyName and storeMyName2 contain functions, which are called in the future, whereas storeMyName3 contains the result of calling myName.getName() at that moment.

进一步阅读材料:

  • How does the "this" keyword work?
  • MDN - this
  • YDKS - this & Object Prototypes
  • How to access the correct `this` context inside a callback?

这篇关于为什么JavaScript bind()是必要的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆