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的parseInt 进制问题
May 07 Javascript
JavaScript 全角转半角部分
Oct 28 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
原生js实现无缝轮播图效果
Jan 28 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调用时间格式的参数详解
2013/06/06 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
js格式化货币数据实现代码
2013/09/04 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
java必学必会之static关键字
2015/12/03 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
layui的select联动实现代码
2019/09/28 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
python中的yield from语法快速学习
2020/11/06 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
社区庆八一活动方案
2014/02/02 职场文书
预备党员的自我评价
2014/03/12 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
2014银行授权委托书样本
2014/10/04 职场文书
初中军训感言
2015/08/01 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
MySQL update set 和 and的区别
2021/05/08 MySQL
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技