js原型继承的两种方法对比介绍


Posted in Javascript onMarch 30, 2014

在实际的项目中,我们通常都是用构造函数来创建一个对象,再将一些常用的方法添加到其原型对象上。最后要么直接实例化该对象,要么将它作为父类,再申明一个对象,继承该父类。

而在继承的时候有两种常用方式,今天我们就来稍作探讨

//父类
 function Person(name){
    this.name = name;
};
 // 子类
 function Student(sex){
  Person.apply(this,arguments); //继承父类的构造函数
  this.sex=sex;
 };

1,继承Prototype:

Student.prototype = Person.prototype; //执行完此句时,Student.prototype.constructor 指向的是Person,为什么了?因为Person.prototype.constructor指向Person,对象的赋值实质上是引用赋值,所以Student.prototype.constructor也指向Person
Student.prototype.constructor = Student;  //  将Student.prototype.constructor 指回Person

用Person的原型对象来覆盖Student的原型对象;前面说到对象的赋值实质上是引用赋值,所以如果Student.prototype上的任何修改都会体现到Person.prototype中,即子类会影响父类。

看下面:

Student.prototype.add=function(){alert("add")};
Person.prototype.add();//弹出add

2,继承实例:

Student.prototype = new Person();  //如果此处不传递参数,可以不写();即直接写成 new Person;
2 Student.prototype.constructor = Student;

用Person的实例来覆盖Student的原型对象;创建了实例,比起前面那种,显示是浪费内存了,不过这同时也解决了上面那种方法的缺点,即此时Student.prototype上的任何修改不会体现到Person.prototype中,即子类不会影响父类。

3,利用控对象来组合1和2的优点,去掉缺点

var  F = function(){};
F.prototype = Person.prototype;
Student.prototype  = new F();
Student.prototype.constructor  = Student;

F是个空对象,上面只有些原型方法,实例化时内存占用较少,同时也隔离开了子类对父类的影响。
Javascript 相关文章推荐
js判断undefined变量类型使用typeof
Jun 03 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
React简单介绍
May 24 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
Vue精简版风格概述
Jan 30 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
create-react-app开发常用配置教程
Jun 25 Javascript
详解JavaScript中undefined与null的区别
Mar 29 #Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 #Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 #Javascript
javascript修改IMG标签的src问题
Mar 28 #Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 #Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 #Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 #Javascript
You might like
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
php上传文件问题汇总
2015/01/30 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
使用python进行拆分大文件的方法
2018/12/10 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
Structs界面控制层技术
2013/10/11 面试题
一份婚庆公司创业计划书
2014/01/11 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
2014年库房工作总结
2014/11/26 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书