版权声明:进击的葱 https://blog.csdn.net/qlwangcong518/article/details/86316830
描述:
JS面向对象——ES5的继承
实现:
Utile.js
(function () {
Object.prototype.addProto=function (sourceObj) {
var names=Object.getOwnPropertyNames(sourceObj);
for(var i=0;i<names.length;i++){
var desc=Object.getOwnPropertyDescriptor(sourceObj,names[i]);
if(typeof desc.value==="object" && desc.value!==null){
var obj=new desc.value.constructor();
obj.addProto(desc.value);//把obj当成引用对象带入递归函数继续给obj赋值
Object.defineProperty(this,names[i],{
enumerable:desc.enumerable,
writable:desc.writable,
configurable:desc.configurable,
value:obj
});
continue;
}
Object.defineProperty(this,names[i],desc);
}
return this;
};
Function.prototype.extendClass=function (supClass) {
function F() {}
F.prototype=supClass.prototype;
this.prototype=new F();
this.prototype.constructor=this;
this.supClass=supClass.prototype;
if(supClass.prototype.constructor===Object.prototype.constructor){
supClass.prototype.constructor=supClass;
}
}
})();
var RES=(function () {
var list={};
return {
DATA_FINISH_EVENT:"data_finish_event",
init:function (imgDataList,basePath,type) {
if(imgDataList.length===0) return;
if(!type) type="json";
RES.imgDataList=imgDataList.reverse();
RES.basePath=basePath;
RES.type=type;
RES.ajax(basePath+imgDataList.pop()+"."+type)
},
ajax:function (path) {
var xhr=new XMLHttpRequest();
xhr.addEventListener("load",RES.loadHandler);
xhr.open("GET",path);
xhr.send();
},
loadHandler:function (e) {
this.removeEventListener("load",RES.loadHandler);
var key,obj;
if(RES.type==="json"){
obj=JSON.parse(this.response);
key=obj.meta.image.split(".png")[0];
list[key]=obj.frames;
}else if(RES.type==="xml"){
obj=this.responseXML.children[0];
key=obj.getAttribute("imagePath").split(".png")[0];
list[key]=obj;
}
if(RES.imgDataList.length===0){
var evt=new Event(RES.DATA_FINISH_EVENT);
evt.list=list;
document.dispatchEvent(evt);
// Model.instance.menuData=list;
return;
}
RES.ajax(RES.basePath+RES.imgDataList.pop()+"."+RES.type);
},
getNameJSONData:function (name) {
var fileName=RES.basePath;
for(var key in list){
var arr=list[key].filter(function (t) {
return t.filename===name;
});
if(arr.length>0){
fileName+=key+".png";
break;
}
}
if(arr.length===0){
return false;
}else{
return {
file:fileName,
w:arr[0].frame.w,
h:arr[0].frame.h,
x:arr[0].frame.x,
y:arr[0].frame.y
};
}
},
getNameXMLData:function (name) {
var fileName=RES.basePath;
for(var key in list){
var elem=list[key].querySelector("[n="+name+"]");
if(elem){
fileName+=list[key].getAttribute("imagePath");
break;
}
}
if(!elem) return false;
return {
file:fileName,
w:elem.getAttribute("w"),
h:elem.getAttribute("h"),
x:elem.getAttribute("x"),
y:elem.getAttribute("y")
}
},
getImage:function (name) {
var obj;
if(RES.type==="json"){
obj=RES.getNameJSONData(name);
}else if(RES.type==="xml"){
obj=RES.getNameXMLData(name)
}
if(!obj)return;
var div=document.createElement("div");
Object.assign(div.style,{
width:obj.w+"px",
height:obj.h+"px",
backgroundImage:"url("+obj.file+")",
backgroundPositionX:-obj.x+"px",
backgroundPositionY:-obj.y+"px",
position:"absolute"
});
return div;
},
changeImg:function (elem,name) {
var obj;
if(RES.type==="json"){
obj=RES.getNameJSONData(name);
}else if(RES.type==="xml"){
obj=RES.getNameXMLData(name)
}
if(!obj)return;
Object.assign(elem.style,{
width:obj.w+"px",
height:obj.h+"px",
backgroundImage:"url("+obj.file+")",
backgroundPositionX:-obj.x+"px",
backgroundPositionY:-obj.y+"px",
position:"absolute"
});
}
}
})();
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/Utile.js"></script>
</head>
<body>
<script>
function Box(num) {
this.num=num;
}
Box.prototype.addProto({
a:1,
b:2,
c:function () {
},
set data(value){
this.b=value;
},
get data(){
return this.b;
}
});
function Ball(num) {
// this.constructor//---Ball
// this.constructor.supClass//---因为下面将会继承,继承函数中设定supClass的内容就是父类的原型
// this.constructor.supClass.constructor//父类的构造函数
this.constructor.supClass.constructor.call(this,num);
// 相当于ES6 super(num)
}
Ball.extendClass(Box);
Ball.prototype.addProto({
d:10,
f:function () {
},
c:function () {
// 相当于ES6 super.c()
this.constructor.supClass.c.call(this)
}
});
var ball=new Ball(10);
console.log(ball)
</script>
</body>
</html>