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自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
node.js中的fs.writeFile方法使用说明
Dec 14 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
jquery移动节点实例
Jan 14 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
JScript中的"this"关键字使用方式补充材料
2007/03/08 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
JS & JQuery 动态添加 select option
2016/06/08 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
vue v-model的用法解析
2020/10/19 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
python生成器generator用法实例分析
2015/06/04 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
pandas去除重复列的实现方法
2019/01/29 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
如何使用Pytorch搭建模型
2020/10/26 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
zooplus意大利:在线宠物商店
2019/08/07 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
乡镇办公室工作决心书
2014/03/11 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫
Apache自带的ab压力测试工具的实现
2022/07/23 Servers