在词法范围或 this 绑定之间使用对象方法？

Question

我无法确定是什么概念解释了为什么对象的属性“count”的值保留在下面的代码中。

我已阅读并查看了 Getify 的 You Don't Know JS 中的 this 和对象原型部分 以及他们解释lexical this的部分。 但是，我无法理解下面的代码。 是词法作用域吗？ 还是 this 绑定允许保留 count 的值？

下面是示例代码：

var obj = {
    count: 0,
    method: function() {
        console.log("in method: " + this.count)
        return this.count++;
    },
}

// here is where I have issue, when the method is invoked as a function
for (var i = 0; i<10; i++) {
    console.log(obj.method()) // invoked as a function
}

// I've left this small block in for convenience
// I have no trouble with understanding why this block outputs what it outputs
for (var i = 0; i<10; i++) {
    console.log(obj.method) // "gets its value (a reference to a function) and then logs that" from TJ Crowder
}

我希望对 obj.method() 的第一个方法调用的输出能够输出

// 0
// in method 0
// 1
// in method 1
// 2
.
.
.
// 10
// in method 10

我对输出的内容没有任何问题。我的问题又是，是词法作用域吗？ 还是 this 绑定允许保留 count 的值？

感谢您抽出宝贵时间提供帮助。

编辑 1 在下面 Tj Crowder 的帖子的帮助下，我编辑了代码 sn-p 以清除错误，因为它偏离了我的问题。

Answer 1

这个问题与this或范围无关。 :-) 您会看到undefineds，因为method 不返回任何内容，因此调用它会产生值undefined，您通过console.log 记录该值。要使其返回count 的值，您需要添加return：

method: function() {
    console.log(this.count)
    return this.count++;
//  ^^^^^^
},

这将返回 this.count 的值，因为它在增量之前（这似乎是您对预期输出的期望）。

现场示例：

var obj = {
    count: 0,
    method: function() {
        console.log("in method: " + this.count)
        return this.count++;
    },
    timeOutMethod: function() { // I understand here we explicitly bind this, no problem here
        setTimeout(function() {
            console.log(this.count++)
        }.bind(this), 100)
    }
}

// here is where I have issue, when the method is invoked as a function
for (var i = 0; i<10; i++) {
    console.log(obj.method()) // invoked as a function
}

.as-console-wrapper {
  max-height: 100% !important;
}

---

另外，关于这个：

for (var i = 0; i<10; i++) {
    console.log(obj.method) // invoked as a property
}

根本不调用 method，它只是获取它的值（对函数的引用）然后记录它（你会在控制台中看到函数的一些表示)。

Answer 2

它是绑定。

范围 是关于哪些变量是可访问的以及语言对您隐藏哪些变量的概念。在机器语言中，所有内存地址都是可读写的，因此在机器语言和一些汇编语言中，范围的概念并不存在（所有变量基本上都是全局的）。后来的语言通过引入函数引入了全局变量与局部变量的概念。这个概念进一步演变成闭包——创建多个作用域实例的能力。

绑定是哪个属性/属性属于哪个对象的概念。在 Java 和 C++ 等实现早期绑定的语言中，绑定的概念仅控制方法访问属性的方式（通常这允许语言不需要“this”关键字）。后期绑定语言的规则稍微复杂一些，因为绑定是在运行时而不是编译时确定的。 Javascript 不仅是后期绑定，而且是动态的——允许程序员使用 Function.prototype.call() 之类的东西来改变 this 指向的对象。并在运行时将一个对象的方法分配给另一个对象（例如b.foo = a.foo）

Answer 3

TL;DR 将属性count 绑定到this 值的机制是隐式绑定 (Getify's You Don't Know JS), Implicit Binding

首先如果我在解释中得出了错误的结论，您是否愿意提供您同意或不同意的内容，并分享我应该如何考虑这个问题？我正在寻求改进，谢谢！

解释：当obj.method() 被调用时，我们有一个this.count 的属性查找。如果我们在调用obj.method() 时检查调用站点，obj 是变量存在于全局范围内。 obj 的属性通过原型链访问。当我们执行this.count 的属性查找时，我们尝试访问obj 中的属性。当没有找到该属性时，我们查找该属性的原型链。在我们通过“this”绑定访问count 属性时，obj.count 包含/拥有属性count。

我的问题的原因：我混合了 this-binding 如何在箭头-fcns 中运行的概念、词法范围以及对“this”的解释过于字面化。

示例

以下是让我感到困惑的代码示例。 我的问题源于混淆了 this-binding 如何在不同样式的代码中运行的约定。我混淆了以下概念：

1. this 关键字如何在箭头函数中运行（即词法范围）

   function wait() {
       setTimeout(() => {
           console.log(this) // lexically bound
       }, 100);
   }
   
   wait();
   
   function foo() {
       // console.log(this) - will output {a: 2}
       return (a) => {
           console.log(this.a) // 'this' value is adopted from foo's lexical scope
       }
   }
   
   var obj = {
       a: 2
   }
   
   var obj2 = {
       a: 3
   }
   
   // foo is 'this'-bound to obj1
   // bar, a reference to the returned arrow-function will also be 'this'-bound to obj1
   // the arrow function binding cannot be overridden
   var bar = foo.call(obj) 
   bar.call(obj2)
   

2. 不是了解this 的真正工作原理，而是使用词法范围作为一种解决方法。在这里，data.count 是递增的

   function foo() {
       return data.count++; // the obj property data.count is accessed via global scope
   }
   
   var data = {
       count: 0,
   }
   
   for (var i = 0; i<10; i++) {
       foo()
   }
   
   console.log(data.count)
   

3. 最后，另一个误解可能来自对this-binding 的过于直白的解释。我引用的 sn-p 来自 Getify 的书

   function foo(num) {
       console.log( "foo: " + num );
   
       // keep track of how many times `foo` is called
       this.count++;
   }
   
   foo.count = 0;
   
   var i;
   
   for (i=0; i<10; i++) {
       if (i > 5) {
           foo( i );
       }
   }
   // foo: 6
   // foo: 7
   // foo: 8
   // foo: 9
   
   // how many times was `foo` called?
   console.log( foo.count ); // 0 -- not what we expected
   

旁白：感谢@TJ Crowder 和@slebetman 帮助澄清关于范围和this-binding 的其他误解