博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
《Javascript高级程序设计》读书笔记之继承
阅读量:6827 次
发布时间:2019-06-26

本文共 3140 字,大约阅读时间需要 10 分钟。

1.原型链继承

让构造函数的原型对象等于另一个类型的实例,利用原型让一个引用类型继承另一个引用类型的属性和方法

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

代码示例中,完整原型链如下

原型链继承的问题:父类型引用类型的属性会被所有子类型实例共享,这是不符合预期的

function SuperType(){    this.colors=["red","blue","green"];}function SubType(){}//继承SuperTypeSubType.prototype=new SuperType();var instance1=new SubType();instance1.colors.push("black");alert(instance1.colors);//"red","blue","green","black"var instance2=new SubType();alert(instance2.colors);//"red","blue","green","black"
View Code

2.借用构造函数继承

基本思想是在子类型构造函数内部调用超类型构造函数

function SuperType(){    this.colors=["red","blue","green"];}function SubType(){    //继承SuperType    SuperType.call(this);}var instance1=new SubType();instance1.colors.push("black");alert(instance1.colors);//"red","blue","green","black"var instance2=new SubType();alert(instance2.colors);//"red","blue","green"
View Code

借用构造函数可以像超类型构造函数传递参数

function SuperType(name){    this.name=name;}function SubType(){    //继承SuperType    SuperType.call(this,"Jim");    this.age=28;}var instance1=new SubType();alert(instance1.name);//"Jim"alert(instance1.age);//28
View Code

借用构造函数的问题:不能复用超类型的方法

3.组合继承

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

function SuperType(name){    this.name=name;    this.colors=["red","blue","green"];}SuperType.prototype.sayName=function(){    alert(this.name);};function SubType(name,age){    //继承SuperType    SuperType.call(this,name);    this.age=age;}SubType.prototype=new SuperType();SubType.prototype.sayAge=function(){    alert(this.age);}var instance1=new SubType("Jim",29);instance1.colors.push("black");alert(instance1.colors);//"red","blue","green","black"instance1.sayName();//"Jim"instance1.sayAge();//29var instance2=new SubType("Jack",28);alert(instance2.colors);//"red","blue","green"instance2.sayName();//"Jack"instance2.sayAge();//28
View Code

4.寄生组合式继承

寄生组合式继承,解决了组合继承中,两次调用超类型构造函数的问题

function object(o){    function F(){}    F.prototype=o;    return new F();}function inheritPrototype(subType,superType){    var prototype =object(superType.prototype);    prototype.constructor=superType;//原书是prototype.constructor=subType,看书时认为这里应该是superType    subType.prototype=prototype;}function SuperType(name){    this.name=name;    this.colors=["red","blue","green"];}SuperType.prototype.sayName=function(){    alert(this.name);};function SubType(name,age){    //继承SuperType    SuperType.call(this,name);    this.age=age;}inheritPrototype(SubType,SuperType);SubType.prototype.sayAge=function(){    alert(this.age);}var instance1=new SubType("Jim",29);instance1.colors.push("black");alert(instance1.colors);//"red","blue","green","black"instance1.sayName();//"Jim"instance1.sayAge();//29var instance2=new SubType("Jack",28);alert(instance2.colors);//"red","blue","green"instance2.sayName();//"Jack"instance2.sayAge();//28
View Code

 

转载于:https://www.cnblogs.com/GongQi/p/4029678.html

你可能感兴趣的文章
CAS5.2x单点登录(二)cas服务器连接数据库
查看>>
Android tess_two Android图片文字识别
查看>>
高负载微服务系统的诞生过程
查看>>
maven生命周期理解
查看>>
JS基础之传参(值传递、对象传递)
查看>>
CC 攻击检测研究现状
查看>>
SpringBoot开发案例从0到1构建分布式秒杀系统
查看>>
通通WPF随笔(4)——通通手写输入法(基于Tablet pc实现)
查看>>
sublime text3配置ctrl+鼠标左键进行函数跳转【转】
查看>>
(转)几种经典的hash算法
查看>>
pytest文档6-fixture之yield实现teardown
查看>>
gerrit 使用教程(一)
查看>>
使用caddy 进行nodejs web应用近实时编译更新
查看>>
Solr如何使用in语法查询
查看>>
WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画
查看>>
高级动画
查看>>
类型运算符
查看>>
Content Security Policy (CSP) 介绍
查看>>
DevExpress去除多国语言包
查看>>
numpy初始化
查看>>