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的一种模块模式
Sep 08 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 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
无线电的诞生过程
2021/03/01 无线电
WINXP下apache+php4+mysql
2006/11/25 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
JS验证字符串功能
2017/02/22 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
基于vue实现探探滑动组件功能
2020/05/29 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
pyqt4教程之widget使用示例分享
2014/03/07 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
编写Python CGI脚本的教程
2015/06/29 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
Python按钮的响应事件详解
2019/03/04 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
建筑自我鉴定
2013/10/19 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
家庭经济困难证明
2015/06/23 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
SQL注入详解及防范方法
2021/12/06 MySQL
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server