如何解决在函数调用时出现的"this"关键字未定义的变量问题？

Question

我想要运行这段代码，但是在第二个console.log语句中输出的是undefined，而不是期望的“Oracle”。我尝试通过变量retrieveName引用全局变量this以及函数来调用它。

this.name = "Oracle";
var website = {
  name: "Java",
  getName: function () {
    return this.name;
  },
};

console.log(website.getName()); // 输出：Java

var retrieveName = website.getName; // 获取getName函数引用
console.log(retrieveName()); // 期望输出：Oracle，但实际上输出：undefined

var boundGetName = retrieveName.bind(website);
console.log(boundGetName()); // 输出：Java

Adam Davis · Answer

我之前在Node.js环境中运行这段代码，因此在访问全局变量时似乎遇到了错误。现在我将其设置为“Sloppy模式”（非严格模式）运行后，问题就解决了。

BrunoLM · Answer

这段代码的意义在于展示在JavaScript中函数内部this关键字指向的不同情况，以及如何通过.bind()方法来确保函数上下文的正确性。

var website = {
  name: "Java",
  getName: function () {
    return this.name;
  },
};

console.log(website.getName()); // 输出：Java

// 这里我们不是仅仅获取getName函数的引用，而是调用了该函数并将返回值赋给retrieveName
var retrieveName = website.getName(); //
console.log(retrieveName); // 输出：Java（因为getName()返回的是"Java"）

// 修改对象website的name属性值
website.name = 'Oracle';

// 使用.bind()方法创建一个新的函数boundGetName，确保其内部的this始终指向website对象
var boundGetName = website.getName.bind(website);
console.log(boundGetName()); // 输出：Oracle（因为此时website.name已经是'Oracle'）

正如您所指出的，在对象外部直接设置this.name是不正确的this用法。