关于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回答

好帮手慕小猿

2024-02-15

同学,你好!this 关键字在事件处理函数中指代触发了当前事件的对象,也就是被点击的按钮。在循环中,通过 oButton[i].onclick 给每个按钮绑定了一个单击事件处理函数。当某个按钮被点击时,该函数中的 this 就指向被点击的按钮本身。

在这段代码中,通过 this.value 获取了被点击按钮的值,并进行了判断。如果按钮的值是一个数字,则将其添加到 num.value(表示一个输入框的值)中,并进行计算;否则,弹出一个提示,告诉用户该按钮的值不是一个数字。

简而言之,this 在这里用来引用当前的按钮对象,以便对其进行操作和获取属性值。

祝学习愉快~

0

0 学习 · 4469 问题

查看课程