理解JavaScript继承(二)

5.寄生式继承

function object(o) {function F() {}    F.prototype = o;  return new F();
}function createAnother(original){var clone = object(original);//通过调用函数创建一个新对象clone.sayHi=function(){//以某种方式增强这个对象alert("hi");};return clone;//返回这个对象
}var person={name:"Nicholas",friends:["Shelby","Court,"Van"]
};var anotherPerson=createAnother(person);
anotherPerson.sayHi();//"hi"

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

缺点:和构造函数一样,不能做到函数复用而降低效率。

6.寄生组合式继承

前面介绍说组合继承是JavaScript最常用的继承模式;实际上,它也存在一些问题,组合继承的最大问题是无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。

组合式继承实例

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);//第二次调用SuperType()this.age = age;
}SubType.prototype = new SuperType();//第一次调用SuperType()SubType.prototype.sayAge = function(){alert(this.age);
};

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

上面一共有两组name和colors属性:一组在实例上,一组在SubType原型中。这就是调用两次SuperType的结果。

为了解决这种情况,于是就出现了下面的——寄生组合式继承方法。

所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。(之所以是超类型的副本,而不是直接是超类型,如果直接是超类型的话。当子类型为原型添加方法时,也会影响到超类型的)

寄生组合式继承

function object(o){function F(){}F.prototype = o;return new F();
}function inheritPrototype(subType, superType){var prototype = object(superType.prototype);   //创建对象prototype.constructor = subType;               //增强对象subType.prototype = prototype;                 //指定对象
}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;
}inheritPrototype(SubType, 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();       //29var instance2 = new SubType("Greg", 27);
alert(instance2.colors);  //"red,blue,green"
instance2.sayName();      //"Greg";
instance2.sayAge();       //27

上面实例只在SuperType.call(this, name);这调用了一次构造函数,并且因此避免了在prototype上面创建不必要的,多余的属性。

注:YUI的extend()就是采用这种寄生组合式继承

转载于:https://www.cnblogs.com/YeChing/p/6351240.html

理解JavaScript继承(二)相关推荐

  1. 汤姆大叔的深入理解JavaScript读后感二(17——24节)

    今天要分享的内容是tom大叔的JavaScript系列的读书观后感2 border="0" width="330" height="86" ...

  2. JavaScript面向对象——理解构造函数继承(类继承)

    JavaScript面向对象--理解构造函数继承(类继承) 构造函数式继承(类继承) function SuperClass(id) {// 引用类型公有属性this.books = ['JavaSc ...

  3. JavaScript面向对象——深入理解原型继承

    JavaScript继承--深入理解原型继承 原型继承 // 父类function School (name, address) {this.name = namethis.address = add ...

  4. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  5. 真丶深入理解 JavaScript 原型和原型链(二):原型和原型链

    原文地址: https://www.jeremyjone.com/745/,转载请注明. 上一篇文章已经总结了关于原型的两个属性,那么接下来所有原型和原型链,乃至后面的继承,都与这两个属性有关系. 原 ...

  6. 全面理解Javascript闭包和闭包的几种写法及用途--转载自https://www.cnblogs.com/yunfeifei/p/4019504.html...

    全面理解Javascript闭包和闭包的几种写法及用途 好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说javascript里面的闭包吧!本篇博客主要讲一 ...

  7. Javascript继承机制的设计思想

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...

  8. javascript继承机制

    重新认识面向对象 为了说明 JavaScript 是一门彻底的面向对象的语言,首先有必要从面向对象的概念着手 , 探讨一下面向对象中的几个概念: 一切事物皆对象 对象具有封装和继承特性 对象与对象之间 ...

  9. 深入理解JavaScript this

    this是什么?做什么?指向是什么? 函数中this调用:this----->window 方法中this调用:this----->当前对象(嗲用方法的对象) 构造函数中this调用:th ...

最新文章

  1. 4、计算机图形学——光栅化、抗锯齿、画家算法和深度缓冲算法(Z-buffer)
  2. 架构师口中的混沌工程,究竟用来解决什么问题
  3. v210 启动脚本分析
  4. [原创]公布读取瑞星注册码的小程序源代码
  5. 程序猿|上班累了么?点进来,开心一夏!
  6. 单片机STM8S测量电压电路_单片机设计的胶带输送机智能模糊检测系统,准确性高,胶带寿命长...
  7. 打造“5G+IoT”生态,共创产业繁荣沃土
  8. SQL SERVER 不允许保存更改
  9. latex中png、pdf和eps格式的图片文件转换
  10. 由公司APP大面积闪退问题引发的测试基建思考
  11. 蛋黄酥怎么做 蛋黄酥的做法
  12. 美团:踩雷好几年,才总结出的数据治理避坑攻略
  13. java秒表程序_运用Java编写 秒表程序
  14. 如何把网页传到云服务器,将网页传到云服务器
  15. GitOps与ChatOps的落地实践
  16. 计算机通信与信息系统教学,通信与信息系统学科学术型硕士研究生培养方案
  17. 我的奇思妙想隐形的机器人_我的奇思妙想机器人作文
  18. 西瓜书南瓜书第五章随记
  19. Simple Baselines for Human Pose Estimation 阅读笔记
  20. 【物联网】17位业内专家解析2018年物联网重要趋势

热门文章

  1. 华为ipd产品开发流程_IPD(集成产品开发)成败取决于什么?
  2. 热点效应是指_热电偶的热电效应是什么意思 浅谈热电偶下的热点效应
  3. 一个高质量的程序应具备哪些条件?_如何开好一个精品店?需要具备哪些条件?...
  4. js修改本地json文件_Flutter加载本地JSON文件教程建议收藏
  5. 路径总和Python解法
  6. windows中文字体_如何让 Windows 变「好看」?
  7. html5新增的js api,对HTML5新增JS Api的思考
  8. 物联网python教程慕课_物联网小白入门
  9. python处理nc文件并输出_利用python如何处理nc数据详解
  10. gitlab 开源项目 星_Docker实战之Gitlab搭建