阮一峰的网络日志 Javascript继承机制的设计思想

以下是我关于js继承思考的结果及一个实例demo，附上一点总结。

基础：

1. js对象都有一个原型 prototype 对象 object.prototype 和原型对象的一个引用 constructor (是一个创建原型对象的实例方法的对象引用)，即构造函数。

2. 原型对象对属性及方法可以被引用

js继承基本思路：

1. 构造一个空的对象 function o(){}

2. 将对象 o 的原型引用指向 父对象的原型，对象o 获取了父对象原型的引用。

3. 将对象 o 的构造函数指向子对象（表示使用子对象的构造方法来初始化对象o），并将子对象的原型对象指向 对象 o，实现了对父对象的原型引用，并且可以实现子对象自己的原型方法。

4. 以下还使用了__super__来保留了对父类的原型对象引用，实现了重载父类原型方法。

var extend = function(child, parent) {
        // 复制父类的属性
        for (var key in parent) {
            if (hasProp.call(parent, key)) child[key] = parent[key];
        }

        // 创建一个空对象并将它的构造函数指向child
        function o() {
            this.constructor = child;
        }

        // 将空对象的prototype对象指向父对象的prototype对象，以此实现继承父类的prototype中的属性及方法
        o.prototype = parent.prototype;

        // 将子对象的prototype对象指向刚创建的空对象
        child.prototype = new o();

        // 获取父对象的公共方法，可实现重载
        child.__super__ = parent.prototype;

        return child;
    },
    hasProp = {}.hasOwnProperty;

var Face = (function() {
    function Face(x, y, z, l, h, w, type) {
        this.x = x;
        this.y = y;
        this.z = z;
        this.l = l;
        this.h = h;
        this.w = w;
        this.type = type;
        this.flag = 0;
        this.highlight = void 0;
    }
    Face.prototype.draw = function() {
        console.log("################# begin draw " + this.type + " ###################");
    }

    Face.prototype.get = function(name) {
        if (hasProp.call(this, name)) {
            return this[name];
        } else {
            return void 0;
        }
    }

    Face.prototype.set = function(prop, val) {
        this[prop] = val;
    }

    return Face;

})();

var FaceFront = (function(SuperClass) {
    extend(FaceFront, SuperClass);

    function FaceFront() {
        FaceFront.__super__.constructor.apply(this, arguments);
    }

    FaceFront.prototype.draw = function() {
        // 重载父类方法
        FaceFront.__super__.draw.apply(this, arguments);
        
        console.log("draw face front ");
        console.log("shape l: " + this.l + ", h:" + this.h + ", w:" + this.w);

        console.log("############### finished draw face front with type " + this.get('type')+" ####################");
    }

    return FaceFront;

})(Face);

var ff = new FaceFront(0, 0, 0, 100, 100, 100, 'R');
ff.draw();