千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 >  html5视频教程  >  HTML5教程之JavaScript继承方法总结

HTML5教程之JavaScript继承方法总结

时间:2018-06-06 11:34     来源:千锋视频教程 作者:千锋老师

JS面向对象中,继承相对是比较难的,即使看了很多文章,可能依然不明白,下面我谈谈我的理解。

1.构造函数继承

function p0(){

this.name = "p0";

this.colors = ["pink","black","gray"];}

function children0(){

p0.call( this );

this.type = "children0";}

通过这种在子类中执行父类的构造函数调用,把父类构造函数的this指向为子类实例化对象引用,从而导致父类执行的时候父类里面的属性都会被挂载到子类的实例上去。

new children0().name; // p0

new children0().colors; //["pink","black","gray"]

这种方式,父类原型上的东西没法继承,因此函数复用也就无从谈起

p0.prototype.sex = "男";

p0.prototype.say = function() {

console.log(" hellow");}

new children0().sex; // undefined

// Uncaught TypeError: (intermediatevalue).say is not a function

new children0().say();

缺点:children0无法继承p0的原型对象,只能算是部分继承

2.原型链式继承

function p1(){

this.name = "p1";

this.colors = ["red","blue","yellow"];

}function Children1(){

this.name = "Children1";}

Children1.prototype = new p1();

p1.prototype.sex = "女";

p1.prototype.say = function() {

console.log(" hellow! ");}

new Children1().sex; //  女

new Children1().say(); //hellow!

这种方式确实解决了上面借用构造函数继承方式的缺点。

但是,这种方式仍有缺点,如下:

var s1 = new Children1();

s1.colors.push("black");

var s2 = new Children1();

s1.colors; // (4) ["red","blue", "yellow", "balck"]

s2.colors; // (4) ["red","blue", "yellow", "balck"]

在这里实例化了两个Children1,s1中为父类的colors属性push了一个颜色black,但是s2也改变了。因为原型对象是共用的。

但我们并不想这样,这是这个方法缺点。

3.组合式继承

意思就是把构造函数和原型链继承结合起来。

function p2(){

this.name = "p2";

this.colors = ["red","blue","yellow"];}

function Children2(){

p2.call(this);

this.type = "Children2";}

Children2.prototype = new p2()

var s1 = new Children2();

s1.colors.push("black");

var s2 = new Children2();

s1.colors; // (4) ["red","blue", "yellow", "balck"]

s2.colors; // (3) ["red","blue", "yellow"]

可以看到,s2和s1两个实例对象已经被隔离了。

但这种方式仍有缺点。父类的构造函数被执行了两次,第一次是Children2.prototype = new p2(),第二次是在实例化的时候,这是没有必要的。

组合式继承优化1

直接把父类的原型对象赋给子类的原型对象

function p3(){

this.name = "p3";

this.colors = ["red","blue","yellow"];}

p3.prototype.sex = "男";

p3.prototype.say = function(){console.log("Oh,My God!")}

function Children3(){

p3.call(this);

this.type = "Children3";}

Children3.prototype = p3.prototype;

var s1 = new Children3();

var s2 = new Children3();

console.log(s1, s2);

但是,看如下代码:

console.log(s1 instanceof Child3); // true

console.log(s1 instanceof Parent3); // true

可以看到,我们无法区分实例对象s1到底是由Children3直接实例化的还是p3直接实例化的。用instanceof关键字来判断是否是某个对象的实例就基本无效了。

我们还可以用.constructor来观察对象是不是某个类的实例:

console.log(s1.constructor.name); // p3

可以看出,s1的构造函数是父类,而不是子类Children3,这并不是我们想要的。

组合式继承优化2

function p4(){

this.name = "p4";

this.colors = ["red","blue","yellow"];}

p4.prototype.sex = "男";

p4.prototype.say =function(){console.log("Oh, My God!")}

function Children4(){

p4.call(this);

this.type = "Children4";}

Children4.prototype=Object.create(p4.prototyp;

Children4.prototype.constructor =Children4;

Object.create是一种创建对象的方式,它会创建一个中间对象

var p = {name: "p"}

var obj = Object.create(p)

// Object.create({ name: "p" })

通过这种方式创建对象,新创建的对象obj的原型就是p,同时obj也拥有了属性name,这个新创建的中间对象的原型对象就是它的参数。

如果你想参加千锋HTML5培训课程,那么就来报名吧。这里有专业老师带你,最多半年的时间让你完美蜕变。进名企、拿高薪不再是问题,命运掌握在自己的手里,想要什么样的人生就看你自己的选择了!千锋还推出免费的HTML5视频教程,帮助零基础的学员快速学习。

  • 北京天丰利校区(总部)地址:北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2、3层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋3楼
    咨询电话: 0755-23015275/23015546-801(硅谷) 0755-86660670-801(大学城)
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990 021-65233829-609
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 郑州校区地址:郑州市二七区航海中路60号海为科技园C区10层、12层
    咨询电话:0371-55191750
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
    武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
    咨询电话:027-59313371
    面授课程:HTML5大前端培训、全链路UI/UE设计培训、PHP全栈+服务器集群培训、JavaEE+分布式开发培训、大数据+人工智能培训、 Unity游戏开发培训、Python培训、云计算+信息安全培训、全栈软件测试培训、智能物联网+嵌入式培训、Android培训、iOS培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:400-811-9990 028-83178771
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85363390
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:400-811-9990 0571-86893632
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 青岛校区地址:青岛市市北区龙城路卓越世纪中心3号楼8层801
    咨询电话:0532-80911190
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990 023-68883009
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513210
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号 科技创新城19号楼B座五楼
    咨询电话:400-811-9990/0451-87173191
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 南京校区地址:南京市建邺区应天大街780号应天智汇产业园弘辉园1幢2楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、物联网+嵌入式培训、大数据+人工智能培训、全栈软件测试培训、PHP全栈+服务器集群培训、云计算+信息安全培训、Unity游戏开发培训、红帽RHCE认证、Android培训、iOS培训、好程序员
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱