为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();
    }
}

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

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';
        }
    }
}

结果：功能正常

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

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

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