继承是oo语言中一个最为人津津乐道的概念。ECMAScript支持实现继承,而且实现继承只要是靠原型链来实现的

·原型链    其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。    简单回顾一个构造函数,原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的        内部指针。那么,假设我们让原型对象等于另一个类型的实例,结果会怎样呢?
                //  生物的构造函数function Bio(){this.life = true}Bio.prototype.getLife = function () {return this.life;}//  动物的构造函数function Animal(){this.eat = true;}Animal.prototype = new Bio();// 狗的构造函数function Dog(master){this.master = master;}Dog.prototype = new Animal();var dog1 = new Dog("cl");console.log(dog1.life);  // true
            console.log(dog1.constructor);/*输出:ƒ Bio(){this.life = true}为什么会这样,因为 Dog 和 Animal 的constructor 被重写了的缘故*/

        上述代码中。我们没有使用Dog默认提供的原型,而是给它换了一个新原型。这个新原型就是Animal的实例。于是新原型不仅具有作为一个Animal            实例拥有的全部属性和方法,而且其内部还有一个指针,指向了Animal的原型...        通过实现原型链,本质上拓展了本章前面介绍的原型搜索机制。    默认的原型:        事实上,前面例子中展示的原型链少了一环。我们知道,所有的应用类型默认都继承了Object,而这个继承也是通过原型链实现的。大家记住,所有引用类型            默认原型都是Object的实例,因此默认原型都会包含一个内部指针,指向Object.prototype。这正是所有自定义类型都会继承toString() ,valueOf()等            默认方法的原因。    确认原型和实例的关系:        可以通过两种方式来确定原型和实例之间的关系。
            // 第一种方法:使用instanceof 操作符,只要用这个操作符检测实例与原型链出现过的构造函数,结果就会返回true。console.log(dog1 instanceof Dog);console.log(dog1 instanceof Animal);console.log(dog1 instanceof Bio);console.log(dog1 instanceof Object); // 全部为true// 由于原型链的关系,我们可以说dog1 是上述四个任何一个类型的实例// 第二种方法:使用isPrototypeOf() 方法。同样,只要原型链出现过的原型,都可以说是该原型链所派生的实例的原型
                console.log(Object.prototype.isPrototypeOf(dog1));console.log(Animal.prototype.isPrototypeOf(dog1));console.log(Bio.prototype.isPrototypeOf(dog1));console.log(Dog.prototype.isPrototypeOf(dog1)); // 全部为true

    谨慎的定义方法        两点问题:            1: 不管怎么样,给原型添加方法的代码一定放在替换原型的语句之后            2:通过原型链实现继承时,不能使用对象字面量创建原型方法。因为这样做就会重写原型链    原型链的问题:        code..
            function Super () {this.color = ["red","blue","green"];}function Sub () {}Sub.prototype = new Super();var ins1 = new Sub();ins1.color.push("black");console.log(ins1.color);   // ["red", "blue", "green", "black"]var ins2 = new Sub();console.log(ins2.color);  // ["red", "blue", "green", "black"]// 那么问题来了,由于Sub的所有实例都会共享这一个color属性,那么我们对ins1.color的修改能够通过ins2.color反映出来// 问题:在创建子类型的实例时,不能向超类型的构造函数传递参数。实际上,应该说是没有办法在不影响所有对象实例的情况下,给超类型的// 构造函数传递参数。有鉴于此,实践中很少会单独使用原型链

·借用构造函数    在解决原型中包括引用类型值所带来问题的过程中,开发人员使用一种借用构造函数的技术。这种技术的基本思想相当简单,即在子类型构造函数的        内部调用超类型构造函数
    function Animal(name){this.name = name;}function Dog(){// 通过使用call()方法(或apply()方法也可以),我们实际上在新创建的Dog实例的环境调用了Animal构造函数。这样一来// 也会在心得Dog对象上执行Animal()函数中定义的所有对象初始化代码Animal.call(this,"Nic");this.age = 29;}var ins = new Dog();console.log(ins.name); // Nicconsole.log(ins.age); // 29


    借用构造函数的问题:        如果仅仅是借用构造函数,那么将无法避免构造函数模式存在的问题---方法都在构造函数中定义,那么函数复用就无从谈起。而且超类型的原型定义的            方法,对子类型而言也是不可见的,结果所有类型都只能用构造函数模式。考虑到这些问题,借用构造函数的模式也很少使用·组合继承    组合继承也叫伪经典继承,指的是将原型链和构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性        和方法的继承,而使用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数的复用,又能够保证每个实例都有它自己的属性。    上面的代码可以这样改写:
        function Animal(name){this.name = name;}Animal.prototype.home = 'north';function Dog(){// 通过使用call()方法(或apply()方法也可以),我们实际上在新创建的Dog实例的环境调用了Animal构造函数。这样一来// 也会在心得Dog对象上执行Animal()函数中定义的所有对象初始化代码Animal.call(this,"Nic");this.age = 29;}Dog.prototype = new Animal();Dog.prototype.constructor = Dog;  // 修正构造函数var ins = new Dog();console.log(ins.name); // Nicconsole.log(ins.age); // 29console.log(ins.home); // north

    组合继承避免了原型链和借用构造函数的缺陷,融合了它们的优点,成为javascript中最常用的继承模式。而且,instanceof和isPrototypeOf()也        能够用于识别基于组合继承创建的对象。·原型式继承    这种方法没有严格意义上的构造函数。他的想法是借助原型基于已有的对象创建新对象,同时还不必因此创建自定义类型:
      function object(o){function F(){};F.prototype = o;return new F();}//在object() 函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。// 从本质上来讲,object()对传入的对象执行了一次浅复制var person = {name : "Ni",friends : ['She','Co'],}var anotherPerson = Object(person);anotherPerson.friends.push('tom');var yetAnotherPerson = Object(person);console.log(yetAnotherPerson.friends);  // ["She", "Co", "tom"]// ECMAScript5通过新增Object.create() 方法规范了原型式继承。这个方法接收两个参数:一个用作新对象原型的对象和(可选的)一个为新对象定义//  额外属性的对象。在传入一个参数的情况下,Object.create() 与 object()方法的行为相同var  myPerson = Object.create(person,{demo:{value:"G"}});console.log(myPerson.demo); //G// 在没有兴师动众的插件构造函数,而只想让一个对象与另一个对象保持类似的情况下,原型式继承式完全可以胜任的。不过别忘了,包含引用类型的值// 的属性始终都会共享相应的值,就像适应原型模式一样
·寄生式继承寄生式继承是与原型式继承紧密相关的一种思路,并且同样也是由上面的作者推而广之的。寄生式继承的思路与继承构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象function object(o){function F(){};F.prototype = o;return new F();}function createAnother(orginal){var close =object(orginal);  // 通过调用函数创建一个新对象close.sayHi = function () {  // 以某种方式增强这个对象console.log('hi');}return close;  // 返回这个对象
        }var person  = {'name' : "Ni",friends : ["She","Co"],}var anPer = createAnother(person);anPer.sayHi(); // hi//在考虑到对象不是自定有类型和构造函数的情况下,寄生式继承也是一种游泳的模式,前面示范继承模式时使用的object()函数不是必需的;任何能返回新// 对象的函数都适用于此模式// 使用寄生式继承来为对象添加函数,会由于不能做到函数复用而降低效率;这一点与构造函数模式类似

·寄生组合式继承    前面说过,组合继承时js最常用的继承模式;不过它也有自己的不足。组合继承最大的问题是无论什么情况下,都会调用两次超类型构造函数。一次在        创建子类原型的时候,另一次是在子类构造函数内部。没错,,子类型最终会包含超类型对象的全部实例属性,但我们不得不在调用子类型构造函数        时重写这些属性。再看下组合继承的例子:
        function Super(name){this.name = name;this.color  = ['red','blue'];}Super.prototype.sayName = function () {console.log(this.name);}function Sub(name,age){Super.call(this,name);  // 第二次调用Super();this.age = age;}Sub.prototype = new Super();  // 第一次调用Super();Sub.prototype.constructor = Sub;Sub.prototype.sayAge = function () {console.log(this.age);}var demo = new Sub('cl','25');demo.sayAge();  // 25// 不知道你有没有发现。第一次调用Super构造函数时,Sub.prototype会得到两个属性:name 和 color是,它们都时Super的实例属性,只不过// 位于Sub的原型中。当调用Super构造函数时,又一次在新对象上创建了name 和 color 。于是,这两个属性就屏蔽了原型中的两个同名属性// 好在我们已经找到解决这个问题方法 --- 寄生组合式继承//  所谓继承组合式继承,即姐哟个构造函数来继承属性,通过原型链的混成形式继承方法。其背后的基本思路是:不必为了指定子类型的原型而//  调用超类型的构造函数,我们所需要的无非是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将// 结果制定给子类型的原型。寄生组合式继承的基本模式如下:function inheritPrototype(subType,superType) {var prototype = Object.create(superType.prototype); // 创建对象prototype.constructor = subType;    // 增强对象subType.prototype = prototype;     // 指定对象
                }/*这个示例中的 inheritPrototype() 函数实现了寄生组合式继承的最简单形式。这个函数接收两个参数:子类型构造函数和超类型构造函数。在函数内部,第一步是创建超类型原型的一个副本。第二步为创建的副本添加constructor属性,弥补因重写原型而失去的默认的constructor属性。最后一步,将创建的对象(即副本)赋值给子类型的原型。这样我们就可以调用inheritPrototype()函数的语句,去替换前面例子中为子类原型赋值的语句了:*/function SuperType(name){this.name = name;this.color = ['red','blue','green'];}SuperType.prototype.sayName = function () {console.log(this.name);}function SubType(name, age){SuperType.call(this,name);this.age = age;}inheritPrototype(SubType,SuperType);SubType.prototype.sayAge = function () {console.log(this.age);}var xx = new SubType('cl',14);console.log(xx);// 这个例子高效率体现在它之调用了一次SuperType构造的函数,并且因此避免了在SubType.prototype上创建不必要,多余的属性。与此同时,// 还能够正常使用instanceof 和 isPrototypeOf() 。开发人员普遍认为寄生组合式继承是最理想的继承范式。

转载于:https://www.cnblogs.com/cl94/p/11261825.html

js面向对象的程序设计 --- 下篇 继承启蒙相关推荐

  1. JS面向对象的程序设计之继承-继承的实现-借用构造函数

    JS面向对象的程序设计之继承-继承的实现-借用构造函数 前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,所以用自己所理解的,尝试解读下.如有纰漏或错误 ...

  2. Js面向对象的程序设计——理解对象

    Js面向对象的程序设计 Js面向对象的程序设计 理解对象 属性类型 Js面向对象的程序设计 理解对象 示例 : var person=new Object(); person.name="N ...

  3. JS面向对象,创建,继承

    很开心,最近收获了很多知识,而且发现很多东西,以前理解的都是错的,或者是肤浅的,还以为自己真的就get到了精髓,也很抱歉会影响一些人往错误的道路上走,不过这也告诉了我们,看任何一篇文章都不能盲目的去相 ...

  4. JS面向对象的程序设计

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中 对象与纯面向对象语言中的对象是不同的,ECMA标准定义 ...

  5. js面向对象之封装,继承,多态,类的详解

    封装 在面向对象的操作中,我们有完全不同的一些写法. 想要封装我们的对象,就要用到构造函数.我们需要创建构造函数,构造函数和函数一致,都是通过function创建的 首字母大写(规范,为了和普通函数进 ...

  6. js面向对象的程序设计 --- 中篇(创建对象) 之 工厂模式和 构造函数模式

    创建对象 虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复代码. ·工厂模式 工厂模式是一种广为人知的设计模式,这种模式 ...

  7. JS面向对象(二)——构造函数的继承

    构造函数的封装请移步 http://www.cnblogs.com/JDDDD/p/5392231.html 对象之间继承一共有五种方法 比如现在有一个Person的构造函数,有两个属性name和se ...

  8. JS面向对象的程序设计之创建对象_工厂模式,构造函数模式,原型模式-1

    前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,所以用自己所理解的,尝试解读下.如有纰漏或错误,会非常感谢您的指出.文中绝大部分内容引用自<Ja ...

  9. js面向对象的程序设计 --- 中篇(创建对象) 之 原型模式

    ·原型模式 我们创建的每一个函数都由一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有 实例共享的属性和方法. 如果按照字面意思来理解,那 ...

最新文章

  1. python贴吧爬虫-Python爬虫——抓取贴吧帖子
  2. Qt Creator设置调试器
  3. Deploy One Project on Heroku (Week IV)
  4. php相应的扩展的对应链接地址
  5. DedeCms网站防挂马注意点
  6. Selenium2学习笔记一
  7. Android多点触摸的判断
  8. GATK官方文档翻译--Spark
  9. android+查看root权限管理,如何查看自己的安卓手机有没有Root权限?
  10. Java中,如何把ascii码转换成字符?
  11. (详细介绍)程序员专属接单平台,赚钱的同时提升自己的技术,并附多个快速开发的脚手架项目开箱即用
  12. Python爬虫 --- Scrapy爬取IT桔子网
  13. 【论文学习】《Generalized End-to-End Loss for Speaker Verification》
  14. Java ASCII编码表和运算符
  15. 微信中无法打开分享的链接地址,显示已停止访问该网页的处理方式
  16. 社交网站SNS的运用
  17. 由于目标计算机积极拒绝,无法连接。 127.0.0.1:4780
  18. C语言实现shellcode通用框架二:文件下载执行或内存加载
  19. BZOJ1180 [CROATIAN2009]OTOCI
  20. 税前工资,税后能拿多少?请大家仔细看完。

热门文章

  1. MATLAB gui 对表格增添(删除)数据
  2. graph面板x轴模式包括哪些_激光五轴加工机床技术参数有哪些?
  3. html中span标签w3c,HTML col 标签
  4. python仿真界面_基于Python语言的ABAQUS脚本仿真简介
  5. 嵌入式linux gif 缩放_嵌入式环境动力监控主机
  6. html 悬停显示标题,JS实现TITLE悬停长久显示效果完整示例
  7. mysql中日期相减_MySQL环境配置和10分钟快速入门
  8. 某大型银行深化系统技术方案之十七:技术架构
  9. java createcustomcursor,CustomCursor插件:自定义你的鼠标光标
  10. ajax-》post