关于this指代对象的问题
来源:2-6 计算器0-9数字显示代码优化(下)
懒惰的围脖
2024-02-09 20:44:38
function init(){ var num = document.getElementById('num'); num.value = 0; num.disabled = 'disabled'; // var n1 = document.getElementById('n1'); // n1.onclick = function(){ // alert('123'); // } var oButton = document.getElementsByTagName('input'); for(var i=0; i<oButton.length; i++){ //给对象赋予单击属性 oButton[i].onclick = function(){ //单击事件是哪个按钮this就是哪个按钮 //alert(this.value); if(isNumber(this.value)){ num.value = (num.value + this.value) * 1; } else{ alert('非数字') } } } } function isNumber(n){ return !isNaN(n); }
老师您好,我不是很理解this这个对象指代逻辑,只是很模糊的清楚在课程中的代码指代的是oButton[i]控件对象,不是很清楚他的指代逻辑以便与自己消化理解,请老师解答,谢谢!
1回答
同学,你好!this 关键字在事件处理函数中指代触发了当前事件的对象,也就是被点击的按钮。在循环中,通过 oButton[i].onclick 给每个按钮绑定了一个单击事件处理函数。当某个按钮被点击时,该函数中的 this 就指向被点击的按钮本身。
在这段代码中,通过 this.value 获取了被点击按钮的值,并进行了判断。如果按钮的值是一个数字,则将其添加到 num.value(表示一个输入框的值)中,并进行计算;否则,弹出一个提示,告诉用户该按钮的值不是一个数字。
简而言之,this 在这里用来引用当前的按钮对象,以便对其进行操作和获取属性值。
祝学习愉快~
相似问题