javascript 函数范围访问 "this"

Question

我有以下示例代码。我试图在命名空间函数中获取 this.key 但它总是返回未定义，尽管我更改了函数调用或使用箭头方法等

class Sample {
  key = '';

  constructor(key) {
    this.key = key;
  }

  myNamespace = {
    saySomething: function(message) {
      console.log('message:', message);
      console.log('key:', this.key);
    }
  }

  getTheKey() {
    console.log('key', this.key);
  }
}


let sample = new Sample('thekey');
sample.myNamespace.saySomething('message'); // shows-> key: undefined
sample.getTheKey(); // shows-> key: thekey

Answer 1

“这个”指的是两个不同的东西。您的命名空间函数中的“this”没有键值，但您构造的“sample”有 - 您的 getTheKey 函数准确指向正确的“this”。

更具体地说，getTheKey 指向构造的样本为“this”，而 saySomething 中的函数指向 saySomething 为“this”。构建的样本有 key 的值，而 saySomething 没有。

您可以改用箭头函数，如下所示：

 myNamespace = {
    saySomething: (message) => {
      console.log('message:', message);
      console.log('key:', this.key);
    }

改为以您构建的样本为目标。

Answer 2

你的 myNamespace 属性的整个观点似乎不仅仅是有问题的，但如果你坚持并且仍然需要一个绑定到你的 class 实例的函数，只需 bind 构造函数中的函数，或使用没有自己的 this 的箭头函数，但保留 this 在定义时指向的任何内容：（代码示例演示了两者）：

class Sample {
  key = '';

  constructor(key) {
    this.key = key;
    this.myNamespace.saySomething = this.myNamespace.saySomething.bind(this);
  }

  myNamespace = {
    saySomething: function(message) {
      console.log('message:', message);
      console.log('key:', this.key);
    }
  }
  
  myOtherNamespace = {
    saySomething: (message) => {
      console.log('message:', message);
      console.log('key:', this.key);
    }
  }

  getTheKey() {
    console.log('key', this.key);
  }
}

let sample = new Sample('thekey');

sample.myNamespace.saySomething('message'); // shows-> key: thekey
sample.myOtherNamespace.saySomething('other message'); // shows-> key: thekey
sample.getTheKey(); // shows-> key: thekey

javascript 函数范围访问 "this"

javascript function scope accessing "this"

javascript

this