JavaScript原型式继承实现方法


Posted in Javascript onNovember 06, 2019

这篇文章主要介绍了JavaScript原型式继承实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

在2006年,有个叫道格拉斯·克罗克福德的人写了一篇文章,题目翻译为中文就是JavaScript中的原型式继承。在此文章里,他介绍了一种实现继承的方法。他的想法是借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。于是,他就写下了如下的函数:

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

实现方法如下:

//在object()函数的内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型的一个新实例
  var person = {
    name:"Nick",
    friends:["xiaowang","xiaochen"]
  };
  var person1 = object(person);
  person1.name = "Mike";
  person1.friends.push("xiaozhang");

  var person2 = object(person);
  person2.name = "lifei";
  person2.friends.push("xiaoli");
  console.log("person1:" + person1.name);
  console.log("person2:" + person2.name)
  console.log("person1 friends:" + person1.friends);
  console.log("person2 friends:" + person2.friends);
  console.log("all friends:" + person.friends);

运行结果如下:

JavaScript原型式继承实现方法

哇,怎么和原型链继承模式一样,不管你建了多少个实例,这个父类的引用值始终都会被这些个子类所创建的实例共享,所以这种继承方式名为原型式继承,和原型链就差一个字=。=

对咯,在ES5中,新增了Object.create()方法规范化了原型式继承,它有两个参数,第一个参数是用作新对象原型的对象,第二个参数是可选的,是一个为新对象定义额外属性的对象。在传入一个参数的时候,这个方法是和object()方法一样一样的!

Javascript 相关文章推荐
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
js实现简单的秒表
Jan 16 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
vue点击自增和求和的实例代码
Nov 06 #Javascript
解决vue 表格table列求和的问题
Nov 06 #Javascript
JavaScript如何借用构造函数继承
Nov 06 #Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 #Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 #Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 #Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 #Javascript
You might like
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
Nginx 配置多站点vhost 的方法
2018/01/07 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
实现向右循环移位
2014/07/31 面试题
2014年公司迎新年活动方案
2014/02/24 职场文书
大学班级学风建设方案
2014/05/01 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
2014年党支部学习材料
2014/05/19 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
端午节活动总结报告
2015/02/11 职场文书
大学生村官个人总结
2015/02/15 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
企业战略合作意向书
2015/05/08 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书