javascript/html 继承：对象的被调用方法无法访问此变量答案

【问题标题】：javascript/html inheritance: called method of an object can't access this variablesjavascript/html 继承：对象的被调用方法无法访问此变量
【发布时间】：2021-03-02 19:54:08
【问题描述】：

您好，首先我原谅自己的标题非常笼统，但老实说，如果不是这样，我不知道如何总结我的问题。我正在用 javascript 创建一个非常复杂的项目，这是一种我不太习惯使用的语言。我通常用 c/c++ 开发。我想将一个事件分配给一个 DOM 对象（在这个例子中是一个 id 为“test”的 div 元素）。有 2 个类 A 和 B。A 类的对象引用了 B 类的对象。我从 A 类添加事件。我预计有两种可能性：1）侦听器中的 this 指的是 div 元素，并且没有 objxxxx 属性； 2) this 指的是创建侦听器的对象，输出将为“0”。 Firefox 和 Chromium 调试器都显示 b.test() 已执行。并且 console.log 输出为“未定义”。怎么可能？

class A {
    objxxxx;
    constructor(obj) {
        this.objxxxx = obj;
    }
    create() {
        document.getElementById("test").addEventListener("click", this.objxxxx.test );
    }
}
class B {
    a;
    value;
    constructor() {
        this.value = 0;
        this.a = new A(this);
        this.a.create();
    }
    test() {
        console.log(this.value);
    }
}

let b = new B();

&lt;div id="test"&gt;click&lt;/div&gt;

【问题讨论】：

您好，您的第一个猜测是正确的。 div 也缺少 value 属性，这就是你得到 undefined 的原因。否则你会得到div DOM 元素。

标签： javascript html inheritance events

【解决方案1】：

你的 B 班有：

test() {
  console.log(this.value);
}

这里，this.value实际上是指实例的属性value A类。
如果你输入console.log("test")，它工作正常。
要解决您的问题，请尝试以下操作：

document.getElementById("test").addEventListener(
  "click", 
  this.objxxxx.test.bind(this.objxxxx) 
);

注意：代码未经测试。

【讨论】：

【解决方案2】：

虽然 jacob 的答案对于创建函数是正确的，但它不能回答代码中的 this 是什么，this 是指当前元素，这是因为没有类初始化并且因为元素是 div没有或不能使用.value

function test() {
  console.log(this);
  console.log(this.textContent);
  console.log(this.value);
}

document.getElementById("test").addEventListener("click", test);

&lt;div id="test"&gt;click&lt;/div&gt;

【讨论】：

【解决方案3】：

感谢所有回答的人。每个答案都为我指明了正确的方向，以找到正确的答案。

在 javascript 中，关键字“this”与它写入的对象无关，但它绑定到执行上下文。在我的问题中，正如 Jacob 写的那样，“this”的上下文是对象 A，因此不会找到“this.value”。我错误地认为关键字“this”确实可以作为 c/c++/java 引用对象的实例。在这种情况下，我需要使用 apply/call/bind 更改执行上下文。

【讨论】：