JavaScript的几种继承方式
看《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的几种继承方式的更多相关文章
- JavaScript的3种继承方式
JavaScript的继承方式有多种,这里列举3种,分别是原型继承.类继承以及混合继承. 1.原型继承 优点:既继承了父类的模板,又继承了父类的原型对象: 缺点:不是子类实例传参,而是需要通过父类实例 ...
- Javascript的四种继承方式
在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...
- 都0202年了,你还不知道javascript有几种继承方式?
前言 当面试官问你:你了解js哪些继承方式?es6的class继承是如何实现的?你心中有很清晰的答案吗?如果没有的话,可以通过阅读本文,帮助你更深刻地理解js的所有继承方式. js ...
- JavaScript之四种继承方式讲解
在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...
- JavaScript几种继承方式
我们先构建一个Person的构造函数 function Person(name) { this.name=name; } Person.prototype.sayHi=function () { co ...
- 重新理解JS的6种继承方式
写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这 ...
- JavaScript的7种继承模式
<JavaScript模式>一书中,对于JavaScript的几种继承模式讲解得很清楚,给我提供了很大帮助.总结一下,有如下7种模式. 继承模式1--设置原型(默认模式) 实现方式: // ...
- JavaScript 常见的六种继承方式
JavaScript 常见的六种继承方式 前言 面向对象编程很重要的一个方面,就是对象的继承.A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. 大部分 ...
- js的6种继承方式
重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学 ...
随机推荐
- OpenMesh 删除网格顶点
OpenMesh 提供了 delete_vertex() 函数来实现从网格中删除顶点,在删除掉顶点的同时,所有与该顶点相连的边也同时被删除. OpenMesh 官方文档 中给的顶点删除函数声明如下: ...
- LeetCode39/40/22/77/17/401/78/51/46/47/79 11道回溯题(Backtracking)
LeetCode 39 class Solution { public: void dfs(int dep, int maxDep, vector<int>& cand, int ...
- 通过SharePoint Designer对SharePoint 2010的Master Page进行自定制
1:需要在对应的SiteCollection 和 Site 中开启Publishing的服务 2:在Designer中创建自己的Master Page,进行对原始v4.master代码进行复制,和修改 ...
- 【MyEcplise hibernate tools】hibernate tools的使用以及错误
1.点击Myecplise右上角 2.点击进入后,在这个区域右键 New 一个新的connection 3.以mySql连接为例子,在这里展示一下,下面这几项必须都要按照要求完全一致,除了架包所在的本 ...
- Eclipse配置Lifery SDK步骤与错误解决。
第一步.我们先去官网下载我们要用的东西 1.Eclipse 2.SDK 3.Tomcat 这是官网下载地址-->https://www.liferay.com/zh/downloads 下面是图 ...
- ASP.Net MVC开发基础学习笔记(2):HtmlHelper与扩展方法
一.一个功能强大的页面开发辅助类—HtmlHelper初步了解 1.1 有失必有得 在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归. ...
- Spring事务解析3-增强方法的获取
从InfrastructureAdvisorAutoProxyCreator的层次结构中可以看到,InfrastructureAdvisorAutoProxyCreator间接实现了SmartInst ...
- BZOJ 2342 回文串-Manacher
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2342 思路:先跑一遍Manacher求出p[i]为每个位置为中心的回文半径,因为双倍回文串 ...
- JavaScript笔试必备语句
1. document.write( " "); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document- >html- >(head,bod ...
- Uva12206 Stammering Aliens 后缀数组&&Hash
Dr. Ellie Arroway has established contact with an extraterrestrial civilization. However, all effort ...