參考:

• 構造函數的繼承

• 非構造函數的繼承

前面兩節(jié)主要學習javascript原型的基本語法和理論,這一章主要來聊聊,其他組件是怎么使用原型的

原生繼承

    var Window = function () {
        this.init.apply(this, arguments);
    }

    Window.prototype = {
        init: function (name) {
            this.type = this.getConstructor();
            this.name = name
        },
        getType: function () {
            return this.type;
        },
        getConstructor: function () {
            return 'Window';
        }
    }

    var Dialog = function () {
        Window.apply(this, arguments);//繼承構造器
    };
    Dialog.prototype = new Window();//繼承原型
    Dialog.prototype.getConstructor = function () {//擴展父類方法
        return 'Dialog';
    };
    var _window = new Window('window1');
    var _dialog = new Dialog('dialog2');

使用的是組合繼承,只不過多了一個init方法,在構造函數中調用調用init方法,實現構造函數的功能涮雷。

jquery中的原型使用

    function deepcopy(p, c) {
        var c = c || {};

        for (var i in p) {
            if (typeof p[i] == 'object') {
                c[i] = (p[i].constructor === Array ? [] : {});
                deepcopy(p[i], c[i]);
            } else {
                c[i] = p[i];
            }
        }
        return c;
    }

    function Super(){
    }
    Super.friends = ['小明'];

    var sub1= deepcopy(Super);
    var sub2= deepcopy(Super);

    sub1.friends.push('小華');
    console.log(sub1.friends);//[ '小明', '小華' ]
    console.log(sub2.friends);//[ '小明' ]

jquery采用的時深復制,來實現繼承

源碼:

    jQuery.extend = jQuery.fn.extend = function() {
        var options, name, src, copy, copyIsArray, clone,
            target = arguments[ 0 ] || {},
            i = 1,
            length = arguments.length,
            deep = false;

        // Handle a deep copy situation
        if ( typeof target === "boolean" ) {
            deep = target;

            // Skip the boolean and the target
            target = arguments[ i ] || {};
            i++;
        }

        // Handle case when target is a string or something (possible in deep copy)
        if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
            target = {};
        }

        // Extend jQuery itself if only one argument is passed
        if ( i === length ) {
            target = this;
            i--;
        }

        for ( ; i < length; i++ ) {

            // Only deal with non-null/undefined values
            if ( ( options = arguments[ i ] ) != null ) {

                // Extend the base object
                for ( name in options ) {
                    src = target[ name ];
                    copy = options[ name ];

                    // Prevent never-ending loop
                    if ( target === copy ) {
                        continue;
                    }

                    // Recurse if we're merging plain objects or arrays
                    if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
                        ( copyIsArray = jQuery.isArray( copy ) ) ) ) {

                        if ( copyIsArray ) {
                            copyIsArray = false;
                            clone = src && jQuery.isArray( src ) ? src : [];

                        } else {
                            clone = src && jQuery.isPlainObject( src ) ? src : {};
                        }

                        // Never move original objects, clone them
                        target[ name ] = jQuery.extend( deep, clone, copy );

                    // Don't bring in undefined values
                    } else if ( copy !== undefined ) {
                        target[ name ] = copy;
                    }
                }
            }
        }

        // Return the modified object
        return target;
    };

YUI繼承實現

    function extend(Child, Parent) {
        function F() {
        }

        F.prototype = Parent.prototype;
        Child.prototype = new F();
        Child.prototype.constructor.constructor = Child;
        return Child;
    }


    function Super() {
    }

    Super.prototype.type = "超類";

    function Sub(name) {
        this.name = name;
    }

    extend(Sub, Super);

    var sub = new Sub("sub");
    console.log(sub.name);//sub
    console.log(sub.type);//超類

Nodejs 繼承實現

示例

    var utils= require('util');

    function Animal(){}

    Animal.prototype.type ="動物";
    function Cat(){}
    utils.inherits(Cat,Animal);
    var cat1 = new Cat();
    var cat2 = new Cat();
    console.log(cat1.type);//動物
    cat2.__proto__.type = "貓";
    console.log(cat1.type);//貓

源碼

    exports.inherits = function(ctor, superCtor) {

      if (ctor === undefined || ctor === null)
        throw new TypeError('The constructor to `inherits` must not be ' +
                            'null or undefined.');

      if (superCtor === undefined || superCtor === null)
        throw new TypeError('The super constructor to `inherits` must not ' +
                            'be null or undefined.');

      if (superCtor.prototype === undefined)
        throw new TypeError('The super constructor to `inherits` must ' +
                            'have a prototype.');

      ctor.super_ = superCtor;
      ctor.prototype = Object.create(superCtor.prototype, {
        constructor: {
          value: ctor,
          enumerable: false,
          writable: true,
          configurable: true
        }
      });
    };

object.create用法