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 相关文章推荐
用JAVASCRIPT如何给<textarea></textarea>赋值
Apr 20 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
vue实现简单图片上传
Jun 30 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
PHP CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解
2013/06/06 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
新浪的图片新闻效果
2007/01/13 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
使用django自带的user做外键的方法
2020/11/30 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
自我反省检讨书
2014/01/23 职场文书
消防工作实施方案
2014/06/09 职场文书
测绘工程专业求职信
2014/07/15 职场文书
设备收款委托书范本
2014/10/02 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
出国签证在职证明范本
2014/11/24 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
订货会主持词
2015/07/01 职场文书
公司备用金管理制度
2015/08/04 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫