原型链:

  构造函数中都有一个prototype属性指针,这个指针指向原型对象,而创建的实例也有指向这个原型对象的指针__proto__。当实例查找方法时先在实例上找,找不到再通过__proto__到原型对象上查找。如果原型对象是另一个类型的实例,那么原型对象包含一个指向另一个原型对象的指针、另一个原型对象中也包含指向另一个构造函数的指针。

原型连继承
function superValue(){
this.superValue = "superValue";
} superValue.prototype.getSuperValue(){
return this.superValue;
} function subValue(){
this.subValue = "subValue";
} subValue.prototype = new superValue();
//原型被superValue实例替换,实现继承superValue的属性和方法。没有了constructor subValue.prototype.getSubValue = function(){
return this.subValue;
} var instance = new subValue(); instance instanceof Object
//true,所以的引用类型都继承Object,也是通过原型链继承的。
instance instanceof superValue; //true
instance instanceof subValue; //true //只要原型链出现过的构造函数,结果就返回true。

所以的函数类型都是Object的实例,所以instance instanceof Object  返回true

问题:

通过原型继承时会共享所有引用类型的属性

不能向超类的构造函数传递参数。

  

借用构造函数:

又名伪造对象。在子类型的函数的内部调用超类的构造函数

function superValue(){
this.colors = ["yellow", "green", "red"];
} function subValue(){
//继承了superValue
superValue.call(this);
} var instance1 = new subValue();
instance1.color.push("new");
instance1.color //["yellow", "green", "red", "new"] var instance1 = new subValue();
instance1.color //["yellow", "green", "red"] 不共享属性

问题:构造函数的内部调用父类的构造函数,无法实现函数复用

  

组合继承:

利用原型链实现方法的继承,达到函数复用。

利用构造函数实现实例的属性继承,避免了引用实例的共享问题

function superValue(name){
this.name = name;
this.color = ["red", "green"];
} superValue.prototype.sayName = function(){
alert(this.name);
} function subValue(age, name){
superValue.call(this, name); //对构造函数的属性的继承
this.age = age;
} //实现继承superValue
subValue.prototype = new superValue();
//恢复被覆盖的构造函数
subValue.prototype.constructor = subValue;
//定义自己的方法
subValue.prototype.sayAge = function(){
alert(this.age);
} var instance = new subValue(24, "yang");
instance.color.push("black");
instance.color //["red", "green", "black"];
instance.sayName() //yang 继承来的方法
instance.sayAge() //24 自己的方法 var instance2 = new subValue(25, "he");
instance.color //["red", "green"]不共享引用类型。
instance.sayName() //he 继承来的方法
instance.sayAge() //25 自己的方法

问题:继承时调用了两次supeValue()一次函数内部,一次实例化原型对象,子类型屏蔽了原型对象上的属性,可以通过寄生组合类型继承解决。

  原型继承:

function object(obj){
funciton F(); //声明一个临时的构造函数
F.prototype = obj; //实现原型继承
return new F(); //返回构造函数实例。
} //整个过程是一个浅复制

  寄生式继承:

  与寄生构造函数和工厂模式类似,即创建一个仅用于封装过程的函数,在内部增强对象。

function object(obj){
var clone = object(obj);
clone.sayName = function(){
alert(haha"");
} return clone;
}
//函数内部增强对象

  寄生组合类型继承:

  解决组合继承中两次调用superValue()函数。这两次调用superValue()会在原型对象和新对象上创建属性。

function superValue(name){
this.name = name;
this.color = ["red", "green"];
} superValue.prototype.sayName = function(){
alert(this.name);
} function subValue(age, name){
superValue.call(this, name); //调用父类构造函数创建属性name和color。屏蔽原型上的属性name和color
this.age = age;
} //实现继承superValue,在原型上创建属性name和color
subValue.prototype = new superValue(); subValue.prototype.constructor = subValue;
subValue.prototype.sayAge = function(){
alert(this.age);
}

解决:通过寄生组合式继承,通过借用构造函数来继承属性,通过原型链混成形式继承方法

方法:不必为了指定子类型的原型而调用超类的构造函数。通过寄生式继承超类原型,指定给子类原型

function inheritPrototype(subType, superType){
var prototype = object(super.prototype);    //创建对象
prototype.constructor = subType;         //增强对象
subType.prototype = prototype;          //指定对象
}

寄生组合继承代码

function superValue(name){
this.name = name;
this.color = ["red", "green"];
} superValue.prototype.sayName = function(){
alert(this.name);
} function subValue(age, name){
superValue.call(this, name); //实现属性的继承
this.age = age;
}
//原型链方法继承
inheritPrototype(subType, superType); subValue.prototype.sayAge = function(){
alert(this.age);
}

Javascript高级程序设计——面向对象之实现继承的更多相关文章

  1. Javascript高级程序设计——面向对象小结

    ECMAScript支持面向对象编程,对象可以在代码执行时创建,具有动态扩展性而非严格意义上的实体. 创建对象方法: 工厂模式:简单的函数创建引用类型 构造函数模式:可以创建自定义引用类型,可以想创建 ...

  2. 《JavaScript高级程序设计》笔记——关于继承

    继承在JavaScript中是一种“奇葩”的存在,因为其本身并没有类(class)的概念(ES5),所以只能用其他方式(原型链.构造函数.对象实例)来模拟继承的行为.既然是模拟,那就应该是想办法实现继 ...

  3. 2020/06/06 JavaScript高级程序设计 面向对象的程序设计

    ECMAScript虽然是一种面向对象的语言,但是他没有类的概念.所以他的对象也与其他语言中的对象有所不同. ECMA-262定义对象:一组没有特定顺序的值. 6.1 理解对象 创建对象的方法: 1. ...

  4. Javascript高级程序设计——面向对象之创建对象

    对象创建方法: 工厂方法 构造函数模式 原型模式 组合构造函数和原型模式 寄生构造函数模式 问题构造函数模式 工厂模式: function Person(name, age){ var obj = n ...

  5. Javascript高级程序设计——面向对象之理解对象

    在面向对象语言中都有类的概念,通过类来创建具有属性和方法的对象.而ECMAScript中没有类的概念,ECMAScript中定义了对象:无需属性的集合,其属性值可以包含基本值.对象.或者函数. 在Ja ...

  6. JavaScript高级程序设计之寄生组合式继承

    在继承中常会出现两个问题: 父类的属性变成了子类的原型 构造器指向混乱 寄生组合式继承解决了这样的问题: 属性继承到属性 原型继承到原型 构造器指向明确 // 父类 var Super = funct ...

  7. 《JavaScript高级程序设计》读书笔记 ---继承

    继承是OO 语言中的一个最为人津津乐道的概念.许多OO 语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在ECMAScrip ...

  8. 《JavaScript高级程序设计》学习笔记(5)——面向对象编程

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...

  9. 《Javascript高级程序设计》阅读记录(六):第六章 下

    这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...

随机推荐

  1. CF570D:Tree Requests

    传送门 DFS重标号+二分 打比赛的时候想了很多方法..DFS序,BFS序,倍增什么的都考虑了一遍,但是几乎要么是可以维护两个区间但是代码复杂度爆炸,要么就是只能维护单一维度的信息. 这道题的具体做法 ...

  2. linux系统性能监视命令

    preface as a linux engineer,you should know how to use these command of monitor system,so let's lear ...

  3. w3m常用快捷键

    H    显示帮助 q    退出,会有提示的 j,k,l,h  移动光标 J/K   向下/向上滚屏 T     打开一个新标签页 Esc-t 打开所有标签页,供你选择,使用jk来上下移动 U    ...

  4. MyEclipse快捷键大全(绝对全)

    存盘 Ctrl+s(肯定知道) 注释代码 Ctrl+/ 取消注释 Ctrl+\(Eclipse3已经都合并到Ctrl+/了) 代码辅助 Alt+/ 快速修复 Ctrl+1 代码格式化 Ctrl+Shi ...

  5. 记一次DDos攻击--2016/12/8

    先上图 图一 图二 午休之后~ 睡意朦胧,报警来了.看到121121Mbps的流量攻击,精神一震. 不到两秒,又来了一个短信,开始心塞.网站入口IP被封了.打开网站,全站瘫痪.紧接着运营就来了,让运营 ...

  6. Hibernate学习总结

    首先声明这是个坑爹的框架 属于ssh经典框架中的持久层框架,说白了就是管理数据库的. 下载地址:http://hibernate.org/orm/ 这里写了版本5.2,下载下来的基本不怎么会用,因为文 ...

  7. 导出excel失败,提醒提示加载类型库/DDL出错

    导出excel失败,提醒提示加载类型库/DDL出错 www.MyException.Cn   发布于:2012-08-17 02:08:34   浏览:1538次   导出excel失败,提示提示加载 ...

  8. HTTP协议发展脉络

    1 发展脉络 1.1 1991 HTTP/0.9 建立TCP连接.客户端发送请求(只有GET命令).服务端返回请求(只能返回html格式字符串)后就关闭TCP连接 1.2 1996.5 HTTP/1. ...

  9. 个人js

    1.网页右侧地图浮动楼层,超过100px就显示 $(window).scroll(function(){ ){ //距顶部多少像素时,出现返回顶部按钮 $("#floor").fa ...

  10. Intent启动一个新的页面

    一,Intent(目的) 的分类 显式 Intent 构造函数重载之一: Intent intent = new Intent(FirstActivity.this,SecondActivity.cl ...