文章目录

  • 前言
  • 一、什么是原型式继承?
  • 二、ECMAScript5中的原型式继承
  • 三、总结

前言

写本《JavaScript简餐》系列文章的目的是记录在阅读学习《JavaScript高级程序设计(第4版)》一书时出现的各个知识点。虽是对读书的笔记和总结,但是希望它轻量、简洁、犀利,不会引起阅读疲劳,可以在碎片化时间和闲暇之余轻巧地沐浴一下知识点。每篇文章只针对一个小部分进行讲解式的梳理,来达到个人复习总结和分享知识的目的。


一、什么是原型式继承?

2006年,Douglas Crockford写了一篇文章:《JavaScript中的原型式继承》。这篇文章介绍了一种不涉及严格意义上的构造函数的继承方法。他的出发点是即使不自定义类型也可以通过原型实现对象之间的信息共享。直接来看下面的例子:

let person = {name: 'Lucy',friends: ['Bob', 'Jack', 'Tim']
};let anotherPerson = Object(person);
anotherPerson.name = 'Leo';
anotherPerson.friends.push('Lisa');let yetAnotherPerson = Object(person);
yetAnotherPerson.name = 'Micheal';
yetAnotherPerson.friends.push('Sue');console.log(person.name); // Micheal
console.log(person.friends); // [ 'Bob', 'Jack', 'Tim', 'Lisa', 'Sue' ]

这个例子中定义了person对象,其中有原始值name和引用值friends,把它传给Object()之后会返回一个新的对象。这个新对象的原型是person,意味着它的原型上既有原始值属性又有引用值属性。从最后的打印结果也可以看到其原始值属性被改成了最后赋值的Micheal,引用值属性friends确实被后来定义的anotherPerson和yetAnotherPerson这两个对象push进了两个新的元素('Lisa'和'Sue')。所以原型式继承适用于这种情况:你有一个对象,想在它的基础上再创建一个新对象。你需要把这个对象先传给Object(),然后再对返回的对象进行适当修改。遵循上述模式的继承方式就是我们所说的原型式继承。


二、ECMAScript5中的原型式继承

ECMAScript5通过增加Object.create()方法将原型式继承的概念规范化了。这个方法接收两个参数:1.作为新对象原型的对象(例如上面的person对象)、2.给新对象定义额外属性的对象(例如上面的anotherPerson对象,第二个参数是可选的)。在只有一个参数的时候,Object.create()与上面的Objcet()方法效果相同。Object.create()的第二个参数与Object.defineProperties()的第二个参数一样:每个新增属性都通过各自的描述符来描述。以这种方式添加的属性会遮蔽原型对象上的同名属性。例如:

let person = {name: 'Lucy',friends: ['Bob', 'Jack', 'Tim']
};let anotherPerson = Object.create(person, {name: {value: 'Laura'}
});console.log(anotherPerson.name); //Laura

可见,anotherPerson 的name属性覆盖掉了person中的name属性,打印的是Laura而不是Lucy。


三、总结

以上就是今天要讲的内容,原型式继承非常适合不需要单独创建构造函数,但仍然需要在对象间共享信息的场合。但要记住,属性中包含的引用值始终会在相关的对象间共享,跟使用原型模式是一样的。下一篇我们来介绍一下寄生式继承(传送门)。撒花~

JavaScript简餐——原型式继承相关推荐

  1. JavaScript简餐——寄生组合继承

    文章目录 前言 一.什么是寄生组合继承? 二.寄生组合继承的基本模式 三.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计 ...

  2. JavaScript简餐——关于寄生式继承

    文章目录 前言 一.什么是寄生式继承? 二.使用实例 三.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计(第4版)> ...

  3. Javascript简餐——组合继承是个啥

    文章目录 前言 一.什么是组合继承? 二.使用实例 三.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计(第4版)> ...

  4. JavaScript中实现继承的方法(深入学习原型链、盗用构造函数、组合继承、原型式继承、寄生式继承、寄生式组合继承)

    一.原型链 原型链的基本思想就是通过原型继承多个引用类型的属性和方法. 构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型. 若原型是另 ...

  5. JavaScript继承(四)——原型式继承

    2019独角兽企业重金招聘Python工程师标准>>> 道格拉斯·克罗克福特在2006年提出了原型式继承,他的想法是基于已有的对象借助原型创建新对象,同时还不必因此创建一个自定义类型 ...

  6. JavaScript简餐——关于类的继承

    文章目录 前言 一.继承基础 二.super关键字 三.抽象基类 四.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计(第 ...

  7. JavaScript简餐——继承之原型链继承

    文章目录 前言 一.实现方式 二.继承实例 三.问题所在 1.引用值误修改 2.子类型实例化时无法给父类构造函数传参 四.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在 ...

  8. Javascript继承4:洁净的继承者----原型式继承

    //原型式继承 function inheritObj(obj){//声明一个过渡函数对象function F(){}//过渡对象的原型继承父对象F.prototype = obj;//返回过渡对象的 ...

  9. 设计模式:javascript原型式继承

    道格拉斯丶克罗克福德有一个观点是:借助原型prototype可以根据已有的对象创建一个新的对象,同时不必创建新的自定义对象类型.代码如下: //原型式继承 function inheritObject ...

最新文章

  1. C中strcpy函数实现
  2. [codeigniter]CI中使用pChart绘制图表,已测通过
  3. 使用nvl就不能groupby了吗_宝妈月子期间真的不能吃酱油、醋、葱姜蒜吗?金牌月嫂教你月子餐调味料使用大全!...
  4. 非对称加密, 助记词, PIN, WIF
  5. Kubernetes入门指南
  6. 智慧环卫、智慧公厕、智能抽样、综合指挥中心、质量监察、指挥调度、车辆监管、收运计划、垃圾中转站、考核管理、垃圾收运、机械化保洁作业、环卫作业、油耗空驶、环卫设施、人工保洁作业、稽查扣分、Axure
  7. 国外游戏开发商吐槽:开发VR游戏付账单的钱都赚不到
  8. 奥鹏19春计算机应用基础,19春西南交《计算机应用基础》在线作业二(答案)-...
  9. 【三维装箱】基于matlab求解三维装箱优化问题【含Matlab源码 949期】
  10. MCSA / Windows Server 2016 用MAP工具进行IT资产评估I和虚拟化部署准备
  11. 九价疫苗三针一共多少钱 2022
  12. 未来计算机的畅享300,新学期畅享作文300字(通用5篇)
  13. 09 TypeError: Descriptors cannot not be created directly.
  14. 对于20+想转行程序员但非常迷茫的人的一些建议
  15. 诺基亚Lumia 900拥有惊人的快的方式连接
  16. Day25:Python基础编程(函数)能力训练50天——回文数
  17. 使用报表工具自定义属于自己的报表
  18. 数据仓库---JPivot连接MySQL VS PostgreSQL
  19. IE 阻止过期的 ActiveX 控件
  20. 基于机器学习逻辑回归的电信客户流失预测

热门文章

  1. 最高百万年薪,游戏公司热招 Cocos 人才丨9月岗位
  2. EZ-USB 68013在WIN7 64位下驱动识别方法
  3. 主题:论浪漫主义时期的音乐
  4. js 获取验证码倒计时
  5. 恢复Foxmail和Outlook邮箱中已删除的邮件
  6. 显卡风扇不转导致GPU占用100%
  7. 程序员如何应对「给我弄个网站吧」的请求?
  8. 利用循环嵌套,输出九九乘法表。c语言+注释
  9. 实用mac下常用快捷键和相关使用技巧
  10. docker + nginx +微信小程序后台 (springboot)