首页 > 代码库 > JS面向对象(二)---继承
JS面向对象(二)---继承
一、面向对象的继承
1、解析:在原有对象的基础上,略作修改,得到一个新的对象,并且不影响原有对象的功能
2、如何添加继承---拷贝继承
属性:call
方法: for in
/* 继承:子类不影响父类,子类可以继承父类的一些功能(代码复用) 属性的继承:调用父类的构造1函数 call 方法的继承:for in 拷贝继承 */ //父类 function CreatePerson(name,sex){ this.name = name; this.sex = sex; } CreatePerson.prototype.showName = function(){ alert(this.name) } var p1 = new CreatePerson(‘小明‘,‘男‘) p1.showName() //小明 //子类 function CreateStar(name,sex,job){ CreatePerson.call(this,name,sex); this.job = job; } //拷贝继承 extend(CreateStar.prototype,CreatePerson.prototype) var p2 = new CreateStar("周杰伦",‘男‘,‘歌手‘); p2.showName(); //周杰伦 //面向对象的拷贝复制,防止影响父类对象的内容 function extend(obj1,obj2){ for(var attr in obj2){ obj1[attr] = obj2[attr]; } }
然后按照继承的方式做了一个窗口拖拽的demo,你可以狠狠的点击这里,进行查看
二、继承的其他形式(用的不是很多)
1、类式继承 : 利用构造函数(类)继承的方式
/*js是没有类的概念的,但我们可以把构造函数看做是类,这种方式是从后端转变过来的 * */ //父类 function Aaa(){ this.name = ‘小明‘; } Aaa.prototype.showName = function(){ alert(this.name) } //子类 function Bbb(){} //这句话就是类式继承 Bbb.prototype = new Aaa(); //修正指向问题 Bbb.prototype.constructor = Bbb; var b1 = new Bbb(); b1.showName(); //小明
但实际上上面的写法还是有点问题的,假如name是一个数组的时候,父类的属性会被修改,所以例子完善后如下
/* 1、js是没有类的概念的,但我们可以把构造函数看做是类,这种方式是从后端转变过来的 2、要做属性和方法继承的时候,要分开继承 * */ //父类 function Aaa(){ this.name = [1,2,3]; } Aaa.prototype.showName = function(){ alert(this.name) } //子类 function Bbb(){ Aaa.call(this) } //这个是构造函数,这个函数里面没有任何的属性与方法,避免属性继承 var F = function(){} F.prototype = Aaa.prototype; //所以在B接收原型的时候,只能接收方法,不能接收属性 Bbb.prototype = new F(); Bbb.prototype.constructor = Bbb; var b1 = new Bbb(); b1.name.push(4); var b2 = new Bbb(); alert(b2.name); //1,2,3
2、原型继承 : 借助原型来实现对象继承对象
var a = { name : ‘小明‘ } var b = cloneObj(a); b.name = "小红" alert(a.name); //小明 alert(b.name); //小红 function cloneObj(obj){ //这种方式就叫做原型继承 var F = function(){}; F.prototype = obj; return new F(); }
总结:
拷贝继承 : 通用型,有new或无new的时候都可以
类式继承: new构造函数
原型继承: 无new的对象
JS面向对象(二)---继承
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。