JavaScript初学者最容易犯的错误(一)

欢迎访问 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。

上面是一个绑定监听事件的情形。同样的错误还容易出现在对象中使用setTimeout，设置callback进行回调， 使用全局函数等地方。

在JavaScript使用prototype实现的继承体系中，this指针指向函数的调用者这一特性也是在基类中设计抽象方法的关键。比如用JavaScript实现一个模板模式，在当子类通过调用父类的接口使用到基类中的抽象方法时，调用者是子类，所以当执行到this.abstractMethod()时，如果子类中覆写了此方法有自己具体的实现，就会执行子类的方法。

对于这个容易出现的错误只要在写代码时注意到哪些方法是有对象自身调用的，哪些方法是由外部对象，或全局对象调用的就可以避免。

有时候遇到对象找不到，未定义，或取值出现不正常的情况也要检查一下是不是当前的this指针与你认为的大相径庭了！

2013-3-18 22:48:20