Question

我正在尝试制作一个简单的To Do应用作为任务，在此代码中，每次单击按钮时都会创建一个复选框，并且计数器会跟踪未选中的复选框，因此我做了一个简单的if-else语句。。如果单击此框，请减少未选中的计数器，反之亦然。.我的问题是this，这里的代码我认为是合乎逻辑的，因为validate()已经是复选框不应该具有的属性通过this

const aCheckbox = document.createElement("INPUT");
aCheckbox.setAttribute('type', 'checkbox');
aCheckbox.setAttribute('onclick', 'validate()');

function validate() {
    if(this.checked) {
        console.log('Checked');
    }
}

上面的代码不起作用，我尝试了下面的代码，它确实起作用，不同之处在于，在调用第一个代码this的同时调用validate()时传递了this是在validate()中调用的，那么即使在复选框中调用了该函数，为什么第一个代码也无法正常工作？

const aCheckbox = document.createElement("INPUT");
aCheckbox.setAttribute('type', 'checkbox');
aCheckbox.setAttribute('onclick', 'validate(this)');

function validate(x){
    if(x.checked){
        console.log('Checked');
    }
}

Answer 1

JavaScript this关键字引用它所属的对象。

根据使用位置的不同，其值也不同：

在方法中，this引用所有者对象。单独地，这指的是全局对象。
在函数中，this引用全局对象。
在函数中，在严格模式下，this是未定义的。
在事件中，this是指接收事件的元素。
call()和apply()之类的方法可以将this引用到任何对象。

Answer 2

上面的代码不起作用，因为在您的情况下this是window对象。即使您以HTML手动创建了按钮，点击处理程序中的按钮也仍然是window对象。

一个简单的经验法则：this是调用该函数的上下文的所有者。

以下是上述假设的一个简短演示，以及执行此操作的正确方法：

function vTest(){
    console.log("this is same as window", this==window);
}

// Correct way to attach click event handlers to new elements.
function validate(e){
    console.log("validating");
    if(e.target.checked)
        console.log('Checked');
}

window.addEventListener("load", function(){
  var aCheckbox = document.createElement("INPUT");
  aCheckbox.setAttribute('type', 'checkbox');
  aCheckbox.addEventListener('click', validate);
  document.body.append(aCheckbox);
});

<input type="checkbox" onclick="vTest()"></input><br>

`

Answer 3

我创建了一个示例，而无需使用this。可能会有帮助。

<div id="app"></div>
  <p>checked boxes: <span id="checkedBoxes">0</span></p>
  <script>
    const getCheckedAmount = () => {
      const checkedBoxes = document
        .querySelectorAll('input[type="checkbox"]:checked');

      const amountOfCheckedBoxes = Array
        .from(checkedBoxes).length;

      document
        .querySelector('#checkedBoxes')
        .innerHTML = amountOfCheckedBoxes;
    };

    const addCheckBoxes = () => {
      const todoApp = document.querySelector("#app");

      const checkboxes = [1, 2, 3, 4, 5]
        .map(
          number =>
            `<input type="checkbox" onclick="getCheckedAmount()">${number}</input>`
        )
        .join(" ");

        todoApp.innerHTML = `<div>${checkboxes}</div>`;
    };

    addCheckBoxes();
  </script>

{this}如何在javascript代码中起作用？

3 个答案: