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 相关文章推荐
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
js实现照片墙功能实例
Feb 05 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
JavaScript类的写法
Sep 17 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
用js编写留言板
2020/03/17 Javascript
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
使用Python实现音频双通道分离
2020/12/25 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
电子信息专业自荐书
2014/02/04 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书