替dom添加点击事件，由此引发this指向的思考

为dom添加点击事件，由此引发this指向的思考

下午没有任务，闲来无事仿个小网页巩固下基础知识。由于公司安全规定，原网页截图不便上传(也没法上传)，回家后做了个简单的菜单以图示：替dom添加点击事件，由此引发this指向的思考

目标：点击某选项时，该选项底边加粗

1.首先定义click方法，然后在点击元素时调用该方法。('curr'类即红框内底边加粗效果)

var liElements = document.getElementsByClassName('headLi');
var addClick = function() {
    var currElement = document.getElementsByClassName('curr')[0];
    if (this !== currElement) {
        currElement.className = currElement.className.replace('curr', '');
        this.className = this.className + ' curr';
        console.log('this=' + this + 'currElement=' + currElement);
    }
}
for (var i = 0; i < liElements.length; i++) {
    liElements[i].onclick = function() {
        addClick();
    }
}

结果：加粗效果消失，第二次点击时控制台报错：

替dom添加点击事件，由此引发this指向的思考

2.在绑定事件时直接写点击事件的方法

var liElements = document.getElementsByClassName('headLi');
for (var i = 0; i < liElements.length; i++) {
    liElements[i].onclick = function() {
        var currElement = document.getElementsByClassName('curr')[0];
        console.log('this=' + this + 'currElement=' + currElement);
        if (this !== currElement) {
            currElement.className = currElement.className.replace('curr', '');
            this.className = this.className + ' curr';
        }
    }
}

结果：功能正常

替dom添加点击事件，由此引发this指向的思考

根据控制台可以看出，原因就在于this的指向：第一种方法中，this在“无所属对象的函数”中调用，指向了全局对象，第一次点击时，移除了元素的'curr'类，但没法为被点击的元素绑定'curr'，于是当第二次点击时，控制台报undefined，无法找到绑定'curr'类的元素。

而第二种方法中，this所在的方法属于liElements[i]对象，于是指向了被点击的元素，一切正常。

关于this的用法可以参考博客：http://www.cnblogs.com/nimojs/p/javascript-this.html

2楼仰望蓝天De蛙: 后来在论坛上看到有人this指向的问题，本想去回答，出于谨慎先跑了一遍对方的代码，发现自己理解有误，回过头看，文中就有理解错误的地方：第一处的this，大概更接近于’闭包中的this‘的情况，但是按链接的博客所说，大概应该指向的是listElement[i]？有点头晕，再研究下

1楼仰望蓝天De蛙: 仔细看了下链接的博客，确实应该属于#39;无所属对象的函数#39;，不删评论了，时刻提醒自己，言行谨慎，多看多想，切忌一知半解。勉

替dom添加点击事件，由此引发this指向的思考

相关推荐