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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue 解决provide和inject响应的问题
Nov 12 Javascript
微信小程序实现拍照和相册选取图片
May 09 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 flush()与ob_flush()的区别详解
2013/06/03 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
动态加载iframe
2006/06/16 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
JsRender实用入门教程
2014/10/31 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python连接mongodb密码认证实例
2018/10/16 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
pandas分批读取大数据集教程
2020/06/06 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
2015小学新教师个人工作总结
2015/10/14 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js