欢迎访问 http://www.3body.tk/iblog

this指针的错误理解

在使用JavaScript做面向对象编程的时候，很多有基本面向对象概念的新手都会在不经意间将this指针指向了错误的位置而不自知。如下所示：

var Lily = function(id) {
    this.name = "lily";

    $("body").click(function() {
        $("#" + id).text(this.name + " is here!");
    });
}

上面的代码使用jquery的一些函数，本来的目的是在页面上点击时会在初始化Lily实例时传入的的元素上显示“lily is here”的文本。

但是如果运行这段代码你就会发现点击页面后显示的name为undefined，为什么this.name变成了未定义的变量呢？ 此处正是由于this指针指向的对象发生了变化。

在JavaScript中无论何时，函数里的this都是指向这个函数的调用者。所以当运行到onclick事件的时候，由于触发的函数是绑定给body的，所以此时的this是指向body这个对象的，而body中并没有定义name属性，就会显示undefined。