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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
微信小程序支付前端源码
Aug 29 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
JS实现点星星消除小游戏
Mar 24 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
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
use jscript List Installed Software
2007/06/11 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
javascript时间函数大全
2014/06/30 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
python里dict变成list实例方法
2019/06/26 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
python 实现任务管理清单案例
2020/04/25 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
法人代表授权委托书
2014/04/08 职场文书
党员教师一句话承诺
2014/05/30 职场文书
开票证明
2015/06/23 职场文书
迎国庆主题班会
2015/08/17 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle