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

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

JavaScriptthis关键字指的是它所属的对象。根据使用位置的不同，它具有不同的值：在一个方法中，this指的是所有者对象。单独而言， this 指的是全局对象。在函数中，this指的是全局对象。在函数中，在严格模式下，this是未定义的。在事件中，this 指的是接收事件的元素。喜欢的方法call()，并apply()可以指this任何对象。

Answer 2

上面的代码不起作用，因为this是window您的情况下的对象。即使您在 HTML 中手动创建按钮，那么单击处理程序中的 this 也将是window对象。一个简单的经验法则：this将是调用函数的上下文的所有者。以下是上述假设的一个小演示以及正确的方法：function vTest(){&nbsp; &nbsp; console.log("this is same as window", this==window);}// Correct way to attach click event handlers to new elements.function validate(e){&nbsp; &nbsp; console.log("validating");&nbsp; &nbsp; if(e.target.checked)&nbsp; &nbsp; &nbsp; &nbsp; console.log('Checked');}window.addEventListener("load", function(){&nbsp; var aCheckbox = document.createElement("INPUT");&nbsp; aCheckbox.setAttribute('type', 'checkbox');&nbsp; aCheckbox.addEventListener('click', validate);&nbsp; document.body.append(aCheckbox);});<input type="checkbox" onclick="vTest()"></input><br>

Answer 3

我创建了一个示例，无需使用this. 它可能会有所帮助。<div id="app"></div>&nbsp; <p>checked boxes: <span id="checkedBoxes">0</span></p>&nbsp; <script>&nbsp; &nbsp; const getCheckedAmount = () => {&nbsp; &nbsp; &nbsp; const checkedBoxes = document&nbsp; &nbsp; &nbsp; &nbsp; .querySelectorAll('input[type="checkbox"]:checked');&nbsp; &nbsp; &nbsp; const amountOfCheckedBoxes = Array&nbsp; &nbsp; &nbsp; &nbsp; .from(checkedBoxes).length;&nbsp; &nbsp; &nbsp; document&nbsp; &nbsp; &nbsp; &nbsp; .querySelector('#checkedBoxes')&nbsp; &nbsp; &nbsp; &nbsp; .innerHTML = amountOfCheckedBoxes;&nbsp; &nbsp; };&nbsp; &nbsp; const addCheckBoxes = () => {&nbsp; &nbsp; &nbsp; const todoApp = document.querySelector("#app");&nbsp; &nbsp; &nbsp; const checkboxes = [1, 2, 3, 4, 5]&nbsp; &nbsp; &nbsp; &nbsp; .map(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; number =>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `<input type="checkbox" onclick="getCheckedAmount()">${number}</input>`&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; .join(" ");&nbsp; &nbsp; &nbsp; &nbsp; todoApp.innerHTML = `<div>${checkboxes}</div>`;&nbsp; &nbsp; };&nbsp; &nbsp; addCheckBoxes();&nbsp; </script>