看《JavaScript高级程序设计》做的一些笔记

ECMAScript只支持实现继承,不支持接口继承(因为函数没有签名)

原型链(实现继承的主要方法):

function SuperType(){
this.property = true;
} SuperType.prototype.getSuperValue = function(){
return this.property;
}; function SubType(){
this.subproperty = false;
} //继承SuperType
SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function(){
return this.subproperty;
}; var instance = new SubType();

通过原型链实现继承时不能使用对象字面量创建原型方法,否则会重写原型链

例如:

SubType.prototype = new SuperType();

//定义SubType的原型方法
SubType.prototype = { //这样定义会使上面那行代码无效 };

所有函数的默认原型都是Object的实例,因此SuperType.prototype中的[[Prototype]]会指向Object.Prototype







问题:

原型变成另一个类型的实例,原来的实例属性就变成原型属性了,因此包含引用类型值的属性会被所有SubType实例共享(例如数组)

借用构造函数:

在子类型的构造函数中使用call()或apply()调用超类型的构造函数

function SuperType(){
this.colors = [];
} function SubType(){
//继承SuperType
SuperType.call(this);
}

可以在子类型构造函数中向超类型构造函数传递参数





问题:

方法都在构造函数中定义,函数无法复用(类似构造函数模式);在超类型原型中定义的方法对子类型不可见

组合继承(常用继承模式):

将原型链和借用构造函数组合到一块(类似组合使用构造函数模式和原型模式)

用原型链实现对原型属性和方法的继承,用借用构造函数实现对实例属性的继承

function SuperType(name){
this.name;
this.colors = [];
} SuperType.prototype.sayName = function(){}; function SubType(name, age){
//继承属性
SuperType.call(this, name); this.age = age;
} //继承方法
SubType.prototype = new SuperType(); SubType.prototype.sayAge = function(){}; var instance = new SubType('myName', 66);







问题:

无论什么情况下都会调用两次超类型构造函数

同时,父类构造函数中的属性会被继承到子类的原型上

原型式继承:

基于已有的对象创建新对象,同时还不必因此创建自定义类型

function object(o){
function F(){}
F.prototype = o;
return new F();
} var person = {
name:'myName',
friends:[]
}; var anotherPerson = object(person);
anotherPerson.name = 'anotherName';

ECMAScript5通过Object.create()规范原型式继承





问题:

与使用原型模式一样,包含引用类型的值会共享

寄生式继承:

将继承过程封装成函数,并增强对象

function createAnother(original){
var clone = object(original);
clone.sayHi = function(){};
return clone;
} var person = {};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

问题:

不能做到函数复用,降低效率,与构造函数模式类似

寄生组合式继承:

使用寄生式继承来继承超类型的原型,再将结果指定给子类型的原型

function inheritPrototype(subType, superType){  //参数为两个类型的构造函数
var prototype = object(superType.prototype);
prototype.constructor = subType; //为创建的副本添加因重写原型而失去的constructor属性
subType.prototype = prototype;
} function SuperType(name){
this.name = name;
this.colors = [];
} SuperType.prototype.sayName = function(){}; function SubType(name, age){
SuperType.call(this, name);
this.age = age;
} inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function(){};

只调用了一次SuperType的构造函数,并且避免了在SubType.prototype上面创建不必要的、多余的属性,同时保持原型链不变

参考:《JavaScript高级程序设计》(第3版)

JavaScript的几种继承方式的更多相关文章

  1. JavaScript的3种继承方式

    JavaScript的继承方式有多种,这里列举3种,分别是原型继承.类继承以及混合继承. 1.原型继承 优点:既继承了父类的模板,又继承了父类的原型对象: 缺点:不是子类实例传参,而是需要通过父类实例 ...

  2. Javascript的四种继承方式

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  3. 都0202年了,你还不知道javascript有几种继承方式?

    前言     当面试官问你:你了解js哪些继承方式?es6的class继承是如何实现的?你心中有很清晰的答案吗?如果没有的话,可以通过阅读本文,帮助你更深刻地理解js的所有继承方式.       js ...

  4. JavaScript之四种继承方式讲解

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  5. JavaScript几种继承方式

    我们先构建一个Person的构造函数 function Person(name) { this.name=name; } Person.prototype.sayHi=function () { co ...

  6. 重新理解JS的6种继承方式

    写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这 ...

  7. JavaScript的7种继承模式

    <JavaScript模式>一书中,对于JavaScript的几种继承模式讲解得很清楚,给我提供了很大帮助.总结一下,有如下7种模式. 继承模式1--设置原型(默认模式) 实现方式: // ...

  8. JavaScript 常见的六种继承方式

    JavaScript 常见的六种继承方式 前言 面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分 ...

  9. js的6种继承方式

    重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...

随机推荐

  1. C# DatrgridView表格控件的一些用法

    public class useDatrgrivView { string conn = null; string sqlComm = null; DataSet das = null; DataGr ...

  2. 25条提高Visual Studio编码和调试效率的技巧

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:工欲善其事必先利其器.就算手中已经有了利器,如果能掌握一些使用工具的技巧,让利器更加顺 ...

  3. 您的 PHP 似乎没有安装运行 WordPress 所必需的 MySQL 扩展”处理方法

    转自:http://www.xuebuyuan.com/1549022.html 这已经是一个老掉牙的问题了,部分人使用自己的服务器安装WordPress程序之后,会出现“您的 PHP 似乎没有安装运 ...

  4. RTP 与RTCP 解释. 含同步时间戳

    转自:http://blog.csdn.net/wudebao5220150/article/details/13816225 RTP协议是real-time transport protocol的缩 ...

  5. x264中I,P,B帧和PTS,DTS的关系

    转自:http://www.cppblog.com/tx7do/archive/2013/01/30/197633.html 基本概念: I frame :帧内编码帧 又称intra picture, ...

  6. java中 this 和super的用法

    通过用static来定义方法或成员,为我们编程提供了某种便利,从某种程度上可以说它类似于C语言中的全局函数和全局变量.但是,并不是说有了这种便利,你便可以随处使用,如果那样的话,你便需要认真考虑一下自 ...

  7. ARM寄存器学习,王明学learn

    ARM寄存器学习 ARM微处理器共有37个32位寄存器,其中31个为通用寄存器,6个为状态寄存器.但是这些寄存器不能被同时访问,具体哪些寄存器是可以访问的,取决ARM处理器的工作状态及具体的运行模式. ...

  8. 用计算器计算“异或CRC”

    再计算器上输入以下数字,每输入一个数字,按一下“Xor”

  9. Android 自定义title 之Action Bar

    Android 自定义title 之Action Bar 2014-06-29  飞鹰飞龙...  摘自 博客园  阅 10519  转 25 转藏到我的图书馆   微信分享:   Action Ba ...

  10. sqoop与mysql之间中文乱码

    sudo -u hive sqoop export --connect "jdbc:mysql://192.168.22.201/LauncherDB?useUnicode=true& ...