javascript.txt

悟JavaScript 要理解JavaScript

    BillGates.SayHello();   //通过BillGates对象直接调用到SayHello方法 
    SteveJobs.SayHello();   //通过SteveJobs对象直接调用到SayHello方法 

    alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello，所以显示：true 
    程序运行的结果表明，构造函数的prototype上定义的方法确实可以通过对象直接调用到，而且代码是共享的。显然，把方法设置到prototype的写法显得优雅多了，尽管调用形式没有变，但逻辑上却体现了方法与类的关系，相对前面的写法，更容易理解和组织代码。 

    那么，对于多层次类型的构造函数情况又如何呢？ 

    我们再来看下面的代码： 
1     function Person(name)   //基类构造函数 
2     { 
3         this.name = name; 
4     }; 
5     
6     Person.prototype.SayHello = function()  //给基类构造函数的prototype添加方法 
7     { 
8         alert("Hello, I'm " + this.name); 
9     }; 
10     
11     function Employee(name, salary) //子类构造函数 
12     { 
13         Person.call(this, name);    //调用基类构造函数 
14         this.salary = salary; 
15     }; 
16     
17     Employee.prototype = new Person();  //建一个基类的对象作为子类原型的原型，这里很有意思 
18     
19     Employee.prototype.ShowMeTheMoney = function()  //给子类添构造函数的prototype添加方法 
20     { 
21         alert(this.name + " $" + this.salary); 
22     }; 
23 
24     var BillGates = new Person("Bill Gates");   //创建基类Person的BillGates对象 
25     var SteveJobs = new Employee("Steve Jobs", 1234);   //创建子类Employee的SteveJobs对象 
26 
27     BillGates.SayHello();       //通过对象直接调用到prototype的方法 
28     SteveJobs.SayHello();       //通过子类对象直接调用基类prototype的方法，关注！ 
29     SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类prototype的方法 
30 
31     alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true，表明prototype的方法是共享的 
    这段代码的第17行，构造了一个基类的对象，并将其设为子类构造函数的prototype，这是很有意思的。这样做的目的就是为了第28行，通过子类对象也可以直接调用基类prototype的方法。为什么可以这样呢？ 

    原来，在JavaScript中，prototype不但能让对象共享自己财富，而且prototype还有寻根问祖的天性，从而使得先辈们的遗产可以代代相传。当从一个对象那里读取属性或调用方法时，如果该对象自身不存在这样的属性或方法，就会去自己关联的prototype对象那里寻找；如果prototype没有，又会去prototype自己关联的前辈prototype那里寻找，直到找到或追溯过程结束为止。 

    在JavaScript内部，对象的属性和方法追溯机制是通过所谓的prototype链来实现的。当用new操作符构造对象时，也会同时将构造函数的prototype对象指派给新创建的对象，成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的，尽管有些浏览器(如Firefox)可以让我们访问这个内置原型对象，但并不建议这样做。内置的原型对象本身也是对象，也有自己关联的原型对象，这样就形成了所谓的原型链。 

    在原型链的最末端，就是Object构造函数prototype属性指向的那一个原型对象。这个原型对象是所有对象的最老祖先，这个老祖宗实现了诸如toString等所有对象天生就该具有的方法。其他内置构造函数，如Function, Boolean, String, Date和RegExp等的prototype都是从这个老祖宗传承下来的，但他们各自又定义了自身的属性和方法，从而他们的子孙就表现出各自宗族的那些特征。 

    这不就是“继承”吗？是的，这就是“继承”，是JavaScript特有的“原型继承”。 

    “原型继承”是慈祥而又严厉的。原形对象将自己的属性和方法无私地贡献给孩子们使用，也并不强迫孩子们必须遵从，允许一些顽皮孩子按自己的兴趣和爱好独立行事。从这点上看，原型对象是一位慈祥的母亲。然而，任何一个孩子虽然可以我行我素，但却不能动原型对象既有的财产，因为那可能会影响到其他孩子的利益。从这一点上看，原型对象又象一位严厉的父亲。我们来看看下面的代码就可以理解这个意思了： 
    function Person(name) 
    { 
        this.name = name; 
    }; 
    
    Person.prototype.company = "Microsoft"; //原型的属性 
    
    Person.prototype.SayHello = function()  //原型的方法 
    { 
        alert("Hello, I'm " + this.name + " of " + this.company); 
    }; 
    
    var BillGates = new Person("Bill Gates"); 
    BillGates.SayHello();   //由于继承了原型的东西，规规矩矩输出：Hello, I'm Bill Gates 
    
    var SteveJobs = new Person("Steve Jobs"); 
    SteveJobs.company = "Apple";    //设置自己的company属性，掩盖了原型的company属性 
    SteveJobs.SayHello = function() //实现了自己的SayHello方法，掩盖了原型的SayHello方法 
    { 
        alert("Hi, " + this.name + " like " + this.company + ", ha ha ha "); 
    }; 

    SteveJobs.SayHello();   //都是自己覆盖的属性和方法，输出：Hi, Steve Jobs like Apple, ha ha ha 
    
    BillGates.SayHello();   //SteveJobs的覆盖没有影响原型对象，BillGates还是按老样子输出 
    对象可以掩盖原型对象的那些属性和方法，一个构造函数原型对象也可以掩盖上层构造函数原型对象既有的属性和方法。这种掩盖其实只是在对象自己身上创建了新的属性和方法，只不过这些属性和方法与原型对象的那些同名而已。JavaScript就是用这简单的掩盖机制实现了对象的“多态”性，与静态对象语言的虚函数和重载(override)概念不谋而合。 

    然而，比静态对象语言更神奇的是，我们可以随时给原型对象动态添加新的属性和方法，从而动态地扩展基类的功能特性。这在静态对象语言中是很难想象的。我们来看下面的代码： 
    function Person(name) 
    { 
        this.name = name; 
    }; 
    
    Person.prototype.SayHello = function()  //建立对象前定义的方法 
    { 
        alert("Hello, I'm " + this.name); 
    }; 
    
    var BillGates = new Person("Bill Gates");   //建立对象 
    
    BillGates.SayHello(); 
    
    Person.prototype.Retire = function()    //建立对象后再动态扩展原型的方法 
    { 
        alert("Poor " + this.name + ", bye bye!"); 
    }; 
    
    BillGates.Retire(); //动态扩展的方法即可被先前建立的对象立即调用 
    阿弥佗佛，原型继承竟然可以玩出有这样的法术！ 

原型扩展 

    想必君的悟性极高，可能你会这样想：如果在JavaScript内置的那些如Object和Function等函数的prototype上添加些新的方法和属性，是不是就能扩展JavaScript的功能呢？ 

    那么，恭喜你，你得到了！ 

    在AJAX技术迅猛发展的今天，许多成功的AJAX项目的JavaScript运行库都大量扩展了内置函数的prototype功能。比如微软的ASP.NET AJAX，就给这些内置函数及其prototype添加了大量的新特性，从而增强了JavaScript的功能。 

    我们来看一段摘自MicrosoftAjax.debug.js中的代码： 

String.prototype.trim = function String$trim() { 
    if (arguments.length !== 0) throw Error.parameterCount(); 
    return this.replace(/^\s+|\s+$/g, ''); 
} 
    这段代码就是给内置String函数的prototype扩展了一个trim方法，于是所有的String类对象都有了trim方法了。有了这个扩展，今后要去除字符串两段的空白，就不用再分别处理了，因为任何字符串都有了这个扩展功能，只要调用即可，真的很方便。 

    当然，几乎很少有人去给Object的prototype添加方法，因为那会影响到所有的对象，除非在你的架构中这种方法的确是所有对象都需要的。 

    前两年，微软在设计AJAX类库的初期，用了一种被称为“闭包”(closure)的技术来模拟“类”。其大致模型如下： 
    function Person(firstName, lastName, age) 
    { 
        //私有变量： 
        var _firstName = firstName; 
        var _lastName = lastName; 

        //公共变量: 
        this.age = age; 

        //方法： 
        this.getName = function() 
        { 
            return(firstName + " " + lastName); 
        }; 
        this.SayHello = function() 
        { 
            alert("Hello, I'm " + firstName + " " + lastName); 
        }; 
    }; 
    
    var BillGates = new Person("Bill", "Gates", 53); 
    var SteveJobs = new Person("Steve", "Jobs", 53); 
    
    BillGates.SayHello(); 
    SteveJobs.SayHello(); 
    alert(BillGates.getName() + " " + BillGates.age); 
    alert(BillGates.firstName);     //这里不能访问到私有变量 
    很显然，这种模型的类描述特别象C#语言的描述形式，在一个构造函数里依次定义了私有成员、公共属性和可用的方法，显得非常优雅嘛。特别是“闭包”机制可以模拟对私有成员的保护机制，做得非常漂亮。 

    所谓的“闭包”，就是在构造函数体内定义另外的函数作为目标对象的方法函数，而这个对象的方法函数反过来引用外层外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法，就能间接保持原构造函数体当时用到的临时变量值。尽管最开始的构造函数调用已经结束，临时变量的名称也都消失了，但在目标对象的方法内却始终能引用到该变量的值，而且该值只能通这种方法来访问。即使再次调用相同的构造函数，但只会生成新对象和方法，新的临时变量只是对应新的值，和上次那次调用的是各自独立的。的确很巧妙！ 

    但是前面我们说过，给每一个对象设置一份方法是一种很大的浪费。还有，“闭包”这种间接保持变量值的机制，往往会给JavaSript的垃圾回收器制造难题。特别是遇到对象间复杂的循环引用时，垃圾回收的判断逻辑非常复杂。无独有偶，IE浏览器早期版本确实存在JavaSript垃圾回收方面的内存泄漏问题。再加上“闭包”模型在性能测试方面的表现不佳，微软最终放弃了“闭包”模型，而改用“原型”模型。正所谓“有得必有失”嘛。 

    原型模型需要一个构造函数来定义对象的成员，而方法却依附在该构造函数的原型上。大致写法如下： 
    //定义构造函数 
    function Person(name) 
    { 
        this.name = name;   //在构造函数中定义成员 
    }; 
    
    //方法定义到构造函数的prototype上 
    Person.prototype.SayHello = function() 
    { 
        alert("Hello, I'm " + this.name); 
    };    
    
    //子类构造函数 
    function Employee(name, salary) 
    { 
        Person.call(this, name);    //调用上层构造函数 
        this.salary = salary;       //扩展的成员 
    }; 
    
    //子类构造函数首先需要用上层构造函数来建立prototype对象，实现继承的概念 
    Employee.prototype = new Person()   //只需要其prototype的方法，此对象的成员没有任何意义！ 
    
    //子类方法也定义到构造函数之上 
    Employee.prototype.ShowMeTheMoney = function() 
    { 
        alert(this.name + " $" + this.salary); 
    }; 
    
    var BillGates = new Person("Bill Gates"); 
    BillGates.SayHello();    
    
    var SteveJobs = new Employee("Steve Jobs", 1234); 
    SteveJobs.SayHello(); 
    SteveJobs.ShowMeTheMoney(); 
    原型类模型虽然不能模拟真正的私有变量，而且也要分两部分来定义类，显得不怎么“优雅”。不过，对象间的方法是共享的，不会遇到垃圾回收问题，而且性能优于“闭包”模型。正所谓“有失必有得”嘛。