JS-面向对象 使用ES5实现继承


JS-面向对象
1.构造函数的继承

 java面向对象的三大特性,封装,继承,多态,
ES6以前是没有语法实现继承的,但我们可以通过代码做到继承的效果
ES6后可以使用class类

 var Ball = function(type,style,parent){
this.speed = 10;
this.t = null;
console.log(this)
this.elem = this.createDom(type,style,parent)
this.bool = false;
this.elem.addEventListener("click",this.move.bind(this));
return this.elem
}
Ball.prototype.createDom = function(type,style,parent){
var ele = document.createElement(type)
//将后面的对象属性合并到第一个位置的属性 实现样式添加
Object.assign(ele.style , style)
if(typeof parent === "string") parent = document.querySelector(parent);
parent.appendChild(ele)
return ele
}
Ball.prototype.move = function(){
//点击切换状态
this.bool = !this.bool ;
if(!this.bool) {
clearInterval(this.t);
return
}
this.t =setInterval(function(){
this.speed+=4;
this.elem.style.left=this.speed+"px";
}.bind(this),16)

}

上面的代码是一个面向对象的小球,接下来实例化它


var obj = {
width :" 100px",
height:"100px" ,
background:"aqua",
borderRadius:"50px",
position:"absolute"
}
var ele = new Ball("div",obj,"body")

JS-面向对象 使用ES5实现继承
接下来我们定义一个构造函数用来继承它;

       var obj1 = {
width :" 100px",
height:"100px" ,
background:"aqua",
borderRadius:"50px",
position:"absolute",
top:"200px"
}
var sonBall =function(type,style,parent){
Ball.call(this,type,style,parent)
}
function fn(){};//中间函数 用来保存propertype
fn.prototype =Ball.prototype;
sonBall.prototype = new fn()
//构造函数会被覆盖 需要重新设置
sonBall.prototype.constructor = sonBall;
new sonBall("div",obj1,"body")

效果如下JS-面向对象 使用ES5实现继承

02 设计模式-观察者模式

如此我们便实现了继承,在这个代码中,我们还可以继续优化,当我们实例化对象的时候,每个对象都创建了一个定时器,当数量多的时候 ,性能消耗是比较严重的,我们可以使用观察者模式来托管这些对象 用一个定时器来管理所有的元素。
首先 创建一个类 用来管理元素

function Message(){
this.list = new Set();
this.ids = 0;
}

Message.prototype.add=function (elem){
this.list.add(elem);
if(this.list.size===0 || this.ids)return;
this.ids=setInterval(()=>this.animation(),16);
}

Message.prototype.remove = function(elem){
if(!this.list.has(elem))return;
this.list.delete(elem);
if(this.list.size>0)return;
clearInterval(this.ids);
this.ids=0;
}

Message.prototype.animation=function(){
this.list.forEach(value=>{
if(value.change) value.change();
})
}

其次 将小球代码稍作修改

 var message = new Message();
var Ball = function(type,style,parent){
this.speed = 10;
this.t = null;
this.x = 0;
console.log(this)
this.elem = this.createDom(type,style,parent)
this.bool = false;
this.elem.addEventListener("click",this.move.bind(this));
return this.elem
}
Ball.prototype.createDom = function(type,style,parent){
var ele = document.createElement(type)
Object.assign(ele.style , style)
if(typeof parent === "string") parent = document.querySelector(parent);
parent.appendChild(ele)
return ele
}
//修改处
Ball.prototype.move = function(){
this.bool = !this.bool ;
if(this.bool) {
message.add(this)
}else{
message.remove(this)
}
}
//修改处
Ball.prototype.change =function(){
if(!this.bool)return;
this.x++;
this.elem.style.left=this.x+"px";
}
var obj = {
width :" 100px",
height:"100px" ,
background:"aqua",
borderRadius:"50px",
position:"absolute"
}

var obj1 = {
width :" 100px",
height:"100px" ,
background:"aqua",
borderRadius:"50px",
position:"absolute",
top:"200px"
}
var ele = new Ball("div",obj,"body")
var sonBall =function(type,style,parent){
Ball.call(this,type,style,parent)
}
function fn(){};
fn.prototype =Ball.prototype;
sonBall.prototype = new fn()
sonBall.prototype.constructor = sonBall;
new sonBall("div",obj1,"body")

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

JS-面向对象 使用ES5实现继承

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » JS-面向对象 使用ES5实现继承
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏