Question

我不知道为什么debug mode和run mode中的结果不同，有人可以说明为什么会这样吗？

目的：按下按钮，更改标签id的值

    var btnInst = document.getElementById("btnObj");
    btnInst.onclick = function func1() {
        console.log(this);
        this.value = "Another";
        this.type = "";
        this.id = "newID";
        console.log(this);
    };

<input type="button" value="BUTTON" id="btnObj"><br/>

在Chrome debug mode中，当按下按钮时，结果为：

<input type="" value="BUTTON" id="btnObj">

<input type="" value="Another" id="newID">

但是，在Chrome running mode中，结果是

<input type="" value="Another" id="newID">

Answer 1

在浏览器控制台中看到差异的原因是，控制台显示了input的“实时”版本。实时表示控制台在输入发生更改时实时显示更改（正在记录参考）。我会示范。

您的原始代码

    var btnInst = document.getElementById("btnObj");
    btnInst.onclick = function func1() {
        console.log(this);
        this.value = "Another";
        this.type = "";
        this.id = "newID";
        console.log(this);
    };

<input type="button" value="BUTTON" id="btnObj"><br/>

抓取属性，而不是引用“实时”输入

    var btnInst = document.getElementById("btnObj");
    btnInst.onclick = function func1() {
        console.log('value:', this.value, 'type:', this.type, 'id:', this.id);
        this.value = "Another";
        this.type = "";
        this.id = "newID";
        console.log('value:', this.value, 'type:', this.type, 'id:', this.id);
    };

<input type="button" value="BUTTON" id="btnObj"><br/>

使用此关键字时，为什么在调试和运行时输出不同的结果？

1 个答案: