(this) 如何在这段代码中工作，javascript？

Question

我正在尝试将一个简单的 To Do 应用程序作为任务，在这段代码中，每次单击按钮时都会创建一个复选框，并且计数器会跟踪未选中的复选框，所以我做了一个简单的 if-else 语句。点击框减少未选中的计数器，反之亦然..我的问题是this，这里的代码我觉得它是合乎逻辑的，因为validate()它已经是复选框的一个属性，它不应该通过thisconst 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

JavaScriptthis关键字指的是它所属的对象。

根据使用位置的不同，它具有不同的值：

在一个方法中，this指的是所有者对象。单独而言， this 指的是全局对象。
在函数中，this指的是全局对象。
在函数中，在严格模式下，this是未定义的。
在事件中，this 指的是接收事件的元素。
喜欢的方法call()，并apply()可以指this任何对象。

Answer 2

上面的代码不起作用，因为this是window您的情况下的对象。即使您在 HTML 中手动创建按钮，那么单击处理程序中的 this 也将是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>