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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
Uploadify上传文件方法
Mar 16 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
php类中private属性继承问题分析
2012/11/01 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
javascript常用函数(1)
2015/11/04 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
基于python 字符编码的理解
2017/09/02 Python
Python 错误和异常代码详解
2018/01/29 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
写好自荐信要注意的问题
2013/11/10 职场文书
毕业设计计划书
2014/01/09 职场文书
物业招聘计划书
2014/01/10 职场文书
大学社团活动策划书
2014/01/26 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
新学期感想
2015/08/10 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
执行力心得体会范文
2016/01/11 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
使用Apache Camel表达REST服务的方法
2022/06/10 Servers
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS