JavaScript面向对象编程

时间 2019-11-18

原文原文链接

Javascript是一个类C的语言，他的面向对象的东西相对于C++/Java比较奇怪，可是其的确至关的强大，在 Todd 同窗的“对象的消息模型”一文中咱们已经能够看到一些端倪了。这两天有个前同事总在问我Javascript面向对象的东西，因此，索性写篇文章让他看去吧，这里这篇文章主要想从一个总体的角度来讲明一下Javascript的面向对象的编程。（成文比较仓促，应该有不许确或是有误的地方，请你们批评指正）javascript

另，这篇文章主要基于 ECMAScript 5，旨在介绍新技术。关于兼容性的东西，请看最后一节。html

初探

咱们知道Javascript中的变量定义基本以下：java

 
        var 
        name =  
        'Chen Hao' 
        ;; 
       
 
        var 
        email =  
        'haoel(@)hotmail.com' 
        ; 
       
 
        var 
        website =  
        'http://coolshell.cn' 
        ; 
       

若是要用对象来写的话，就是下面这个样子：linux

 
        var 
        chenhao = { 
       
        name : 
        'Chen Hao' 
        , 
       
        email :  
        'haoel(@)hotmail.com' 
        , 
       
        website :  
        'http://coolshell.cn' 
       
        };

因而，我就能够这样访问：git

 
        //以成员的方式 
       
        chenhao.name; 
       
        chenhao.email; 
       
        chenhao.website; 
       
        //以hash map的方式 
       
        chenhao[ 
        "name" 
        ]; 
       
        chenhao[ 
        "email" 
        ]; 
       
        chenhao[ 
        "website" 
        ];

关于函数，咱们知道Javascript的函数是这样的：github

 
        var 
        doSomething =  
        function 
        (){ 
       
        alert( 
        'Hello World.' 
        ); 
       
        };

因而，咱们能够这么干：web

 
        var 
        sayHello =  
        function 
        (){ 
       
        var 
        hello =  
        "Hello, I'm " 
        +  
        this 
        .name 
       
        +  
        ", my email is: " 
        +  
        this 
        .email 
       
        +  
        ", my website is: " 
        +  
        this 
        .website; 
       
        alert(hello); 
       
        }; 
       
        //直接赋值，这里很像C/C++的函数指针 
       
        chenhao.Hello = sayHello; 
       
        chenhao.Hello();

相信这些东西都比较简单，你们都明白了。能够看到javascript对象函数是直接声明，直接赋值，直接就用了。runtime的动态语言。shell

还有一种比较规范的写法是：编程

 
        //咱们能够看到， 其用function来作class。 
       
        var 
        Person =  
        function 
        (name, email, website){ 
       
        this 
        .name = name; 
       
        this 
        .email = email; 
       
        this 
        .website = website; 
       
        this 
        .sayHello =  
        function 
        (){ 
       
        var 
        hello =  
        "Hello, I'm " 
        +  
        this 
        .name  +  
        ", \n" 
        + 
       
        "my email is: " 
        +  
        this 
        .email +  
        ", \n" 
        + 
       
        "my website is: " 
        +  
        this 
        .website; 
       
        alert(hello); 
       
        }; 
       
        }; 
       
        var 
        chenhao =  
        new 
        Person( 
        "Chen Hao" 
        ,  
        "haoel@hotmail.com" 
        , 
       
        "http://coolshell.cn" 
        ); 
       
        chenhao.sayHello();

顺便说一下，要删除对象的属性，很简单：数组

 
        delete 
        chenhao[ 
        'email' 
        ]

上面的这些例子，咱们能够看到这样几点：

Javascript的数据和成员封装很简单。没有类彻底是对象操做。纯动态！
Javascript function中的this指针很关键，若是没有的话，那就是局部变量或局部函数。
Javascript对象成员函数能够在使用时临时声明，并把一个全局函数直接赋过去就行了。
Javascript的成员函数能够在实例上进行修改，也就是说不一样实例相同函数名的行为不必定同样。

属性配置 – Object.defineProperty

先看下面的代码：

 
        //建立对象 
       
        var 
        chenhao = Object.create( 
        null 
        ); 
       
        //设置一个属性 
       
        Object.defineProperty( chenhao, 
       
        'name' 
        , { value:   
        'Chen Hao' 
        , 
       
        writable:      
        true 
        , 
       
        configurable:  
        true 
        , 
       
        enumerable:    
        true 
        }); 
       
        //设置多个属性 
       
        Object.defineProperties( chenhao, 
       
        { 
       
        'email'  
        : { value:   
        'haoel@hotmail.com' 
        , 
       
        writable:      
        true 
        , 
       
        configurable:  
        true 
        , 
       
        enumerable:    
        true 
        }, 
       
        'website' 
        : { value:  
        'http://coolshell.cn' 
        , 
       
        writable:      
        true 
        , 
       
        configurable:  
        true 
        , 
       
        enumerable:    
        true 
        } 
       
        } 
       
        );

下面就说说这些属性配置是什么意思。

writable：这个属性的值是否能够改。
configurable：这个属性的配置是否能够改。
enumerable：这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。
value：属性值。
get()/set(_value)：get和set访问器。

Get/Set 访问器

关于get/set访问器，它的意思就是用get/set来取代value（其不能和value一块儿使用），示例以下：

 
        var  
        age = 0; 
       
        Object.defineProperty( chenhao, 
       
        'age' 
        , { 
       
        get:  
        function 
        () { 
        return 
        age+1;}, 
       
        set:  
        function 
        (value) {age = value;} 
       
        enumerable :  
        true 
        , 
       
        configurable :  
        true 
       
        } 
       
        ); 
       
        chenhao.age = 100;  
        //调用set 
       
        alert(chenhao.age);  
        //调用get 输出101（get中+1了）;

咱们再看一个更为实用的例子——利用已有的属性(age)经过get和set构造新的属性(birth_year)：

 
        Object.defineProperty( chenhao, 
       
        'birth_year' 
        , 
       
        { 
       
        get:  
        function 
        () { 
       
        var 
        d =  
        new 
        Date(); 
       
        var 
        y = d.getFullYear(); 
       
        return 
        ( y -  
        this 
        .age ); 
       
        }, 
       
        set:  
        function 
        (year) { 
       
        var 
        d =  
        new 
        Date(); 
       
        var 
        y = d.getFullYear(); 
       
        this 
        .age = y - year; 
       
        } 
       
        } 
       
        ); 
       
        alert(chenhao.birth_year); 
       
        chenhao.birth_year = 2000; 
       
        alert(chenhao.age);

这样作好像有点麻烦，你说，我为何不写成下面这个样子：

 
        var 
        chenhao = { 
       
        name:  
        "Chen Hao" 
        , 
       
        email:  
        "haoel@hotmail.com" 
        , 
       
        website:  
        "http://coolshell.cn" 
        , 
       
        age: 100, 
       
        get birth_year() { 
       
        var 
        d =  
        new 
        Date(); 
       
        var 
        y = d.getFullYear(); 
       
        return 
        ( y -  
        this 
        .age ); 
       
        }, 
       
        set birth_year(year) { 
       
        var 
        d =  
        new 
        Date(); 
       
        var 
        y = d.getFullYear(); 
       
        this 
        .age = y - year; 
       
        } 
       
        }; 
       
        alert(chenhao.birth_year); 
       
        chenhao.birth_year = 2000; 
       
        alert(chenhao.age);

是的，你的确能够这样的，不过经过defineProperty()你能够干这些事：
1）设置如 writable，configurable，enumerable 等这类的属性配置。
2）动态地为一个对象加属性。好比：一些HTML的DOM对像。

查看对象属性配置

若是查看并管理对象的这些配置，下面有个程序能够输出对象的属性和配置等东西：

 
        //列出对象的属性. 
       
        function 
        listProperties(obj) 
       
        { 
       
        var 
        newLine =  
        "<br />" 
        ; 
       
        var 
        names = Object.getOwnPropertyNames(obj); 
       
        for 
        ( 
        var 
        i = 0; i < names.length; i++) { 
       
        var 
        prop = names[i]; 
       
        document.write(prop + newLine); 
       
        // 列出对象的属性配置（descriptor）动用getOwnPropertyDescriptor函数。 
       
        var 
        descriptor = Object.getOwnPropertyDescriptor(obj, prop); 
       
        for 
        ( 
        var 
        attr  
        in 
        descriptor) { 
       
        document.write( 
        "..." 
        + attr +  
        ': ' 
        + descriptor[attr]); 
       
        document.write(newLine); 
       
        } 
       
        document.write(newLine); 
       
        } 
       
        } 
       
        listProperties(chenhao);

call，apply， bind 和 this

关于Javascript的this指针，和C++/Java很相似。咱们来看个示例：（这个示例很简单了，我就很少说了）

 
        function 
        print(text){ 
       
        document.write( 
        this 
        .value +  
        ' - ' 
        + text+  
        '<br>' 
        ); 
       
        } 
       
        var 
        a = {value: 10, print : print}; 
       
        var 
        b = {value: 20, print : print}; 
       
        print( 
        'hello' 
        ); 
        // this => global, output "undefined - hello" 
       
        a.print( 
        'a' 
        ); 
        // this => a, output "10 - a" 
       
        b.print( 
        'b' 
        );  
        // this => b, output "20 - b" 
       
        a[ 
        'print' 
        ]( 
        'a' 
        );  
        // this => a, output "10 - a"

咱们再来看看call 和 apply，这两个函数的差异就是参数的样子不同，另外一个就是性能不同，apply的性能要差不少。（关于性能，可到 JSPerf 上去跑跑看看）

 
        print.call(a,  
        'a' 
        );  
        // this => a, output "10 - a" 
       
        print.call(b,  
        'b' 
        );  
        // this => b, output "20 - b" 
       
        print.apply(a, [ 
        'a' 
        ]);  
        // this => a, output "10 - a" 
       
        print.apply(b, [ 
        'b' 
        ]);  
        // this => b, output "20 - b"

可是在bind后，this指针，可能会有不同，可是由于Javascript是动态的。以下面的示例

 
        var 
        p = print.bind(a); 
       
        p( 
        'a' 
        );              
        // this => a, output "10 - a" 
       
        p.call(b,  
        'b' 
        );      
        // this => a, output "10 - b" 
       
        p.apply(b, [ 
        'b' 
        ]);   
        // this => a, output "10 - b"

继承和重载

经过上面的那些示例，咱们能够经过Object.create()来实际继承，请看下面的代码，Student继承于Object。

 
        var 
        Person = Object.create( 
        null 
        ); 
       
        Object.defineProperties 
       
        ( 
       
        Person, 
       
        { 
       
        'name'  
        : {  value:  
        'Chen Hao' 
        }, 
       
        'email'  
        : { value :  
        'haoel@hotmail.com' 
        }, 
       
        'website' 
        : { value:  
        'http://coolshell.cn' 
        } 
       
        } 
       
        ); 
       
        Person.sayHello =  
        function 
        () { 
       
        var 
        hello =  
        "<p>Hello, I am " 
        +  
        this 
        .name  +  
        ", <br>" 
        + 
       
        "my email is: " 
        +  
        this 
        .email +  
        ", <br>" 
        + 
       
        "my website is: " 
        +  
        this 
        .website; 
       
        document.write(hello +  
        "<br>" 
        ); 
       
        } 
       
        var 
        Student = Object.create(Person); 
       
        Student.no =  
        "1234567" 
        ;  
        //学号 
       
        Student.dept =  
        "Computer Science" 
        ;  
        //系 
       
        //使用Person的属性 
       
        document.write(Student.name +  
        ' ' 
        + Student.email +  
        ' ' 
        + Student.website + 
        '<br>' 
        ); 
       
        //使用Person的方法 
       
        Student.sayHello(); 
       
        //重载SayHello方法 
       
        Student.sayHello =  
        function 
        (person) { 
       
        var 
        hello =  
        "<p>Hello, I am " 
        +  
        this 
        .name  +  
        ", <br>" 
        + 
       
        "my email is: " 
        +  
        this 
        .email +  
        ", <br>" 
        + 
       
        "my website is: " 
        +  
        this 
        .website +  
        ", <br>" 
        + 
       
        "my student no is: " 
        +  
        this 
        . no +  
        ", <br>" 
        + 
       
        "my departent is: " 
        +  
        this 
        . dept; 
       
        document.write(hello +  
        '<br>' 
        ); 
       
        } 
       
        //再次调用 
       
        Student.sayHello(); 
       
        //查看Student的属性（只有 no 、 dept 和 重载了的sayHello） 
       
        document.write( 
        '<p>' 
        + Object.keys(Student) +  
        '<br>' 
        );

通用上面这个示例，咱们能够看到，Person里的属性并无被真正复制到了Student中来，可是咱们能够去存取。这是由于Javascript用委托实现了这一机制。其实，这就是Prototype，Person是Student的Prototype。

当咱们的代码须要一个属性的时候，Javascript的引擎会先看当前的这个对象中是否有这个属性，若是没有的话，就会查找他的Prototype对象是否有这个属性，一直继续下去，直到找到或是直到没有Prototype对象。

为了证实这个事，咱们可使用Object.getPrototypeOf()来检验一下：

 
        Student.name =  
        'aaa' 
        ; 
       
        //输出 aaa 
       
        document.write( 
        '<p>' 
        + Student.name +  
        '</p>' 
        ); 
       
        //输出 Chen Hao 
       
        document.write( 
        '<p>' 
        +Object.getPrototypeOf(Student).name +  
        '</p>' 
        );

因而，你还能够在子对象的函数里调用父对象的函数，就好像C++里的 Base::func() 同样。因而，咱们重载hello的方法就可使用父类的代码了，以下所示：

 
        //新版的重载SayHello方法 
       
        Student.sayHello =  
        function 
        (person) { 
       
        Object.getPrototypeOf( 
        this 
        ).sayHello.call( 
        this 
        ); 
       
        var 
        hello =  
        "my student no is: " 
        +  
        this 
        . no +  
        ", <br>" 
        + 
       
        "my departent is: " 
        +  
        this 
        . dept; 
       
        document.write(hello +  
        '<br>' 
        ); 
       
        }

这个很强大吧。

组合

上面的那个东西还不能知足咱们的要求，咱们可能但愿这些对象能真正的组合起来。为何要组合？由于咱们都知道是这是OO设计的最重要的东西。不过，这对于Javascript来并无支持得特别好，很差咱们依然能够搞定个事。

首先，咱们须要定义一个Composition的函数：（target是做用因而对象，source是源对象），下面这个代码仍是很简单的，就是把source里的属性一个一个拿出来而后定义到target中。

 
        function 
        Composition(target, source) 
       
        { 
       
        var 
        desc  = Object.getOwnPropertyDescriptor; 
       
        var 
        prop  = Object.getOwnPropertyNames; 
       
        var 
        def_prop = Object.defineProperty; 
       
        prop(source).forEach( 
       
        function 
        (key) { 
       
        def_prop(target, key, desc(source, key)) 
       
        } 
       
        ) 
       
        return 
        target; 
       
        }

有了这个函数之后，咱们就能够这来玩了：

 
        //艺术家 
       
        var 
        Artist = Object.create( 
        null 
        ); 
       
        Artist.sing =  
        function 
        () { 
       
        return 
        this 
        .name +  
        ' starts singing...' 
        ; 
       
        } 
       
        Artist.paint =  
        function 
        () { 
       
        return 
        this 
        .name +  
        ' starts painting...' 
        ; 
       
        } 
       
        //运动员 
       
        var 
        Sporter = Object.create( 
        null 
        ); 
       
        Sporter.run =  
        function 
        () { 
       
        return 
        this 
        .name +  
        ' starts running...' 
        ; 
       
        } 
       
        Sporter.swim =  
        function 
        () { 
       
        return 
        this 
        .name +  
        ' starts swimming...' 
        ; 
       
        } 
       
        Composition(Person, Artist); 
       
        document.write(Person.sing() +  
        '<br>' 
        ); 
       
        document.write(Person.paint() +  
        '<br>' 
        ); 
       
        Composition(Person, Sporter); 
       
        document.write(Person.run() +  
        '<br>' 
        ); 
       
        document.write(Person.swim() +  
        '<br>' 
        ); 
       
        //看看 Person中有什么？（输出：sayHello,sing,paint,swim,run） 
       
        document.write( 
        '<p>' 
        + Object.keys(Person) +  
        '<br>' 
        );

Prototype 和继承

咱们先来讲说Prototype。咱们先看下面的例程，这个例程不须要解释吧，很像C语言里的函数指针，在C语言里这样的东西见得多了。

 
        var 
        plus =  
        function 
        (x,y){ 
       
        document.write( x +  
        ' + ' 
        + y +  
        ' = ' 
        + (x+y) +  
        '<br>' 
        ); 
       
        return 
        x + y; 
       
        }; 
       
        var 
        minus =  
        function 
        (x,y){ 
       
        document.write(x +  
        ' - ' 
        + y +  
        ' = ' 
        + (x-y) +  
        '<br>' 
        ); 
       
        return 
        x - y; 
       
        }; 
       
        var 
        operations = { 
       
        '+' 
        : plus, 
       
        '-' 
        : minus 
       
        }; 
       
        var 
        calculate =  
        function 
        (x, y, operation){ 
       
        return 
        operations[operation](x, y); 
       
        }; 
       
        calculate(12, 4,  
        '+' 
        ); 
       
        calculate(24, 3,  
        '-' 
        );

那么，咱们能不能把这些东西封装起来呢，咱们须要使用prototype。看下面的示例：

 
        var 
        Cal =  
        function 
        (x, y){ 
       
        this 
        .x = x; 
       
        this 
        .y = y; 
       
        } 
       
        Cal.prototype.operations = { 
       
        '+' 
        :  
        function 
        (x, y) {  
        return 
        x+y;}, 
       
        '-' 
        :  
        function 
        (x, y) {  
        return 
        x-y;} 
       
        }; 
       
        Cal.prototype.calculate =  
        function 
        (operation){ 
       
        return 
        this 
        .operations[operation]( 
        this 
        .x,  
        this 
        .y); 
       
        }; 
       
        var 
        c =  
        new 
        Cal(4, 5); 
       
        c.calculate( 
        '+' 
        ); 
       
        c.calculate( 
        '-' 
        );

这就是prototype的用法，prototype 是javascript这个语言中最重要的内容。网上有太多的文章介始这个东西了。说白了，prototype就是对一对象进行扩展，其特色在于经过“复制”一个已经存在的实例来返回新的实例,而不是新建实例。被复制的实例就是咱们所称的“原型”，这个原型是可定制的（固然，这里没有真正的复制，实际只是委托）。上面的这个例子中，咱们扩展了实例Cal，让其有了一个operations的属性和一个calculate的方法。

这样，咱们能够经过这一特性来实现继承。还记得咱们最最前面的那个Person吧，下面的示例是建立一个Student来继承Person。

 
        function 
        Person(name, email, website){ 
       
        this 
        .name = name; 
       
        this 
        .email = email; 
       
        this 
        .website = website; 
       
        }; 
       
        Person.prototype.sayHello =  
        function 
        (){ 
       
        var 
        hello =  
        "Hello, I am " 
        +  
        this 
        .name  +  
        ", <br>" 
        + 
       
        "my email is: " 
        +  
        this 
        .email +  
        ", <br>" 
        + 
       
        "my website is: " 
        +  
        this 
        .website; 
       
        return 
        hello; 
       
        }; 
       
        function 
        Student(name, email, website, no, dept){ 
       
        var 
        proto = Object.getPrototypeOf; 
       
        proto(Student.prototype).constructor.call( 
        this 
        , name, email, website); 
       
        this 
        .no = no; 
       
        this 
        .dept = dept; 
       
        } 
       
        // 继承prototype 
       
        Student.prototype = Object.create(Person.prototype); 
       
        //重置构造函数 
       
        Student.prototype.constructor = Student; 
       
        //重载sayHello() 
       
        Student.prototype.sayHello =  
        function 
        (){ 
       
        var 
        proto = Object.getPrototypeOf; 
       
        var 
        hello = proto(Student.prototype).sayHello.call( 
        this 
        ) +  
        '<br>' 
        ; 
       
        hello +=  
        "my student no is: " 
        +  
        this 
        . no +  
        ", <br>" 
        + 
       
        "my departent is: " 
        +  
        this 
        . dept; 
       
        return 
        hello; 
       
        }; 
       
        var 
        me =  
        new 
        Student( 
       
        "Chen Hao" 
        , 
       
        "haoel@hotmail.com" 
        , 
       
        "http://coolshell.cn" 
        , 
       
        "12345678" 
        , 
       
        "Computer Science" 
       
        ); 
       
        document.write(me.sayHello());

兼容性

上面的这些代码并不必定能在全部的浏览器下都能运行，由于上面这些代码遵循 ECMAScript 5 的规范，关于ECMAScript 5 的浏览器兼容列表，你能够看这里“ES5浏览器兼容表”。

本文中的全部代码都在Chrome最新版中测试过了。

下面是一些函数，能够用在不兼容ES5的浏览器中：

Object.create()函数

 
        function 
        clone(proto) { 
       
        function 
        Dummy() { } 
       
        Dummy.prototype             = proto; 
       
        Dummy.prototype.constructor = Dummy; 
       
        return 
        new 
        Dummy();  
        //等价于Object.create(Person); 
       
        } 
       
        var 
        me = clone(Person);

defineProperty()函数

 
        function 
        defineProperty(target, key, descriptor) { 
       
        if 
        (descriptor.value){ 
       
        target[key] = descriptor.value; 
       
        } 
        else 
        { 
       
        descriptor.get && target.__defineGetter__(key, descriptor.get); 
       
        descriptor.set && target.__defineSetter__(key, descriptor.set); 
       
        } 
       
        return 
        target 
       
        }

keys()函数

 
        function 
        keys(object) {  
        var 
        result, key 
       
        result = []; 
       
        for 
        (key  
        in 
        object){ 
       
        if 
        (object.hasOwnProperty(key))  result.push(key) 
       
        } 
       
        return 
        result; 
       
        }

Object.getPrototypeOf() 函数

 
        function 
        proto(object) { 
       
        return 
        !object?                 
        null 
       
        :  
        '__proto__' 
        in 
        object?  object.__proto__ 
       
        :  
        /* not exposed? */      
        object.constructor.prototype 
       
        }

bind 函数

 
        var 
        slice = [].slice 
       
        function 
        bind(fn, bound_this) {  
        var 
        bound_args 
       
        bound_args = slice.call(arguments, 2) 
       
        return 
        function 
        () {  
        var 
        args 
       
        args = bound_args.concat(slice.call(arguments)) 
       
        return 
        fn.apply(bound_this, args) } 
       
        }

吐槽Javascript

初次接触Javascript，这门语言的确会让不少正规军感到诸多的不适，这种不适来自于Javascript的语法的简练和不严谨，这种不适也来自Javascript这个悲催的名称，我在想网景公司的Javascript设计者在给他起名称那天必定是脑袋进水了,让Javascript这么多年来受了这么多不白之冤，人们都认为他是Java的附属物，一个WEB玩具语言。所以才会有些人会对Javascript不屑，认为Javascript不是一门真正的语言，可是这此他们真的错了。Javascript不只是一门语言，是一门真真正正的语言，并且他仍是一门里程碑式的语言，他首创多种新的编程模式原型继承，闭包（做者注：闭包不是JS独创，应该Scheme独创，prototypal inheritance 和 dynamic objects 是self语言独创，Javascript的独创并不精彩,谢谢网友的指正。），对后来的动态语言产生了巨大的影响。作为当今最流行的语言（没有之一），看看git上提交的最多的语言类型就能明白。随着HTML5的登场，浏览器将在我的电脑上将大显身手，彻底有替换OS的趋势的时候，Javascript作为浏览器上的一门惟一真真的语言，如同C之于 unix/linux，java之于JVM，Cobol之于MainFrame，咱们也须要来从新的认真地认识和审视这门语言。另外Javascript的正式名称是：ECMAScript，这个名字明显比Javascript帅太多了！

言归正传，咱们切入主题——Javascript的面向对象编程。要谈Javascript的面向对象编程，咱们第一步要作的事情就是忘记咱们所学的面向对象编程。传统C++或Java的面向对象思惟来学习Javascript的面向对象会给你带来很多困惑，让咱们先忘记咱们所学的，重新开始学习这门特殊的面向对象编程。既然是OO编程，要如何来理解OO编程呢，记得之前学C++，学了好久都不入门，后来有幸读了《Inside The C++ Object Model》这本大做，顿时豁然开朗，所以本文也将以对象模型的方式来探讨的Javascript的OO编程。由于Javascript 对象模型的特殊性，因此使得Javascript的继承和传统的继承很是不同，同时也由于Javascript里面没有类，这意味着Javascript里面没有extends,implements。那么Javascript究竟是如何来实现OO编程的呢？好吧，让咱们开始吧，一块儿在Javascript的OO世界里来一次漫游

首先，咱们须要先看看Javascript如何定义一个对象。下面是咱们的一个对象定义：

 
        var 
        o = {};

还能够这样定义一个对象

 
        function 
        f() { 
       
        }

对，大家没有看错，在Javascript里面，函数也是对象。
固然还能够

 
        var 
        array1= [ 1,2,3];

数组也是一个对象。
其余关于对象的基本的概念的描述，仍是请各位亲们参见陈皓《Javascript 面向对象编程》文章。
对象都有了，惟一没有的就是class，由于在Javascript里面是没有class关键字的，算好还有function，function的存在让咱们能够变通的定义类，在扩展这个主题前，咱们还须要了解一个Javascript对象最重要的属性，__proto__成员。

proto成员

严格的说这个成员不该该叫这个名字，__proto__是Firefox中的称呼，__proto__只有在Firefox浏览器中才能被访问到。作为一个对象，当你访问其中的一个成员或方法的时候，若是这个对象中没有这个方法或成员，那么Javascript引擎将会访问这个对象的__proto__成员所指向的另外的一个对象，并在那个对象中查找指定的方法或成员，若是不能找到，那就会继续经过那个对象的__proto__成员指向的对象进行递归查找，直到这个链表结束。
好了，让咱们举一个例子。
好比上上面定义的数组对象array1。当咱们建立出array1这个对象的时候，array1实际在Javascript引擎中的对象模型以下：

array1对象具备一个length属性值为3，可是咱们能够经过以下的方法来为array1增长元素：

 
        array1.push(4);

push这个方法来自于array1的__proto__成员指向对象的一个方法(Array.prototye.push())。正是由于全部的数组对象（经过[]来建立的）都包含有一个指向同一个具备push,reverse等方法对象(Array.prototype)的__proto__成员，才使得这些数组对象可使用push,reverse等方法。

那么这个__proto__这个属性就至关于面向对象中的”has a”关系，这样的的话，只要咱们有一个模板对象好比Array.prototype这个对象，而后把其余的对象__proto__属性指向这个对象的话就完成了一种继承的模式。不错！咱们彻底能够这么干。可是别高兴的太早，这个属性只在FireFox中有效，其余的浏览器虽然也有属性，可是不能经过__proto__来访问，只能经过getPrototypeOf方法进行访问，并且这个属性是只读的。看来咱们要在Javascript实现继承并非很容易的事情啊。

函数对象prototype成员

首先咱们先来看一段函数prototype成员的定义，

When a function object is created, it is given a prototype member which is an object containing a constructor member which is a reference to the function object
当一个函数对象被建立时，这个函数对象就具备一个prototype成员，这个成员是一个对象，这个对象包含了一个构造子成员，这个构造子成员会指向这个函数对象。

例如：

 
        function 
        Base() { 
       
        this 
        .id =  
        "base" 
       
        }

Base这个函数对象就具备一个prototype成员，关于构造子其实Base函数对象自身，为何咱们将这类函数称为构造子呢？缘由是由于这类函数设计来和new 操做符一块儿使用的。为了和通常的函数对象有所区别，这类函数的首字母通常都大写。构造子的主要做用就是来建立一类类似的对象。

上面这段代码在Javascript引擎的对象模型是这样的

new 操做符

在有上面的基础概念的介绍以后，在加上new操做符，咱们就能完成传统面向对象的class + new的方式建立对象，在Javascript中，咱们将这类方式成为Pseudoclassical。
基于上面的例子，咱们执行以下代码

 
        var 
        obj =  
        new 
        Base();

这样代码的结果是什么，咱们在Javascript引擎中看到的对象模型是：

new操做符具体干了什么呢?其实很简单，就干了三件事情。

 
        var 
        obj  = {}; 
       
        obj.__proto__ = Base.prototype; 
       
        Base.call(obj);

第一行，咱们建立了一个空对象obj
第二行，咱们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
第三行，咱们将Base函数对象的this指针替换成obj，而后再调用Base函数，因而咱们就给obj对象赋值了一个id成员变量，这个成员变量的值是”base”，关于call函数的用法，请参看陈皓《Javascript 面向对象编程》文章
若是咱们给Base.prototype的对象添加一些函数会有什么效果呢？
例如代码以下：

 
        Base.prototype.toString =  
        function 
        () { 
       
        return 
        this 
        .id; 
       
        }

那么当咱们使用new建立一个新对象的时候，根据__proto__的特性，toString这个方法也能够作新对象的方法被访问到。因而咱们看到了：
构造子中，咱们来设置‘类’的成员变量（例如：例子中的id），构造子对象prototype中咱们来设置‘类’的公共方法。因而经过函数对象和Javascript特有的__proto__与prototype成员及new操做符，模拟出类和类实例化的效果。

Pseudoclassical 继承

咱们模拟类，那么继承又该怎么作呢？其实很简单，咱们只要将构造子的prototype指向父类便可。例如咱们设计一个Derive 类。以下

 
        function 
        Derive(id) { 
       
        this 
        .id = id; 
       
        } 
       
        Derive.prototype =  
        new 
        Base(); 
       
        Derive.prototype.test =  
        function 
        (id){ 
       
        return 
        this 
        .id === id; 
       
        } 
       
        var 
        newObj =  
        new 
        Derive( 
        "derive" 
        );

这段代码执行后的对象模型又是怎么样的呢？根据以前的推导，应该是以下的对象模型

这样咱们的newObj也继承了基类Base的toString方法，而且具备自身的成员id。关于这个对象模型是如何被推导出来的就留给各位同窗了，参照前面的描述，推导这个对象模型应该不难。
Pseudoclassical继承会让学过C++/Java的同窗略微的感觉到一点舒服，特别是new关键字，看到都特亲切，不过二者虽然类似，可是机理彻底不一样。固然不关什么样继承都是不能离不开__proto__成员的。

Prototypal继承

这是Javascript的另一种继承方式，这个继承也就是以前陈皓文章《Javascript 面向对象编程》中create函数，很是惋惜的是这个是ECMAScript V5的标准，支持V5的浏览器目前看来也就是IE9，Chrome最新版本和Firefox。虽然看着多，可是作为IE6的重灾区的中国，我建议各位仍是避免使用create函数。好在没有create函数以前，Javascript的使用者已经设计出了等同于这个函数的。例如：咱们看看Douglas Crockford的object函数。

 
        function 
        object(old) { 
       
        function 
        F() {}; 
       
        F.prototype = old; 
       
        return 
        new 
        F(); 
       
        } 
       
        var 
        newObj = object(oldObject);

例如以下代码段

 
        var 
        base ={ 
       
        id: 
        "base" 
        , 
       
        toString: 
        function 
        (){ 
       
        return 
        this 
        .id; 
       
        } 
       
        }; 
       
        var 
        derive = object(base);

上面函数的执行后的对象模型是：

如何造成这样的对象模型，原理也很简单，只要把object这个函数扩展一下，就能画出这个模型，怎么画留给读者本身去画吧。
这样的继承方式被称为原型继承。相对来讲要比Pseudoclassical继承来的简单方便。ECMAScript V5正是由于这缘由也才增长create函数，让开发者能够快速的实现原型继承。
上述两种继承方式是Javascript中最经常使用的继承方式。经过本文的讲解，你应该对Javascript的OO编程有了一些‘原理’级的了解了吧

参考:

《Prototypes and Inheritance in JavaScript Prototypes and Inheritance in JavaScript》
Advance Javascript （Douglas Crockford 大神的视频，必定要看啊）

参考

W3CSchool
MDN (Mozilla Developer Network)
MSDN (Microsoft Software Development Network)
Understanding Javascript OOP.
http://coolshell.cn/