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 函数中的参数使用分析
Mar 27 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
详解vuex commit保存数据技巧
Dec 25 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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
adodb与adodb_lite之比较
2006/12/31 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP文件操作实例总结
2016/09/27 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
利用nohup来开启python文件的方法
2019/01/14 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
30年同学聚会邀请函
2014/01/25 职场文书
董事长秘书工作职责
2014/06/10 职场文书
校长师德表现自我评价
2015/03/04 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python