`
rockyuse
  • 浏览: 195406 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JavaScript面对对象编程—继承

 
阅读更多

概述:

  原型链:一个原型等于另一个实例。不能给构造函数传递参数,同时值类型会出现共用的问题。(原型的问题)

  借用构造函数:SuperType.call(this,para)。解决原型链的问题,但是函数不能复用(构造函数的问题),效率不高。

  组合继承(原型链+借用构造函数):前两种方式互补,但是调用了两次超类,出现了多余的属性(原型中的属性被屏蔽)。

  原型继承:利用原型对对象进行一次浅复制。Function F(){};F.prototype = o;return new F();
寄生式继承:先用原型继承浅复制一次对象,然后再根据需要增强对象。

  寄生组合式继承:在原型链继承时,跳过实例化的步骤,直接给原型对象赋值。(寄生式指增强了原型对象)

一、原型链:

  原型链作为实现继承的主要方法。基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针,那么让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应的,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层推进,就够成了实例与原型的链条。这就是所谓原型链的基本概念。

  代码如下:

 function SuperType(){
  this.property = true;
 }
 SuperType.property.getSuperValue = function(){
  return this.property;
 }
 funciton SubType(){
  this.subproperty = false;
 }
 //继承了SuperType
 SuperType.prototype = new SuperType();
 
 SubType.prototype.getSubValue = function(){
  return this.subproperty;
 };
 var instance = new SubType();
 alert(instance.getSuperValue()); //true
 
 alert(instance instanceof Object); //true
 alert(instance instanceof SuperType); //true
 alert(instance instanceof SubType); //true

  以上代码定义了两个类型:SuperType和SubType,每个类型分别有一个属性和一个方法,SubType继承了SuperType,而继承是通过创建SuperType的实例,并将该实例赋值给SubType.prototype实现的。实现的本质是重写原型对象,代之以一个新类型的实例,原来存在于SuperType的实例中的所有属性和方法,现在也存在于SubType.prototype中了。在确立了继承关系后,我们给SubType.prototype添加了一个方法,这样就在继承了SuperType的属性和方法的基础上又添加了一个新方法。关系图:


  instance指向SubType.prototype,SubType.prototype又指向SuperType.prototype。getSuperValue()方法仍然还在SperType.prototype中,但property则位于SubType.prototype中,这是因为property是一个实例属性,而getSuperValue()则是一个原型方法。

  通过实现原型链,本质上扩展了原型搜索机制。调用instance.getSuperValue()会经历三个步骤:(1)搜索实例(2)搜索SubType.prototype(3)搜索SuperType.prototype,最后一步才会找到方法。

  1、默认的原型

  所有引用类型默认都继承了Object,而这个继承也是通过原型实现的。所有函数的默认原型都是Object的实例,因此默认原型都会包含一个内部指针,指向Object.prototype。这就是所有自定义类型都会继承toString()、valueOf()等默认方法的根本原因。上面例子的原型链还应该包括另外一个继承层次:

 

  2、确定原型和实例的关系

  两种方式:instanceof操作符、isPrototypeOf()方法。

  只要用instanceof操作符来测试实例与原型链中出现过的构造函数,结果就会返回true。由于原型链的关系,instance可以是Object、SuperType或SubType中任何一个类型的实例。

  同样的,使用isPrototypeOf()方法,只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型。因此以是Object、SuperType或SubType中任何一个。

  3、谨慎的定义方法

  子类要重写超类型中的某个方法,或者需要添加超类型中不存在的某个方法时,给原型添加方法的代码一定要放在替换原型的语句之后。

  function SuperType(){
   this.property = true;
  }
  SuperType.property.getSuperValue = function(){
   return this.property;
  }
  funciton SubType(){
   this.subproperty = false;
  }
  //继承了SuperType
  SuperType.prototype = new SuperType();
  
  //添加新方法
  SubType.prototype.getSubValue = function(){
   return this.subproperty;
  };
  
  //重写超类型中的方法
  SubType.prototype.getSuperValue = function(){
   return false;
  }
  var instance = new SubType();
  alert(instance.getSupertValue());//false

  当通过SubType的实例调用getSuperValue()方法时,调用的就是这个重新定义的方法,但通过SuperType的实例调用getSuperValue()时,还会继续调用原来的那个方法。格外注意必须在SuperType的实例替换掉原型之后,再定义这两个方法。在原型链中,不能使用对象字面量创建原型方法,因为这样做就会重写原型链,从而切断原型链。

  4、原型链的问题

  主要的问题来自包含引用类型的原型,在通过原型来实现继承时,原型实际上就会变成另外一个类型的实例,于是原先的实例属性也就变成了现在的原型属性了。

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

  SuperType的每个实例都会有各自包含自己数组colors属性,当SubType通过原型链继承了SuperType之后,SubType.prototype就变成了SuperType的一个实例,因此它也有了一个它自己的colors属性,但是SubType所有的实例都会共享这一个colors属性,而我们对instance1.colors的修改能够通过instance2.colors反映出来。

  第二个问题是:在创建子类型的实例时,不能向超类型的构造函数中传递参数(同前面不能传递参数类似)。应该说是没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数。子类型的实例和构造函数之间没有必然联系。

二、借用构造函数

  在子类型构造函数的内部调用超类型构造函数。可以通过使用apply()和call()方法在新创建的对象上执行构造函数。如:

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

  通过使用call()方法,实际上是在新创建的SubType实例的环境下调用了SuperType构造函数。这样一来,就会在新SubType对象上执行SuperType()函数定义的所有对象初始化代码。结果SubType的每个实例就会具有自己的colors属性。

  1、传递参数

  相对于原型链,借用构造函数具有一个很大的优势,即可以在子类型构造函数中向超类型构造函数传递参数,如:

  function SuperType(name){
   this.name = name;
  }
  function SubType(){
   //继承了SuperType,同时还传递了参数
   SuperType.call(this,"Nicholas");
   //实例属性
   this.age = 29;
  }
  var instance1 = new SubType();
  alert(instance.name); //"Nicholas"
  alert(instance.age);  //29

  2、问题

  仅仅是借用构造函数,那么也将无法避免构造函数模式存在的问题——方法都在构造函数中定义,因此函数复用无从谈起。而且超类型的原型中定义的方法,对于之类型而言也是不可见的,结果所有类型都只能使用构造函数模式。

三、组合继承

  是指将原型链和借用构造函数的技术组合到一起,从而发挥二者之长的一种继承模式。思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样既通过在原型上定义方法实现了函数复用,又能保证每个实例都有它自己的属性。如:

 function SuperType(name){
  this.name = name;
  this.colors = ["red","blue","green"];
 }
 SuperType.prototype.sayName = function(){
  alert(this.name);
 }
 function SubType(name,age){
  //继承
  SuperType.call(this,name);
  this.age = age;
 }
 //继承方法
 SubType.prototype = new SuperType();
 SubType.prototype.sayAge = function(){
  alert(this.age);
 }
 var instance1 = enw SubType("Nicholas",29);
 instance1.colors.push("black");
 alert(instance1.colors);   //"red,blue,green,black"
 instance1.sayName();  //"Nicholas"
 instance1.sayAge();  //29
 
 var instance2 = enw SubType("Greg",27);
 alert(instance1.colors);   //"red,blue,green"
 instance2.sayName();  //"Greg"
 instance2.sayAge();  //27

  SuperType构造函数定义了两个属性:name和colors。SuperType的原型定义了一个方法sayName() 。SubType构造函数调用SuperType构造函数时传入了name参数,紧接着有定义了自己的属性age。然后将SuperType()的实例赋值给SubType的原型,然后又在改新原型上定义方法sayAge()。这样一来,就可以让两个不同的SubType实例既分别拥有自己的属性——包括colors属性,有可以使用相同的方法了。

  组合继承避免了原型链和借用构造函数的缺陷,融合了他们的优点,陈我给Javascript中最常用的继承模式。而且instanceof和isPrototypeOf()也能用于识别给予组合继承创建的对象

四、原型式继承

  借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型,为了达到目的,定义如下函数:

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

  Object函数内部,先创建了一个临时性的构造函数,按后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型的一个新实例。从本质上讲,object()对传入其中的对象执行了一次浅复制。看下面这个例子:

 var person = {
  name : "Nicholas",
  friends : ["Shelby","Court","Van"]
 };
 var anotherPerson = object(person);
 anotherPerson.name = "Greg";
 anotherPerson.friends.push("Rob");
 
 var yetAnotherPerson = object(person);
 yetAnotherPerson.name = "Linda";
 yetAnotherPerson.friends.push("Barbie");
 alert(person.friends);  //"Shelby,Court,Van,Rob,Barbie"

  要求必须有一个对象可以作为另一个对象的基础。如果有这么一个对象的话,可以把它传递给object()函数。然后根据具体需求对得到的对象加以修改即可。这个例子中,可以作为另一个对象的基础是person对象,于是我们把它传入到object()函数中,然后该函数就会返回一个新对象,这个新对象将person作为原型,所以它的原型就包含一个基本类型值属性和一个引用类型值属性,这意味着person.friends不仅属于person所有,而且也会被anotherPerson以及yetAnotherPerson共享,实际上,这就相当于又创建了person对象的两个副本。

  在没有必要兴师动众的创建构造函数,而只想让一个对象与另一个对象保持类似的情况下,原型式继承是完全可以胜任的,不过别忘了,包含引用类型值的属性始终都会共享相应的值,就像使用原型模式一样。

五、寄生式继承

  寄生式继承是与原型式继承紧密相关的一种思路,并且同样也是由洛克福德推而广之的。寄生式继承的思路是与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式类增强对象,最后再像真地是它做了所有工作一样返回对象,以下代码示范了寄生式继承模式:

 function creatAntother(original){
  var clone = object(original);  //通过调用函数创建一个新对象
  clone.sayHi = function(){    //以某种方式来增强这个对象
   alert("hi");
  };
  return clone;    //返回这个对象
 }

  在这个例子中,creatAnother()函数接收了一个参数,也就是将要作为新对象基础的对象,然后,把这个对象(original)传递给object()函数,将返回的结果赋值给clone。再为clone对象添加一个新方法sayHi(),最后返回clone对象,可以像下面这样来使用creatAnother()函数:

 var person = {
  name:"Nicholas";
  friends:["Shelby","Court","Van"]
 };
 var anotherPersosn = creatAnother(person);
 anotherPerson.sayHi();  //"hi"

  这个例子中的代码基于person返回了一个新对象——anotherPerson。新对象不仅具有person的所有属性和方法,而且还有自己的sayHi()方法。

  在主要考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式,前面示范继承模式时使用的object()函数不是必须的,任何能够返回新对象的函数都使用与此模式。

  使用寄生式继承来为对象添加函数,会犹豫不能够做到函数复用而降低效率,这一点与构造函数模式类似。

六、寄生式组合继承

  前面说过,组合继承是Javascript最常用的继承模式,不过,它也有自己的不足,组合继承最大的问题就是无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部,没错,子类型最终会包含超类型对象的全部实例属性,但是我们不得不在调用子类型构造函数时重写这些熟悉,再来看一看下面组合继承的例子:

 function SuperType(name){
  this.name = name;
  this.colors = ["red","blue","green"];
 }
 SuperType.prototype.sayName = function(){
  alert(this.name);
 }
 function SubType(name,age){
  Super.call(this.name);   //第二次调用SuperType
  this.age = age;
 }
 SubType.prototype = new SuperType();  //第一次调用SuperType()
 SubType.prototype.sayAge = function(){
  alert(this.age);
 }

  带注释的行中是调用SuperType构造函数的代码。在第一次调用SuperType构造函数时,SubType.prototype会得到两个属性:name和colors,他们都是SuperType的实例属性,只不过现在位于SubType的原型中,当调用SubType构造函数时,又会调用一次SuperType构造函数,这一次又在新对象上创建了实例属性name和colors。于是,这两个属性就屏蔽了原型中的两个同名属性,如图:

  如上图所示,有两组name和colors属性:一组在实例上,一组在SubType原型中,这就是调用两次SuperType构造函数的结果。好在我们已经找到了解决这个问题的方法——寄生组合式继承。

  所谓寄生式组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已,本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型,寄生组合式继承的基本模式如下所示:

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

  这个示例中的inheritPrototype()函数实现了寄生组合式继承的最简单形式,这个函数接收两个参数:子类型构造函数和超类型构造函数。在函数内部,第一步是创建超类型的一个副本,第二步是为了创建的副本添加constructor属性,从而弥补因重写原型而失去的默认的constructor属性,最后一步,将新创建的对象(即副本)赋值给子类型的原型,这样,我们就可以调用inheritPrototype()函数的语句,去替换前面例子中为子类型原型赋值的语句了。例如:

 function SuperType(name){
  this.name = name;
  this.colors = ["red","blue","green"];
 }
 SuperType.prototype.sayName = function(){
  alert(this.name);
 }
 function SubType(name,age){
  SuperType.call(this)
  this.age = age;
 }
 inheritPrototype(SubType,SuperType);
 SubType.prototype.sayAge = function(){
  alert(this.age);
 }

  这个例子的高效率体现在它只调用了一次SuperType构造函数,并且因此避免了在SubType.prototype上面创建不必要的、多余的属性。与此同时,原型链还能保持不变,因此,还能够正常使用instanceof和isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

 

http://ce.sysu.edu.cn/hope/Item.aspx?id=12071

分享到:
评论

相关推荐

    深化剖析JavaScript面对对象编程_.docx

    JavaScript 面向对象编程是一种重要的编程范式,它允许开发者创建具有封装、继承和多态性的复杂数据结构。在JavaScript中,面向对象主要通过构造函数、原型(prototype)以及类(ES6引入)来实现。本文将深入探讨...

    javascript 面对对象设计原则 (英文)

    虽然JavaScript本身并不是一种纯粹的面向对象语言,但通过其独特的原型继承机制,可以灵活地实现面向对象编程的各种特性。 ##### 1. 对象的概念 在JavaScript中,一切皆为对象,包括数字、字符串、数组等基本类型...

    Javascript简单实现面向对象编程继承实例代码

    本文将深入探讨JavaScript如何实现面向对象编程中的继承,并通过实例代码进行解释。 首先,我们要理解面向对象的四个基本特征: 1. **封装**:封装是将数据和操作这些数据的方法绑定在一起,形成一个独立的实体,...

    JavaScript面对对象程序设计教程_.docx

    - 面向对象编程在JavaScript中是非常重要的概念,它帮助开发者更好地组织代码结构,提高代码的可维护性和扩展性。通过了解不同的对象创建模式及其优缺点,可以帮助开发者根据实际需求选择最合适的方法。同时,对于...

    javascript面对对象程序设计高级特性经典教程(值得保藏)_.docx

    JavaScript是一种广泛应用于Web开发的脚本语言,尤其在面向对象编程方面,它提供了丰富的高级特性。本文将深入探讨JavaScript中的面向对象程序设计的高级特性,包括对象的创建、访问、删除,以及`this`关键字的使用...

    javascript时尚编程百例(pdg)

    对象是JavaScript的另一大特色,书中的例子会展示如何创建和使用对象,包括构造函数、原型链、对象字面量表示法以及对象的继承机制。理解这些内容对于构建可维护和扩展的代码至关重要。 Ajax(异步JavaScript和XML...

    Javascript 对象

    ### JavaScript对象:面向对象编程与核心知识解析 #### 一、面向对象编程(OOP)概览 面向对象编程(OOP)是一种编程范式,它将现实世界中的实体抽象成对象,这些对象拥有属性(特征)和方法(行为)。OOP的核心概念...

    JS面向对象编程基础篇(二) 封装操作实例详解

    JavaScript中的面向对象编程虽然不像传统的面向对象语言那样具备完整的class机制,但它提供了通过对象和原型来实现封装和继承的能力。本文主要介绍了JavaScript面向对象编程中封装操作的基本概念和几种实现方式。 ...

    javascript作业题答案

    原型则涉及JavaScript的对象继承机制,所有对象都具有一个`__proto__`属性,可以通过原型链来共享属性和方法。 文件名“第1章”可能暗示了这是一个逐步深入的系列教程,第一章可能涵盖基础概念,如变量声明、数据...

    JavaScript模式(中文版带目录)

    理解这两者的区别和如何结合使用是掌握JavaScript面向对象编程的关键。 四、函数 函数是JavaScript的核心,这里可能涵盖了函数的特性,如函数作为一等公民、函数表达式、箭头函数、函数参数默认值等。此外,可能会...

    《前端内参》,有关于JavaScript、编程范式、设计模式、软件开发的艺术等大前端范畴内的知识分享,旨在帮助前端工.zip

    而面向对象编程则通过封装、继承和多态来组织代码,适合构建复杂系统。了解并熟练运用这些范式,能提升代码的可读性和可复用性。 设计模式是软件工程中的最佳实践,对于前端开发同样重要。如单例模式确保一个类只有...

    主流编程语言-WLP.pdf

    面向对象编程(C++、Java)通过封装、继承和多态提高了代码复用和可维护性,适合大型项目。基于对象编程(C语言)介于两者之间,允许类的使用但不强调继承。函数式编程(如JavaScript的部分特性)避免了副作用,提高...

    JavaScript从入门到精通(PDG)

    JavaScript还有强大的面向对象特性,通过构造函数、原型链和类实现对象的创建和继承。理解闭包的概念及其应用,对于编写高效且内存友好的代码至关重要。此外,异步编程,如回调函数、Promise和async/await,是解决...

    《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析

    总结来说,工厂模式是JavaScript面向对象编程中一种重要的设计模式,它提高了代码的灵活性和可扩展性。通过将对象的创建过程封装起来,使得代码在面对多种相似对象时能保持一致性和低耦合性。无论是简单工厂模式还是...

    JS定义类或对象

    #### 三、面向对象编程在JavaScript中的应用 ##### 3.1 定义构造函数 在JavaScript中,可以通过定义构造函数来创建对象实例。这种方法更接近于传统的面向对象编程方式,使代码更加规范和易于理解。以下是将上面的...

    JS面向对象[定义].pdf

    随着AJAX技术的普及,JavaScript在Web开发中的地位越来越重要,面对复杂性和复用性的需求,面向对象编程(OOP)的概念被引入到JavaScript中。 面向对象编程是软件开发中的一种设计模式,它基于对象,允许我们创建...

    Beautiful.JavaScript.2015.8.pdf

    书中不仅涵盖了语言的基础语法和核心特性,如变量、数据类型、函数、对象、数组等,还介绍了诸如异步编程、闭包、原型继承等高级概念及其应用场景。 此外,本书通过一系列实际案例,展示了如何利用JavaScript解决...

    编程语言的区别

    2. **C++**:C++是在C语言基础上发展起来的,它引入了面向对象编程的概念,如类、继承、封装和多态。C++同时支持过程化编程和面向对象编程,适合开发大型系统、游戏软件和高性能应用。 3. **Java**:Java是一种跨...

    JavaScript Web Applications

    2. **类与继承**:使用原型链实现面向对象编程。 - 创建基础类库。 - 实现继承机制。 3. **事件监听与处理**: - 监听不同类型的事件。 - 控制事件的传播顺序。 - 取消事件的默认行为。 #### 五、总结 随着...

Global site tag (gtag.js) - Google Analytics