Javascript 如何评估“this”？

Question

我正在尝试了解一些基本的 javascript。

我有以下sn-p。我们有 name 变量，在这两种情况下都通过 getName 方法引用。

第一个警报输出HocusPocus，而第二个警报输出GeorgeThomas。但我不明白在这种情况下this 是如何指代名称的

    var name = 'Gerorge Thomas';
    var obj = {
       name: 'Cinderella',
       value: {
          name: 'HocusPocus',
          getName: function() {
             return this.name;
          }
       }
    };
    
   alert( obj.value.getName() );
   var testing = obj.value.getName; 
   alert(testing());

Answer 1

要理解这个问题，你必须了解 Javascript 如何在函数调用中设置this 的值。

这里有所有方法的总结：When you pass 'this' as an argument

对于您的特定情况，当您这样做时：

var testing = obj.value.getName; 

您现在有了对getName 函数的引用。您不再与obj.value 有任何联系。所以，test() 只是将getName 作为普通函数调用。在 Javascript 中进行普通函数调用时，this 的值要么是全局对象（在浏览器中为 window），要么在严格模式下是未定义的。

在你的例子中，this 变成了window 对象，所以this.name 是window.name，它指向全局变量name，因此你得到结果'George Thomas'。

事实上，如果你在strict模式下运行你的代码，它会导致一个错误，这实际上是严格模式的好处之一，它指出了这样的意外错误。

---

另一方面，如果你执行一个obj.method()形式的函数，那么this被设置为obj。所以，当你这样做时：

obj.value.getName()

相当于：

var o = obj.value;
o.getName()

这是调用函数的obj.method()形式，该函数会将this指针设置为对象，在本例中为obj.value。

---

可以通过多种方式解决此问题。这是使用.bind() 解决它的示例。

var name = 'Gerorge Thomas';
var obj = {
  name: 'Cinderella',
  value: {
    name: 'HocusPocus',
    getName: function() {
      return this.name;
    }
  }
};

document.write( obj.value.getName() + "<br>");
var testing = obj.value.getName.bind(obj.value); 
document.write(testing());

Answer 2

好吧，它只需要一些思考，让我们分析一下：

• 在第一个警报中，我们调用了getName() 方法 obj.value 对象所以它返回 obj.value.name 这是 "HocusPocus"。

alert( obj.value.getName() ); 我们称this.name 指的是obj.value 所以名字是HocusPocus

• 但在第二个警报中，我们正在创建一个新函数testing() 使用getName() 方法的主体，因此它将附加到 全局 window 对象，如果我们调用它，我们将获得全局 name 的值是 'Gerorge Thomas'。

alert(testing()); 我们正在处理this.name，其中this 指的是全局范围，因此名称是'Cinderella'。

Answer 3

首先，您从obj 对象内部调用一个方法。第二次，您正在全局范围内制作函数的副本（不是真的，它只是一个参考）。所以你也可以为第二次通话写window.testing()。我认为这很清楚。