Question

我了解this在对象上调用时的工作方式，但是我无法理解this在从“静态”上下文调用时的工作方式。

给出以下HTML：

<body onload="myOnLoad()">
    <div id="someDiv">0</div>
</body>

...和这个javascript：

function myOnLoad() {
    var inc = new Incrementer();
    /*** increase() works fine here, "this" refers to "inc" ***/
    inc.increase();
    inc.setOnClick();
}

function Incrementer() {
    this.value = 0;
}

Incrementer.prototype.setOnClick = function() {
    /*** increase fails to update someDiv when clicked.
         "this" is not "inc"   ***/
    document.getElementById("someDiv").onclick = this.increase;
}

Incrementer.prototype.increase = function() {
    document.getElementById("someDiv").innerHTML = ++this.value;
}

...点击someDiv将其innerHTML转换为NaN。我意识到这是因为onclick事件不知道inc的存在，但我不明白的是如何将'inc'传递给onclick事件。

你知道如何从onclick的上下文中访问inc的变量吗？或者，有更传统的方法吗？

我最感兴趣的是学习如何让someDiv点击这个特定的实例inc。

Answer 1

<activity android:name="com.androidbelieve.drawerwithswipetabs.BradClass" android:label="leagues"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>指的是被调用函数的上下文，例如在this setOnClick中，函数this.increase将在someDiv的上下文中调用，因此在这种情况下this.value将是未定义的。

试

document.getElementById("someDiv").onclick = this.increase.bind(this);

您可能希望从此处详细了解this的属性：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Answer 2

在事件处理程序中，this绑定到触发事件的元素。如果您想将其贴在this上，则需要使用.bind()，如下所示：

Incrementer.prototype.setOnClick = function() {
    document.getElementById("someDiv").onclick = this.increase.bind(this);
}

Answer 3

你可以尝试另一种方式。您可以避免使用属性 prototype 并在声明中将html元素传递给Incrementer：

function myOnLoad() {
    var inc = new Incrementer(document.getElementById("someDiv"));
}

function Incrementer(newElement) {
    var value = 0;
    var element = newElement;

    this.increase = function(){
        element.innerHTML = ++value;    
    }

    element.onclick = this.increase; 
}

在onclick事件的背景下，“this”如何工作？（JavaScript）的

3 个答案:

在onclick事件的背景下，“this”如何工作？ （JavaScript）的

3 个答案:

在onclick事件的背景下，“this”如何工作？（JavaScript）的