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 弹出层插件实现代码
Oct 24 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 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
Zend Guard一些常见问题解答
2008/09/11 PHP
php横向重复区域显示二法
2008/09/25 PHP
php 购物车实例(申精)
2009/05/11 PHP
PHP学习之正则表达式
2011/04/17 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
JS打开新窗口的2种方式
2013/04/18 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
一些常用的Python爬虫技巧汇总
2016/09/28 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
python实现简单flappy bird
2018/12/24 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Python修改DBF文件指定列
2020/12/19 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
int和Integer有什么区别
2013/05/25 面试题
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
入党培养人考察意见
2015/06/08 职场文书
新闻稿格式范文
2015/07/18 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python