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 相关文章推荐
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
深入理解js generator数据类型
Aug 16 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
vue实现全选和反选功能
Aug 31 Javascript
vue.js语法及常用指令
Oct 29 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 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
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
jquery动态添加option示例
2013/12/30 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
js实现微信分享代码
2020/10/11 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
JavaScript实现手风琴效果
2021/02/18 Javascript
python方法生成txt标签文件的实例代码
2018/05/10 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Pytorch之contiguous的用法
2019/12/31 Python
详细分析Python垃圾回收机制
2020/07/01 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
数控技术学生的自我评价
2014/02/15 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
广告词串烧
2014/03/19 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python