原型链:

  构造函数中都有一个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. 20个命令行工具监控Linux系统性能

    作为Linux/Unix 系统管理员需要掌握一些常用的工具用于检测系统性能.在这里,dodo为大家推荐非常20个有用的并且最常用的命令行系统监视工具: 1. top -Linux系统进程监控 top ...

  2. range和xrange梳理

    一.python2.7 range 用户获取指定范围内的数,range([start,] stop[, step]) >>> range(1,5) #代表从1到5(不包含5) [1, ...

  3. 捉襟见肘之自定义自拍相机AVFoundation

    因为上篇的问题的,我搜索到解决方法: http://stackoverflow.com/questions/5427656/ios-uiimagepickercontroller-result-ima ...

  4. BZOJ3207: 花神的嘲讽计划Ⅰ

    显然hash,然后stl随便搞. #include<bits/stdc++.h> #define N 100005 using namespace std; typedef unsigne ...

  5. php 数据访问(以mysql数据库为例)

    //建一个连接,造一个连接对象$db = new MySQLi("localhost","root","123","mydb&qu ...

  6. SQLServer------解决IP地址登录不了数据库问题

    1.找到配置管理器,打开 2.关掉SQLExpress,打开MSSQLServer 3.配置MSSQLServer(启用Named Pipes和TCP/IP) 4.修改TCP/IP属性(端口:1433 ...

  7. JS字符串转换成json对象。。。。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Android学习笔记——Handler(二)

    对比请看http://blog.sina.com.cn/s/blog_78c913e30100uqmf.html 以下代码是MainActivity.java中的代码 package com.exam ...

  9. 获取ip的ip138.com

    代码: function get_onlineip() { $ch = curl_init('http://iframe.ip138.com/ic.asp'); curl_setopt($ch, CU ...

  10. RouteData

    [备忘]ASP.NET MVC中RouteData.GetRequiredString("key")方法和RouteData.DataTokens["key"] ...