JS Pro-深入面向对象的程序设计之继承的详解

原型链(prototype chaining):

利用原型来继承属性和方法。回顾一下构造函数(constructor),原型对象(prototype)和实例(instance)的关系。每一个构造函数都有一个prototype属性,该属性指向一个prototype对象;prototype对象也有constructor属性,指向该函数;而实例也有一个内部指针(__proto__)指向这个prototype对象。如果这个prototype对象是另外一个对象的实例会是怎样的呢?这样该prototype对象就包含一个指向另一个类型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。

JS的继承很简单,就是把子类的prototype设为父类的一个(实例化)对象


代码如下:

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
};

function SubType(){
    this.subproperty = false;
}

//inherit from SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){
    return this.subproperty;
};

var instance = new SubType();
alert(instance.getSuperValue());   //true

最终的结果:instance的__proto__指向SubType.prototype对象,而SubType.prototype对象的__proto__属性又指向SuperType.prototype对象。getSuperValue()是一个方法,所以仍然存在于原型中,而property是一个实例属性,所以现在存在于SubType.prototype这个实例中。  instance.constructor现在指向的是SuperType,这是由于SubType.prototype指向SuperType.prototype,而SuperType.prototype的constructor属性指向SuperType函数,所以instance.constructor指向SuperType。

默认情况下,所有引用类型都继承Object。这是因为所有函数的原型对象,默认都是Object的一个实例,所以内部prototype(__proto__)指向Object.Prototype。

原型和实例的关系:可以使用2种方法来确定原型与实例之间的关系。
- instancef操作符:使用该操作符来测试实例与原型链中出现过的构造函数,都会返回true


代码如下:

alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true

- isPrototypeOf()方法:只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型。


代码如下:

alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperType.prototype.isPrototypeOf(instance)); //true
alert(SubType.prototype.isPrototypeOf(instance)); //true

给子类添加方法的注意点:我们有的时候会给子类添加方法,或者是重写父类的某些方法。这个时候就要注意,这些方法必须在继承后再定义。以下的例子里,SubType在继承SuperType后,我们给它添加了新的方法getSubValue(),而且重写了getSuperValue()方法。对于后者,只有SubType的实例才会使用重写的方法,SuperType的实例还是会使用原有的getSuperValue()方法。


代码如下:

function SuperType(){
  this.property = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.property;
};
function SubType(){
  t his.subproperty = false;
}
//inherit from SuperType
SubType.prototype = new SuperType();
//new method
SubType.prototype.getSubValue = function (){
  return this.subproperty;
};
//override existing method
SubType.prototype.getSuperValue = function (){
  return false;
};
var instance = new SubType();
alert(instance.getSuperValue()); //false

另外一个需要注意的是,通过原型链实现继承时,不能使用对象字面量创建原型方法,因为这样会重写原型链。如下面的代码,在SubType继承SuperType以后,使用对象字面量给原型添加方法,但这样做,会重写SubType原型,重写后的SubType.prototype包含的是一个Object的实例,从而也切断了与SuperType的关系。


代码如下:

function SuperType(){
  this.property = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.property;
};
function SubType(){
  this.subproperty = false;
}
//inherit from SuperType
SubType.prototype = new SuperType();
//try to add new methods - this nullifies the previous line
SubType.prototype = {
  getSubValue : function (){
    return this.subproperty;
  },
  someOtherMethod : function (){
    return false;
  }
};
var instance = new SubType();
alert(instance.getSuperValue()); //error!

原型链的问题:和原型一样,当使用引用类型值的时候,原型链就会出问题了。回顾一下之前的内容,包含一个引用类型值的原型属性会被所有实例共享,这就是为什么我们要把引用类型值在构造函数中定义,而不是在原型中定义。在通过原型链实现继承时,原型实际上会变成另一个类型的实例,于是,原先的实例属性也顺利成章的变成现在的原型属性了。


代码如下:

function SuperType(){
  this.colors = [“red”, “blue”, “green”];
}
function SubType(){
}
//inherit from SuperType
SubType.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”

在SuperType构造函数中,我们定义了一个colors数组,每一个SuperType实例都会拥有它自己的这个colors数组。但是当SubType使用原型链继承SuperType以后,SubType.prototype变成SuperType的一个实例,因此它拥有自己的colors属性,也就是说SubType.prototype.colors属性。所以,当创建SubType实例的时候,所有实例都共享这一属性了。如上面的代码所示。

第二个问题就是:在创建子类的实例时,不能向超类的构造函数中传递参数。实际上,应该说是没有办法在不影响所有对象实例的情况下,给超类的构造函数传递参数。由于这些问题,我们不会单独使用原型链。

--------------------------------------------------------------------------------

借用构造函数(Contructor stealing):
为了解决上述问题,开发人员发明了一种叫做借用构造函数的技术。这种技术的思路就是:在子类型构造函数的内部调用超类型构造函数。(函数,只不过是在特定环境中执行代码的对象?)我们可以通过使用apply()或call()方法在新创建的对象上执行构造函数。


代码如下:

function SuperType(){
  this.colors = [“red”, “blue”, “green”];
}
function SubType(){
  //inherit from 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”

我们在SubType里使用call()方法调用SuperType的构造函数,实际上就是在新的SubType对象上执行SuperType()函数中定义的所有对象初始化代码。结果就是每个SubType实例都具有自己的colors属性的副本。

传递参数:使用借用构造函数方法的一个很大的好处在于就是,我们可以从子类的构造函数传递参数到父类的构造函数中。


代码如下:

function SuperType(name){
  this.name = name;
}
function SubType(){
  //inherit from SuperType passing in an argument
  SuperType.call(this, “Nicholas”);
  //instance property
  this.age = 29;
}
var instance = new SubType();
alert(instance.name); //”Nicholas”;
alert(instance.age); //29

新的SuperType构造函数新增了一个参数name,我们在call SuperType的同时,往SuperType传递参数"Nicholas"。为了不让超类型的构造函数重写子类型的属性,可以在调用超类型构造函数后再定义子类的属性。

借用构造函数的问题:方法都在构造函数中定义,无法复用。而且在超类型的原型中定义的方法,对子类型而言是不可见的。结果所有类型都只能使用构造函数模式。

--------------------------------------------------------------------------------

组合继承:
结合原型链及借用构造函数各自的优点的一种继承模式。使用原型链继承原型属性及方法,使用借用构造函数来继承实例属性。如下面例子,我们使用call()方法调用SuperType的构造函数(每个SubType实例都拥有自己的name和colors属性,以及SubType的age属性);然后再把SuperType实例赋值给SubType的原型,使其继承SuperType的sayName()方法(每个实例都共用这个方法)。


代码如下:

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
    alert(this.name);
};

function SubType(name, age){
    //inherit properties
    SuperType.call(this, name);
    this.age = age;
}
//inherit methods
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

原型式继承(Prototypal Inheritance):


代码如下:

function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}
--------------------------------------------------------------------------------

寄生式继承(Parasitic Inheritance):

缺点同构造函数

(0)

相关推荐

  • JavaScript面向对象程序设计三 原型模式(上)

    我们创建的每一个函数都有一个prototype(原型)属性,该属性是一个对象,包含可以有特定类型的所有实例共享的属性和方法.使用它的好处就在于可以让所有对象实例共享它所包含的属性和方法,也就是说,不必在构造函数中定义对象的信息,而是可以将这些信息,直接添加在原型对象中,如下所示,还是接着改写前两篇日志中的例子: 复制代码 代码如下: function Employee() { }; Employee.prototype.Name = "Jim"; Employee.prototype.

  • javascript面向对象程序设计(一)

    注释里讲解的十分细致了,这里就不多废话了,直接上代码: <script type="text/javascript"> //ECMA-262把对象定义为:"无序属性的 集合,其属性可以包含基本值.对象或者函数" //理解对象,最简单的方式就是通过创建一个Object的实例,然后为它添加属性和方法 var person = new Object(); person.name = "Xulei"; person.age = "2

  • 浅谈javascript面向对象程序设计

    ECMA-262把对象定义为:"无序属性的 集合,其属性可以包含基本值.对象或者函数" 理解对象,最简单的方式就是通过创建一个Object的实例,然后为它添加属性和方法 复制代码 代码如下: var person = new Object();         person.name = "Xulei";         person.age = "23";         person.job = "前端工程师";     

  • JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))

    第一遍囫囵吞枣,不求甚解,感觉恍然大悟,结果晚上睡觉一想发现很多问题,什么都不明白,再看第二遍,发现原来是这样.过了几天一用,发现手写起来原来还是在凭记忆,于是下一遍,下一遍... 单凭记忆去弄清楚东西很不靠谱,时间一长脑袋空白.特别是技术上的很多思想和原理,只看不练,即便当时想得特别清楚,过久了也会忘.再者就是网上一些东西,只能说是提供了一种便捷的查看途径,事后还是自己总结为好,毕竟大多都是个人总结,一些概念很难讲的很清楚,而且两个人谈同一件事情,一般说的步骤和章节都是不同的,这样很容易形成交

  • JavaScript面向对象程序设计教程

    JavaScript中对象的定义为:无序属性的集合,其属性可以包含基本值.对象或者函数.可以把对象想象成散列表,就是一组名值对(key:value),其中值可以是数据或函数,每个对象都是基于一个引用类型创建的. 理解对象 前面的博客里写过创建对象的方式有两种,一种是创建一个object的实例,另一种是使用对象字面量法: var person = new Object(); person.sex = man; person.name = bluce person.age = 58; person.

  • JS Pro-深入面向对象的程序设计之继承的详解

    原型链(prototype chaining): 利用原型来继承属性和方法.回顾一下构造函数(constructor),原型对象(prototype)和实例(instance)的关系.每一个构造函数都有一个prototype属性,该属性指向一个prototype对象:prototype对象也有constructor属性,指向该函数:而实例也有一个内部指针(__proto__)指向这个prototype对象.如果这个prototype对象是另外一个对象的实例会是怎样的呢?这样该prototype对

  • javascript面向对象三大特征之继承实例详解

    本文实例讲述了javascript面向对象三大特征之继承.分享给大家供大家参考,具体如下: 继承 在JavaScript中的继承的实质就是子代可以拥有父代公开的一些属性和方法,在js编程时,我们一般将相同的属性放到父类中,然后在子类定义自己独特的属性,这样的好处是减少代码重复.继承是面向对象的基础,是代码重用的一种重要机制. --此文整理自 <jQuery 开发从入门到精通> ,这是本好书,讲的很详细,建议购买阅读. 继承的作用 实现继承的主要作用是: ① 子类实例可以共享超类属性和方法. ②

  • js中的面向对象之对象常见创建方法详解

    本文实例讲述了js中的面向对象之对象常见创建方法.分享给大家供大家参考,具体如下: 创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 使用object var student = new Object(); student.name = "easy"; student.age = "20"; 使用字面量 var sutdent = { na

  • JS高级程序设计之class继承重点详解

    目录 引言 写法 constructor 特性 继承 题外话 引言 前文已提过:在 class 出现之前,JavaScript 实现继承是件麻烦事,构造函数继承有加上原型上的函数不能复用的问题:原型链继承又存在引用值属性的修改不独立的问题:组合继承又存在两次调用构造函数的问题,寄生组合继承,写起来又太麻烦了,总之,在 class 出现前,JavaScipt 实现继承真是件麻烦事儿. 然而,class 的出现真的改变这一现状了吗? 不如往下看. 写法 与函数类型相似,定义类也有两种主要方式:类声明

  • Python面向对象之继承代码详解

    本文研究的主要是Python面向对象之继承的相关内容,具体如下. Python 继承 即一个派生类(derived class)继承基类(bass class)字段和方法.继承也允许把一个派生类的对象作为一个基类对象对待.例如,有这样一个设计,一个Cat类型的对象派生自Animal类,这是模拟"是一个(is-a)"关系(例如,Cat是一个Animal). 继承实现了代码的重用. 继承的基本语法: class 派生类名(基类名1 [, 基类名2....]): 基类名写在括号里,基本类是在

  • Js类的构建与继承案例详解

    JS里类的定义和继承实在五花八门,所以单独开一个笔记本记录. 定义 派生于Object的方式 1.new Object:在创建对象后动态定义属性.方法 var Car = new Object; Car.color = "red"; Car.showColor = function(){ console.log(this.color); } //想要继承就要先构造空对象然后用__proto__原型链来继承 var Car1 = new Object; //或者 = {} Car1.__

  • Java 面向对象之继承篇详解原理与特点

    目录 一.前言 二.继承 什么是继承呢? 继承的好处与弊端 继承的使用场景? 继承的格式: 继承的特点: 重写的概念: super关键字 super和this的比较 一.前言 前面我也们讲述了相关封装的,现在我们先认识的继承的概念和使用. 二.继承 什么是继承呢? 继承在显示生活中也不少见,比如继承财产之类的,在我们java学习中也有类似的使用, 继承者称作子类也叫派生类,被继承者称作父类.基类或超类,objec类是所有类的父类 (后期介绍) 继承的好处与弊端 好处:就是提高了代码的维护性(多个

  • C++中继承(inheritance)详解及其作用介绍

    概述 面向对象程序设计中最重要的一个概念是继承 (inheritance). 继承允许我们依据另一个类来定义一个类, 这使得创建和维护一个应用程序变得更统一. 这样做也达到了重用代码功能和提高执行效率的效果. 类的概念 一个类中包含了若干数据成员和成员函数. 不同的类中的数据成员和成员函数各不相同. 但是有时两个类的内容基本相同. 例如: 继承的概念 继承 (inheritance) 就是在一个已存在的类的基础上建立一个新的类. 已存在的类: 基类 (base class) 或父类 (fathe

  • C++继承模式详解

    目录 继承 继承的概念 继承的定义 继承关系和访限定符 继承方式 父类和子类对象赋值转化 继承中的作用域 子类的默认成员函数 继承与友元 继承与静态成员 复杂的菱形继承 虚继承 继承的总结 继承 继承的概念 继承机制是面向对象程序设计使代码可以复用的最重要的手段,它允许程序员在保持原有类特性的基础上进行扩展,增加功能.继承呈现了面向对象程序设计的层次结构,体现了由简单到复杂的认知过程. 继承的定义 上面的基类也可以叫父类,派生类也可以叫子类. 继承关系和访限定符 继承方式 接下来用代码测试上面的

  • C++继承的赋值转换与菱形虚拟继承深入详解

    目录 一.继承的概念及定义 1.1.继承的概念 1.2.继承的定义 二.基类和派生类对象赋值转换 三.继承中的作用域 3.1.继承同名成员处理方式 3.2.继承同名静态成员处理方式 3.3.继承与友元 3.4.继承与静态成员 四.派生类的默认成员函数 五.复杂菱形继承及菱形虚拟继承 5.1.继承分类 5.2.虚拟继承解决菱形继承问题原理 一.继承的概念及定义 继承是面向对象三大特性之一. 1.1.继承的概念 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段,它允许

随机推荐