HTML5学习日记2------------js类的学习

我想做的js类类似于java。单继承、多接口。

首先是生成一个借口对象。js自称是面向对象。那我们就建一个对象。所有的对象接口都会用这个对象完成。

var JSC = new Object();

第一步是实现一个底层类~。

JSC.bottomClass = function(){
    //底层类的创建
    //create the bottom of classes
    var b = function(){
        this.initialize.apply(this,arguments);
        return this;
    };
    b.prototype.__fuc__ = new Object;
    b.prototype.__var__ = new Object;
    b.prototype.__fuc__.initialize = function(){};
    b.prototype.initialize = b.prototype.__fuc__.initialize;
    b.prototype.__var__.__parent__ = undefined;
    b.prototype.__parent__ = b.prototype.__var__.__parent__;
    b.prototype.__var__.__type__ = "Class";
    b.prototype.__type__ = b.prototype.__var__.__type__;
    b.prototype.__fuc__.getSuper = function(){
        return this.__var__.__parent__;
    };
    b.prototype.__var__.__name__ = "Class_" + JSC.guidGenerator("S");
    b.prototype.__name__ = b.prototype.__var__.__name__;
    b.prototype.getSuper = b.prototype.__fuc__.getSuper;
    return b;
};

底层类类似与java的底层Object对象。底层类其实并不对外开放。开发时没必要调用他。

第二步是实现创建一个类对象。

JSC.createClass = function(a){
    //类的创建
    //create a class object
    var t = JSC.extend(JSC.bottomClass());
    //create the functions of the class 
    for(var v in a){
        if(typeof a[v] !== 'function') {
            t.prototype.__var__[v] = a[v];
            t.prototype[v] = t.prototype.__var__[v];
        } else {
            t.prototype.__fuc__[v] = a[v];
            t.prototype[v] = t.prototype.__fuc__[v];
        }
    }
    t.prototype.__var__.__name__ = "Class_" + JSC.guidGenerator("S");
    t.prototype.__name__ = t.prototype.__var__.__name__;
    return t;
};

这是主要函数。调用此函数来生成我们的类。首先他会生成一个继承于底层类的类。然后把a所有的变量和函数加入到该类中。

第三步是继承函数。

JSC.extend = function(a, b) {
    //类的继承
    //extend need a class
    if(!JSC.isJSClass(a)) {
        this.developalert("The parent object not a jsc class");
        return null;
    }
    //create a child class
    var c = JSC.clone(a);
    c.prototype.__var__.__parent__ = a.prototype;
    c.prototype.__parent__ = c.prototype.__var__.__parent__;
    for(var v in b){
        if(typeof b[v] !== 'function') {
            c.prototype.__var__[v] = b[v];
            c.prototype[v] = c.prototype.__var__[v];
        } else {
            c.prototype.__fuc__[v] = b[v];
            c.prototype[v] = c.prototype.__fuc__[v];
        }
    }
    c.prototype.__var__.__name__ = "Class_" + JSC.guidGenerator("S");
    c.prototype.__name__ = c.prototype.__var__.__name__;
    return c;
};

这是第二个主要函数。生成一个继承于a的类。然后把b的函数和变量加入到该类中。

第四步是克隆函数。

JSC.clone = function(a) {
    //clone a class
    if(!JSC.isJSClass(a)) {
        this.developalert("a not a jsc class");
        return null;
    }
    var c = JSC.bottomClass();
    for(var fuc in a.prototype.__fuc__){
        c.prototype.__fuc__[fuc] = a.prototype.__fuc__[fuc];
        c.prototype[fuc] = c.prototype.__fuc__[fuc];
    }
    for(var v in a.prototype.__var__){
        c.prototype.__var__[v] = a.prototype.__var__[v];
        c.prototype[v] = c.prototype.__var__[v];
    }
    return c;
};

这函数也不是对外开放的函数。这是根据js特性而写的。在继承函数中不能写var c = a; 为什么？这。。。

第五步是判断函数。

JSC.isJSClass = function(a) {
    if(typeof a!=='function' && a.prototype.__var__ === undefined && a.prototype.__fuc__ === undefined && a.prototype.__var__.__type__ !== 'Class') {
        return false;
    }
    return true;
}
 

这也是不对外开发的函数。判断a是否是由JSC生成创建出来的。仲感觉这么判断还是有很多漏洞。

最后是一个工具。

JSC.guidGenerator = function(type,split){
    var C4 = function () {
        //创建4位序列
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    };
    ttype = type;
    var a = typeof ttype;
    if(split !== 1) splitStr = "_";
    else splitStr = "-";
    if(typeof ttype !== "string") ttype = "D";
    switch(ttype.toLocaleUpperCase()){
    case "D":
        return (C4() + C4() + splitStr + C4() + splitStr + C4() + splitStr + C4() + splitStr + C4() + C4() + C4());
    case "S":
        return (C4() + C4() + C4() + C4() + C4() + C4() + C4() + C4());
    case "T":
        return (C4() + C4() + splitStr + C4() + C4() + splitStr + C4() + C4() + splitStr + C4() + C4());
    }
};

js文件：https://files.cnblogs.com/loveTechn/class.js

测试实例：https://files.cnblogs.com/loveTechn/test_myClass.js

下一步是对生成的实例进行操作。我发现有些操作是在生成实例之后的。