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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 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数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
Vue的Options用法说明
2020/08/14 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
浅析Python 中整型对象存储的位置
2016/05/16 Python
使用Python绘制图表大全总结
2017/02/11 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Python判断有效的数独算法示例
2019/02/23 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
网站编辑求职信
2013/10/17 职场文书
大学生就业推荐信范文
2013/11/29 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
协议书范文
2015/01/27 职场文书
活动经费申请报告
2015/05/15 职场文书
主持人开场白台词
2015/05/29 职场文书
周末问候语大全
2015/11/10 职场文书