Question

在JavaScript中创建对象时，this似乎并未指向我正在创建的对象。

在下面的示例中，anArrayValue应该是"a"，但它被记录为undefined。

＆＃13;

const anArray = ['a', 'b', 'c'];

const anObject = {
  arrayIndex: 0,

  // I want to use anObject.arrayIndex here, but it's undefined
  anArrayValue: anArray[this.arrayIndex],

  log() {
    console.log(this.anArrayValue);
  }
};

//logs undefined
anObject.log();     

//logs 'a'
console.log(anArray[anObject.arrayIndex]);

＆＃13;

Answer 1

不，在对象构造期间这个不引用你所在的对象。如果这个对象不稳定且无法优化。但是，您只需移动arrayIndex之外的其他内容：

const anArray = ['a', 'b', 'c'], arrayIndex = 0;

const anObject = {
  arrayIndex,     
  anArrayValue: anArray[arrayIndex],

  log() {
    console.log(this.anArrayValue);
  }
};

Answer 2

this上下文无法在声明时使用。但是，您可以使用getter返回值，该值将在调用时执行（因此可以访问this）。

＆＃13;

    const anArray = ['a', 'b', 'c'];

    const anObject = {
      arrayIndex: 0,
      // Use a getter to execute the expression upon call
      get anArrayValue() { return anArray[this.arrayIndex] },
      log() {
        console.log(this.anArrayValue);
      }
    };
    anObject.log();
    //logs 'a'
    console.log(anArray[anObject.arrayIndex]);
    //logs 'a'

＆＃13;

Answer 3

问题在于this.arrayIndex并没有按照您的想法行事。

考虑这个例子：

＆＃13;

let parent = {
    a: ['parent a'],
    method() {
        let child = { a: ['child a'], b: this.a[0] };
        console.log(child.b);
    }
}

parent.method(); // Outputs 'parent a', not 'child a'
//^^^^           // <-- This decides that `this` is.

＆＃13;

当声明这样的对象时，唯一的时间this将引用您正在创建的对象，它是在分配给该对象的函数内部的时候。

要清楚，this始终引用包含您正在呼叫的功能的对象。这意味着如果您将method分配给另一个对象然后调用它，它将引用该新对象。

示例：

let newObject = { a: ['newObject a'], method: parent.method };
newObject.method(); // This outputs 'newObject a'

这种情况的例外是当您使用胖箭头（() =>）函数声明时，在这种情况下this继承自声明函数的作用域，无论函数从哪里调用。

Answer 4

＆＃39; this.arrayIndex＆＃39;实际上被解释为＆＃39; window.arrayIndex＆＃39; （这是指浏览器中的全局＆＃34;窗口＆＃34;对象。）

您可能希望在JavaScript控制台中尝试以下代码，不要将整个全局对象转储到StackOverflow片段中。

＆＃13;

const anArray = ['a', 'b', 'c'];
const anObject = {
      arrayIndex: 0,
      anArrayValue: anArray[(function(arg){console.log('this :', this); return arg.arrayIndex})(this)],
      log() {
        console.log(this.anArrayValue);
      }
    };

＆＃13;

除非明确创建，否则此全局对象显然没有任何arrayIndex属性：

＆＃13;

const anArray = ['a', 'b', 'c'];
arrayIndex = 0; // here we create the arrayIndex for the global object
const anObject = {
      arrayIndex: 0,
      anArrayValue: anArray[this.arrayIndex],
      log() {
        console.log(this.anArrayValue);
      }
    };

console.log("anObject.anArrayValue :", anObject.anArrayValue);

＆＃13;

另一方面，

log()是一个对象方法，因此this引用它所属的对象：

当一个函数作为一个对象的方法被调用时，它被设置为调用该方法的对象。

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

希望这有帮助！

Answer 5

＆＃34;这＆＃34;在函数调用的开头定义。在这里，你不是一个Objet的方法。您必须在声明对象之前存储该值。

const anArray = ['a', 'b', 'c'];

const DEFAULT_ARRAY_INDEX = 0;

const anObject = {
    arrayIndex: DEFAULT_ARRAY_INDEX,

    anArrayValue: anArray[DEFAULT_ARRAY_INDEX],

    log: function() {
        console.log(anObject.anArrayValue);
    }
};

anObject.log();     

console.log(anArray[anObject.arrayIndex]);

您还可以进行＆＃34;初始化＆＃34;方法。或者使用构造函数创建一个类。

对象声明中`this`的范围

5 个答案: