在对象字面量中使用 "this" - 现代 JavaScript 教程

这里函数 makeUser 返回一个对象。

访问它的 ref 的结果是什么？为什么？

          function makeUser() {
  return {
    name: "John",
    ref: this
  };
}

let user = makeUser();

alert( user.ref.name ); // What's the result?
        

答案：错误。

试试看

function makeUser() {
  return {
    name: "John",
    ref: this
  };
}

let user = makeUser();

alert( user.ref.name ); // Error: Cannot read property 'name' of undefined

这是因为设置 this 的规则不考虑对象定义。只有调用时刻才重要。

这里 makeUser() 内部的 this 的值为 undefined，因为它被调用为函数，而不是使用“点”语法作为方法。

this 的值对于整个函数来说是唯一的，代码块和对象字面量不会影响它。

所以 ref: this 实际上获取了函数当前的 this。

我们可以重写函数并用 undefined 值返回相同的 this

function makeUser(){
  return this; // this time there's no object literal
}

alert( makeUser().name ); // Error: Cannot read property 'name' of undefined

正如你所见，alert( makeUser().name ) 的结果与之前示例中 alert( user.ref.name ) 的结果相同。

以下是相反的情况

function makeUser() {
  return {
    name: "John",
    ref() {
      return this;
    }
  };
}

let user = makeUser();

alert( user.ref().name ); // John

现在它可以工作了，因为 user.ref() 是一个方法。而 this 的值被设置为点 . 之前的对象。