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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
javascript与有限状态机详解
May 08 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
vue多个元素的样式选择器问题
Nov 29 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
微信小程序实现点击生成随机验证码
Sep 09 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
圣诞节红领巾广播稿
2014/02/03 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
美术指导求职信
2014/03/17 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
争做文明公民倡议书
2014/08/29 职场文书
医生个人年终总结
2015/02/28 职场文书
英语教师求职信范文
2015/03/20 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python