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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
JS监听滚动和id自动定位滚动
Dec 18 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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
jquery简单实现幻灯片的方法
2015/08/03 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
ES6 十大特性简介
2020/12/09 Javascript
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Python常用编译器原理及特点解析
2020/03/23 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
高一数学教学反思
2014/02/07 职场文书
给校长的建议书200字
2014/05/16 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
个人廉洁自律总结
2015/03/06 职场文书
叶问观后感
2015/06/15 职场文书
骆驼祥子读书笔记
2015/06/26 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript