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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
Jquery ajax基础教程
Nov 20 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
Vue实现多页签组件
Jan 14 Vue.js
详解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操作文件方法问答
2007/03/16 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP实现验证码校验功能
2017/11/16 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
python对数组进行反转的方法
2015/05/20 Python
Python 性能优化技巧总结
2016/11/01 Python
Python实现ping指定IP的示例
2018/06/04 Python
pandas.cut具体使用总结
2019/06/24 Python
python pandas生成时间列表
2019/06/29 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
python excel多行合并的方法
2020/12/09 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
网页美工求职信范文
2014/04/17 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python