JavaScript 类和调用上下文

Question

谁能帮我解释为什么第一个示例有效，而第二个示例无效。

示例 1:

// Define a class
function Foo(name) {
  var self = this;

  this.name = name;
  this.greeting = function() {
    console.log('Hello ' + self.name);
  }
}

var foo = new Foo('foo');
foo.greeting();

var greeting = foo.greeting;
greeting();

输出:

Hello foo
Hello foo

例子2:

// Define a class
function Foo(name) {
  this.name = name;
}

// Greeting
Foo.prototype.greeting= function () {
  console.log('Hello ' + this.name);
}

var foo = new Foo('foo');
foo.greeting();

var greeting = foo.greeting;
greeting();

输出:

Hello foo
Hello undefined

我的猜测是因为第一个例子使用了闭包，所以它保留了对 name 局部变量的引用，但第二个例子不是，因为 greeting() 方法在没有对象上下文的情况下被调用，它默认为 undefined。

Answer 1

很多答案，都有有用且正确的信息，但没有一个能正确解释行为。

在您的第一个示例中，它两次只记录 Hello foo，因为您正在创建一个引用 this 对象的变量 self .该 self 变量随后在您的 greeting 函数 中关闭。因此，您可以随心所欲地调用该函数，它总是访问 self.name 而不是 this.name 所以它总是一样的。

您不会在您的原型(prototype) 示例中这样做。您可以在那里直接访问 this.name，然后调用函数的方式确实很重要(请参阅@lwburk 回答)。

再说一遍，即使你调用第一个例子

foo.greeting.call( window );

它仍然会访问关闭的 self 变量并记录 Hello foo。