用描写对象的特征来实现面向对象的JS设计 （JS 中级）

解决问题之前，我们要弄清楚问题是什么？那什么是面向对象？

定义我也就不讲了，我脑子里只是记得他的3个基本特征：

1. 封装： 程序中涉及的概念都必须要有一个对应的封装（对象）来解耦合。

2. 继承： 子类可以继承父类的方法。

2. 多态：我们的自己可以Override父类的的方法

基于上面的3个基本特征的认知，那么我们JS 怎么来实现呢？

封装：在javascript的世界里面，全部都是对象。包括primitive type 原始数据对象与Object 对象(封装出类型）

Primitive ：undefined、null、boolean、number和string

object :Array，Date,{} .....

print(typeof({}))
print(typeof(new Array()))

你可以看到输出的类型都是object.  那么我们要怎么在这些对象上实现封装？

JavaScript支持的封装创建的方法调用构造函数(constructor)，也就是new 某个Function.

/**
 * Created by velly on 2015/4/25.
 */
function print(msg){
    console.log(msg);
}
function Test(x ,y ,z){
    this. x = x;
    this.y = y;
    this.z = z;
}

var t = new Test("Hello", "good", "body");
print(t.constructor);
print(t.prototype);
print(t);
print(typeof(t.constructor));
print(typeof(t.constructor.prototype));


//out put

　//　[Function: Test]                                        [ref1]
　//　undefined 注意,t实例本身是没有prototype的哦，
　//　{ x: 'Hello', y: 'good', z: 'body' }
　//　function
　//　object                                                     [ref2]

　　

我们实现封装之后就需要实现继承了。

ECMA规定，每个Function的构造函数都执行Fucntion自己,如[ref1]。每个构造函数都有一个protoptye,如[ref2]，且默认继承 Prototype的所有属性包括函数与方法。

所以这就给我继承提供了实现方法： 如果函数的构造函数(constructor)指向自己，且构造函数的prototype指向父对象实例，那么父对象的所有属性都被继承了。 只是，如果需要一个父类的实例，那势必会带来实例化的字段的参数，这很别扭。本来是子类构造来完成所有参数实例化才对，凭什么prototype在创建时就要初始化某些属性呢？

我们的答案是“不！”，我不要你初始化，我只要你的字段和方法。我们需要做2件事：

1. 剥离参数的初始化。 所以我们需要加入init 方法（你叫其他方法也可以）。

2. 辨识是否现在是子类的初始化。所以我们在子类和父类的初始化过程中引入全局变量initializing. 如果为true，表示正在子类正在初始化父类，请不要进行初始化操作。

//global initializing filed , identify where should this constructor should call init.
initilizing= false;
function print(msg){
    console.log(msg)
}
function Rect(){
    print("Rect 构造 ------------ Start");
    if(!initilizing){
        print("需要Call init");
        this.init.apply(this,arguments);
    }else{
        print("不需要Call init: 在子类Call就好")
    }
    print("Rect 构造 ------------ End")
}

Rect.prototype.init = function(x, y ,w ,h){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
}

Rect.prototype.getArea = function (){
    return this.w * this.h
}

function Sprite(){
    print("Sprite 构造 ------------ Start");
    if(!initilizing){
        print("需要Call init");
        this.init.apply(this,arguments);
    }else{
        print("不需要Call init: 在子类Call就好");
    }
    print("Sprite 构造 ------------ End");
}

initilizing = true;
//don't call Rect init when use prototype to implement inheritance.
Sprite.prototype = new Rect()
Sprite.prototype.init = function(x, y ,w ,h, png){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.png = png
}
Sprite.prototype.getPng = function(){
    return this.png;
}
Sprite.prototype.constructor = Sprite
// why not typo as Sprite.constructor = Spite?
initilizing = false; //init parent done.

var s = new Sprite(0,0,2, 2,"~/sb.png");
print(s.getArea()); // call method from parent
print(s.getPng()); // call new method own

这时，我们看到继承已经实现了，那么就准备开始实现多态了。

多态就是要求子类有能力override父类的方法。 要实现override，那么我们必须要全局掌控Function 类型的创建(封装类型的创建)。需要什么样的封装，是我们这个方法说了算。那这个方法要干什么事呢？ 回到当初的问题，当然是创建3个基本特征：

1. 方法可以创建封装  2. 方法可以实现继承   3. 方法可以实现复写

知道要干什么了，那就是RD的事情了，如下是我的一个实现：

//global initializing filed , identify where should this constructor should call init.
initilizing= false;
function print(msg){
    console.log(msg)
}

// Create Constructor Function.
var jClass = function(baseClass, prop){
    if(typeof(baseClass) === "object"){
        //Not A New type.
        prop = baseClass;
        baseClass = null;
    }
    // def template. default call init(common)
    var ClsTemplate = function(){
        if(!initilizing){
            this.init.apply(this,arguments)
        }
    };

    //如果是子类，那么重定义Prototype和constructor矫正，contructor指向自己而不是父类，不然类型就错了。
    if(baseClass){
        initilizing = true;
        ClsTemplate.prototype = new baseClass();
        ClsTemplate.prototype.constructor = ClsTemplate;
        //顺便添加了一个_super的引用到prototype.
        ClsTemplate.prototype._super = baseClass.prototype;
        initilizing = false;
    }

    // implement Override
    for(var name in prop){
        print(name);
        if(prop.hasOwnProperty(name)) {
            ClsTemplate.prototype[name] = prop[name];
        }
    }
    return ClsTemplate;
}

　有了创建封装的方法，那就创建点实例试试：

var Rect = jClass({
    init:function(x,y,w,h){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    },
    getArea:function(){
        return this.h * this.w;
    }
});

var Sprite = jClass(Rect, {
    init:function(x, y ,w ,h, png){
        //this.x = x;
        //this.y = y;
        //this.w = w;
        //this.h = h;
        this._super.init.apply(this,[x, y ,w ,h])
        this.png = png;
    },
    getPng:function(){
        return this.png;
    }
});

var sprite = new Sprite(0,0,2,2, "~/sb.png");
print(sprite.getArea());
print(sprite.getPng());

// output

　　//init
　　//getArea
　　//init
　　//getPng
　　//4
　　//~/sb.png

至此为止，我们已经实现了Javascript 面向对象。 唯一的问题是我们怎么能在子类的方法里面Call 父类的方法呢？ 比如Java的super(), python的_super。

那现在的问题是如何Call 父类的方法？ 答案肯定是如果有继承关系，那么我们就在创建的封装中存储一个父类的引用。但是单纯的应用还不行，我们引用的父类方法，他也只是方法而已，要Call 这个方法，那真是丑：

 this._super.someMethod.apply(this, augment)  VS super(xx,xx) 真是差太多了.那么怎么办？

我们反过来想：

如果要实现this._super( xxx,xx ) ，我们看到2个特点：

1.  子类的自动有_super字段。（这个好实现，因为封装是我们创建，给返回的封装中加入_super属性即可）

2.  这个方法要怎么才能自动找到到？（如果一个方法在自己的属性中找不到，就会用Prototype的去找。哦也！我们把_super放在Prototype好了。）

3. 这个方法要怎么自动执行？（this.supper(xx),这个属性不能是Function，而必须是包庇方法（自己执行的方法）

//global initializing filed , identify where should this constructor should call init.
initilizing= false;
function print(msg){
    console.log(msg)
}

// Create Constructor Function.
var jClass = function(baseClass, prop){
    if(typeof(baseClass) === "object"){
        //Not A New type.
        prop = baseClass;
        baseClass = null;
    }
    // def template. default call init(common)
    var ClsTemplate = function(){
        if(!initilizing){
            this.init.apply(this,arguments)
        }
    };

    //如果是子类，那么重定义Prototype和constructor矫正
    if(baseClass){
        initilizing = true;
        ClsTemplate.prototype = new baseClass();
        ClsTemplate.prototype.constructor = ClsTemplate;
        //顺便添加了一个base的引用到prototype.
        ClsTemplate.prototype._super = baseClass.prototype;
        initilizing = false;
    }

    // implement Override
    for(var name in prop){
　　　　 //如果name属性是自己的，而不是prototype的。
        if(prop.hasOwnProperty(name)) {
            // 实现在子类中漂亮的调用父类函数
            //
            // 如果有父类，且父类(prototype)有这个函数，Sub的prop的方法中也有这个函数)
　　　　　　　// 那么我应该把子类的prototype中的这个函数做修改
            // 我修改函数，除了可以调自己外，还额外修正this._super函数指向父类函数以供调用
            if(baseClass && "function" === typeof (prop[name]) 
               && "function" === typeof (ClsTemplate.prototype[name])){
                //print(ClsTemplate.prototype);
                //print(baseClass.prototype);
                //ClsTemplate.prototype._super === baseClass.prototype
                ClsTemplate.prototype[name] = (function(name, fn){
                    return function(){
                        this._super = baseClass.prototype[name];
                        return fn.apply(this, arguments)
                    };
                })(name, prop[name]);
            }else{
                //用同名的prop属性替换掉Prototype的属性
                ClsTemplate.prototype[name] = prop[name];
            }
        }
    }
    return ClsTemplate;
};

var Rect = jClass({
    init:function(x,y,w,h){
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    },
    getArea:function(){
        print("Rect getArea");
        return this.h * this.w;
    }
});

var Sprite = jClass(Rect, {
    init:function(x, y ,w ,h, png){
        //this.x = x;
        //this.y = y;
        //this.w = w;
        //this.h = h;
        //this._super.init.apply(this,[x, y ,w ,h])
        //替代上下文环境：
        print(this)
        this._super(x, y ,w ,h);
        this.png = png;
    },
    getPng:function(){
        return this.png;
    },
    getArea:function(){
        print("Sprite getArea");
        return this._super();
        //return("Nothing")
    }
});

var sprite = new Sprite(0,0,2,2, "~/sb.png");
print(sprite.getArea());
print(sprite.getPng());


// output

　　//{ _super: [Function] }
　　//Sprite getArea
　　//Rect getArea
　　//4
　　//~/sb.png

我们Javascript 面向对象的实现也就到此结束了。

 

参考 http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html