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中Iframe之间传值的方法
Mar 11 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
在for循环中length值是否需要缓存
Jul 27 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 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实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
微信小程序实现登录遮罩效果
2018/11/01 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python实用代码片段收集贴
2015/06/03 Python
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python ftplib模块使用代码实例
2019/12/31 Python
介绍一下Ruby的特点
2013/01/20 面试题
平面设计岗位职责
2013/12/14 职场文书
授权委托书协议书
2014/10/16 职场文书
个人委托书范文
2015/01/28 职场文书
销售经理工作检讨书
2015/02/19 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书