js的对象继承-CSDN博客

js的对象继承有不少方法，在网上能够随便搜索到。我做了一下比较，以前我主要使用下面的方法：

lib.System.Element=function(id){
    var obj,Screen,thsEvent
    var mID=id
    this.id=function(value){if(value!=null){mID=value;this.__Init__();}else return mID};
    this.__Init__=function(){
        if(mID!=null)obj=document.getElementById(mID)
        else obj=document.body
    };
    //执行初始化操作
    this.__Init__();
    this.innerHTML=function(value){try{if(value!=null)obj.innerHTML=value;else return obj.innerHTML;}catch(e){return ""}}
    this.hWnd=obj;
};
var webui.prototype=new lib.System.Element

在调用webui对象时，就能完全继承lib.System.Element了。不过在实际使用时，我需要建立不同的对象，并继承到一个对象上，比如：

//html标签对象的基本定义
lib.System.Element=function(id){
    var obj,Screen,thsEvent
    var mID=id
    this.id=function(value){if(value!=null){mID=value;this.__Init__();}else return mID};
    this.__Init__=function(){
        if(mID!=null)obj=document.getElementById(mID)
        else obj=document.body
    };
    //执行初始化操作
    this.__Init__();
    this.innerHTML=function(value){try{if(value!=null)obj.innerHTML=value;else return obj.innerHTML;}catch(e){return ""}}
    this.hWnd=obj;
};
//定义事件
lib.System.Element.Event=function(oEle){
    var obj=oEle
    var fnclick
    this.click=function(value){if(value!=null){fnclick=value;System.AddEvent(obj,"click",fnclick);}else return fnclick}
}
//定义下层对象的管理
lib.System.Element.Items=function(obj){
    this.Add=function(tagname,classname){
        var o =document.createElement(tagname);
        o.className=classname;
        o.id=System.getid()
        obj.appendChild(o)
        return new lib.webui(o.id)
    }
    this.Remove=function(id){}
    this.AddCSS=function(href){
        var style=document.createElement("link");
        style.rel="stylesheet"; 
        style.type="text/css";
        style.href=href;
        obj.appendChild(style);
        return style;
    }
}
//定义位置
lib.System.Element.position=function(obj){
    var Screen=new lib.System.Browser()
    var mleft=0,mtop=0,mheight=Screen.width(),mwidth=Screen.height()
    this.left=function(value){if(value!=null){mleft=value;obj.style.left=value+"px";}else return mleft;}
    this.top=function(value){if(value!=null){mtop=value;obj.style.top=value+"px";}else return mtop;}
    this.width=function(value){if(value!=null){mwidth=value;obj.style.width=value+"px";}else return mwidth;}
    this.height=function(value){if(value!=null){mheight=value;obj.style.height=value+"px";}else return mheight;}
    this.move=function(left,top,width,height){this.left(left);this.top(top);this.width(width);this.height(height);}
    this.classname=function(value){if(value!=null){if(ths_class!=value){ths_class=value;obj.className=value;}}else return ths_class;}
}
//定义外观
lib.System.Element.ui=function(obj){
	var apperance=1;
	var visible=true;
	var transparent=false;
	var picture;var backcolor;
	obj.style.position = "absolute"; 
	obj.className="caption"
	var multiline=true;
	//multiline是否允许显示多行,TRUE允许,FALSE不允许
	this.multiline=function(value){if(value!=null){if(value)obj.style.overflow="auto";else obj.style.overflow="hidden";}else return multiline;}
	//apperance表示外观，值为0和1，0-Flat,1-3D-down,2-3D-UP
	this.apperance=function(value){if(value!=null){if(value==1){obj.className="down";posoffset=3;}else if(value==0){obj.className="";posoffset=0;}else if(value==2){obj.className="up";posoffset=3;}apperance=value;}else return apperance;}
	//transparent表示背景是否透明，值为True和False，True代表透明，False代表不透明
	this.transparent=function(value){if(value!=null){transparent=value;if(value)obj.style.background="";else obj.style.background=backcolor;}else return transparent;}
	//visible表示是否显示，值为True和False，True为显示，False代表不显示
	this.visible=function(value){if(value!=null){visible=value;if(visible==true)obj.style.display="block";else obj.style.display="none";}else return visible;}
	//设置背景图片，
	this.picture=function(value){if(value!=null){picutre=value;if(value=="") obj.style.backgroundImage="";else obj.style.backgroundImage="url("+value+")"}else return picture;}
	this.backcolor=function(value){if(value!=null){obj.style.background=value;backcolor=value;}else return backcolor;}
	this.text=function(value){if(value!=null){obj.innerHTML=value;}else return obj.innerHTML}
}

这样设计对象的好处是我能够单独维护每一种元素和场景，坏处是，这样我就不能使用prototype来继承了。所以，我采用了这样的方式：

lib.webui=function(webid){
    lib.System.Element.call(this,webid);
    lib.System.Element.Event.call(this,this.hWnd);
    lib.System.Element.Items.call(this,this.hWnd);
    lib.System.Element.position.call(this,this.hWnd);
    lib.System.Element.ui.call(this,this.hWnd);
}

这样，我就实现了多对象接口的继承。

转载于:https://my.oschina.net/u/2296951/blog/361989