首页 > 技术文章 > JS重载与继承

-1212huan 2017-11-29 10:14 原文

1、JS重载(个数不同,类型不同)

//设置单个P标签的单个样式
function prop(name,value){
	var firstP = document.getElementById("p1");
	firstP.style[name] = value;
}
prop("color","green");
prop("fontSize","38px");

  

//设置单个P标签的多个样式
function myProp(){
	var firstP = document.getElementById("p1");
	if(arguments.length == 1){
		var temp = arguments[0];
		for(p in temp){
			firstP.style[p] = temp[p];
		}
	}else if(arguments.length == 2){
		firstP.style[arguments[0]] = arguments[1];
	}
}
myProp({
	color : "green",
	fontSize : "38px"
});

  

//设置多个相同标签的多个样式
function Prop(){
	var allP = document.getElementsByTagName("p");
	for(var i = 0; i < allP.length; i++){
		if(arguments.length == 1){
			var temp = arguments[0];
			if(allP instanceof Object){	
				for(p in temp){
					allP[i].style[p] = temp[p];
				}
			}else{
				return allP[i].style[temp];
			}
		}else if(arguments.length == 2){
			allP.style[arguments[0]] = arguments[1];
		}
	}
}
Prop({
	color : "green",
	fontSize : "38px"
});

  

//设置多个不同标签的多个样式	
//定义一个对象
function MyObj(ele){
	var e;
	this.eles = [];
	if(ele.indexOf("#") == 0){
		e = document.getElementById(ele.replace("#",""));
		if(e != null)
			this.eles.push(e);
	}else{
		e = document.getElementsByTagName(ele);
		if(e != null && e.length > 0){
			this.eles = document.getElementsByTagName(ele);
		}
	}
}
		
//给对象添加一个设置元素样式的方法
MyObj.prototype.prop = function(){
	if(arguments.length !=1 && arguments.length != 2){
		return ;
	}
	var ele = this.eles;
	for(var i = 0; i < ele.length; i ++){
		if(arguments.length == 1){
			if(arguments[0] instanceof Object){
				for(p in arguments[0]){
					ele[i].style[p] = arguments[0][p];
				}
			}else{
				return ele[i].style[arguments[0]];
			}
		}else{
			ele[i].style[arguments[0]] = arguments[1];
		}
	}
}
		
//创建一个对象
var my$ = function (ele){
	return new MyObj(ele);
}
		
//调用方法
my$("p").prop("fontSize","30px");
my$("p").prop({backgroundColor : "red", color : "green"});

 2、JS继承

 对象继承 

//继承一个父类
var child = {name : "张三"};
var parent = {age : 18};


function myExtends(cObject,pObject){
	for(var p in pObject){
		cObject[p] = pObject[p];
	}
	return cObject;
}
var exChild = myExtends(child,parent);
console.log(exChild);

  

//继承多个父类
var a = {name : "Rose"};
var b = {age : 20};
var c = {sex : "女"};
var d = {tel : 123};

function SuperExtends(){
	var child = arguments[0];
	for(var i = 1; i < arguments.length; i++){
		var parent = arguments[i];
		for(p in parent){
			child[p] = parent[p];
		}
	}
	return child;
}
		
console.log(SuperExtends(a,b,c,d));

  

 

推荐阅读