原型链:

  构造函数中都有一个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. import_site

    http://kfd.me/ https://google.kfd.me/webhp?newwindow=1&safe=active http://googlebridge.com/searc ...

  2. myeclipse 破解步骤

    Fllow Orders.0. Close MyEclipse Application(if you wanna replace jar file).1. Fill usercode2. Fill s ...

  3. (总结)Nginx配置文件nginx.conf中文详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  4. IIS------配置.Net 4.0

    转载: http://blog.csdn.net/mazhaojuan/article/details/7660657

  5. R树空间索引及其变种

    1.R树及其变种:百度百科 2.R树详介:http://blog.csdn.net/jazywoo123/article/details/7792745 3.R树及变种小结 R树:叶子节点或中间节点都 ...

  6. 深入浅出MyBatis

    参考文献:深入浅出MyBatis MyBatis功能架构图: MyBatis内部原理流程图: 详情见:深入浅出MyBatis

  7. GMU 简单使用一

    <!doctype html> <html> <head> <title>iOS7风格的进度条</title> <meta chars ...

  8. lazyload.js实现图片异步载入

    所谓图片异步加载,意思是不用一次把图片全部加载完,你可以叫它延迟加载,缓冲加载都行. 看看你有没有这种需求:某篇文章图片很多,如果在载入文章时就载入所有图片,无疑会延缓载入速度,让用户等更久,所以,我 ...

  9. (转载)iOS UILabel自定义行间距时获取高度

    本文介绍一下自定义行间距的UILabel的高度如何获取,需要借助一下开源的UILabel控件:TTTAttributedLabel 附下载地址 https://github.com/TTTAttrib ...

  10. jexus jws 安装

    cd /tmp wget linuxdot.net/down/jexus--x64.tar.gz tar -zxvf jexus--x64.tar.gz mv jexus /usr rm -rf /t ...