类式继承(原型链继承)

实现

function A(){this.a='a';this.arr=[1,2];
}
A.prototype.funA=function(){console.log("我是A的方法");}
function B(){this.b='b';
}
B.prototype.funB=function(){console.log("我是B的方法");
}
B.prototype=new A();var b1=new B();

由于A的实例能够访问A.prototype,所以我们可以设置B.prototype指向A的实例。所以B的实例可以访问A的实例以及A.prototype,实现继承

缺点:

1.由于对象类型的赋值是引用赋值,如果父类A实例化过程中有引用类型,那么子类B的实例的这个属性都指向同一内存空间。

function A(){this.a='a';this.arr=[1,2];
}
A.prototype.funA=function(){console.log("我是A的方法");}
function B(){this.b='b';
}
B.prototype.funB=function(){console.log("我是B的方法");
}
B.prototype=new A();var b1=new B();
var b2=new B();b1.arr.push(3);
console.log(b1.arr);    // [1, 2, 3]
console.log(b2.arr);    // [1, 2, 3]

2.如果父类的实例需要传入一些参数,那么两个子类实例初始化时某一属性值相同

function A(year){this.year=year;
}
function B(){this.b='b';
}
B.prototype=new A(18);var b1=new B();
var b2=new B();
console.log(b1.color);    // 18
console.log(b2.color);    // 18

3.B.prototype中constructor指向不正确,因为B.prototype指向了一个A的实例,所以本应指向B的constructor指向了A

function A(year){this.year=year;
}
function B(){this.b='b';
}
B.prototype=new A(18);var b1=new B();b1.constructor===A    // true

构造函数继承(借用构造函数继承)

实现

function A(color){this.a='a';this.arr=[1,2];this.color=color;
}
A.prototype.funA=function(){console.log("我是A的方法");}
function B(color){A.call(this,color);
}
B.prototype.funB=function(){console.log("我是B的方法");
}var b1=new B("red");console.log(b1)    // {a: "a", arr: Array(2), color: "red"}

优点

解决了引用赋值问题,也可以自定义一些属性了,constructor也指向B了,即解决了类式继承的第一个、第二个问题以及第三个问题

缺点

很明显,B除了调用了A这个函数外并没有和A扯上什么关系,原型链是不通的(无法访问到应该作为父类的A的prototype属性),我甚至并不觉得这是一种继承方式,但它为下面两种方法奠定了基础

b1.__proto__===B.prototype   // true
b1.__proto__.__proto__===Object.prototype    // true

组合继承

说白了,就是将上述两种方法的长处组合到一起,利用原型链实现原型属性和方法的继承,通过借用构造函数实现对实例属性的继承

实现

function A(color){this.a='a';this.arr=[1,2];this.color=color;
}
A.prototype.funA=function(){console.log("我是A的方法");}
function B(color,age){// 通过借用构造函数实现对实例属性的继承A.apply(this,[color]);this.age=age;
}// 利用原型链实现原型属性和方法的继承
B.prototype=new A();
B.prototype.constructor=B;var b1=new B('red',18);

优点

既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性

缺点

调用了两次父类的构造函数

寄生组合式继承(此方法最好)

实现

function A(color){this.a='a';this.arr=[1,2];this.color=color;
}
A.prototype.funA=function(){console.log("我是A的方法");}
function B(color,age){A.apply(this,[color]);this.age=age;
}B.prototype=Object.create(A.prototype);
B.prototype.constructor=B;var b1=new B('red',18);

优点

只需访问一次父类的构造函数,避免了在子类的prototype上创建不必要、多余的属性

L - JavaScript继承相关推荐

  1. JavaScript继承详解(四)

    文章截图 - 更好的排版 在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. C ...

  2. JavaScript继承详解(四) 转

    在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 - Classical Inheritance in JavaScript. Crockford是Java ...

  3. Javascript继承机制的设计思想

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...

  4. 浅谈JavaScript继承

    前言 关于JavaScript继承相关的定义和方法网上已经有很多解释啦,本菜鸟就不抄抄写写惹人嫌了,本文主要探讨三种基本的继承方式并且给出优化方案. 正文 借助构造函数实现继承 function Pa ...

  5. 浅谈javascript继承【读javascript设计模式第四章节继承有感】

    javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的 一:类似继承,先上关键代码 ...

  6. 理解JavaScript继承(二)

    理解JavaScript继承(二) 5.寄生式继承 function object(o) {function F() {} F.prototype = o; return new F(); }func ...

  7. 探寻完美 之 JavaScript继承

    本文并不想探讨JavaScript的面向对象特性(如果有兴趣,可参看我的<领悟面向对象JavaScript>),也不会涉及全部的面向对象概念,只是试图寻找一个还未被任何人发现的" ...

  8. 【JavaScript】重温Javascript继承机制

    上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...

  9. [转]JavaScript继承详解

    原文地址:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html 面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++. ...

最新文章

  1. 数字化时代,如何解决企业协同办公的问题?
  2. SQL Server中通过设置SET NOCOUNT来优化存储过程
  3. 生活很急躁,史前也一样
  4. 【数据挖掘】数据挖掘简介 ( 数据挖掘引入 | KDD 流程 | 数据源要求 | 技术特点 )
  5. mac 下 使用 brew 配置 环境
  6. Python中的 optparse模块
  7. Web页面适配移动端方案研究
  8. 三菱plc选型手册_模拟量是什么?PLC和模拟量是如何转换的?
  9. linux打开pythonshall,linux系统shell脚本后台运行python程序
  10. python 金字塔的程序_python生成金字塔
  11. 力扣-1022. 从根到叶的二进制数之和
  12. 【高斯消元】BZOJ3503 [Cqoi2014]和谐矩阵
  13. clickhouse 同步mysql_ClickHouse 常用管理命令
  14. Linux下Docker命令自动补全
  15. php数字验证码代码,php中文字母数字验证码实现代码
  16. java excel 冻结_如何实现表格的首行冻结2
  17. 彻底禁止电脑弹出广告的方法(以2345好压为例)
  18. 组队学习-NLP实践-中文预训练模型泛化能力挑战赛(文本分类,bert)
  19. android Codec-specific data
  20. hdu 2121 最小树形图 +虚根

热门文章

  1. AI 影像诊断平台的5大设计要点
  2. 人工智能值得关注的技术研究方向
  3. 武汉首座无人驾驶电动汽车充电站投入使用
  4. 愚蠢的CNN,换个马甲就认不出猫!但,这病能治 | ICLR Oral
  5. 【综述专栏】关于AI Architecture未来的一些思考
  6. 如何正确地运用人工智能模型?
  7. 揭秘仿人机器人背后的技术秘密 | 优必选研究院技术专家刘益彰【附PPT】
  8. 用机器学习分析美国新财年1万个国防项目,7054亿军费都投给了哪些技术?
  9. 中国电子信息工程科技发展十大趋势(2019)发布
  10. 这一年,信息技术领域上演的“断舍离”