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动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
js 通用订单代码
Dec 23 Javascript
js闭包的用途详解
Nov 09 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
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随机显示图片的简单示例
2014/02/15 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
浅析vue数据绑定
2017/01/17 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
Python读写ini文件的方法
2015/05/28 Python
python机器学习之KNN分类算法
2018/08/29 Python
从0开始的Python学习016异常
2019/04/08 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python的列表List求均值和中位数实例
2020/03/03 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
生产经理的自我评价分享
2013/11/07 职场文书
优秀英语专业毕业生求职信
2013/11/23 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
火锅店的活动方案
2014/08/15 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
刘公岛导游词
2015/02/05 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
python实现双向链表原理
2022/05/25 Python