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 相关文章推荐
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
vue使用nprogress实现进度条
Dec 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
JavaScript手机振动API
2016/06/11 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
node.js基础知识汇总
2020/08/25 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python之Class&Object用法详解
2019/12/25 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
Python 解析简单的XML数据
2020/07/24 Python
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
孝老爱亲模范事迹
2014/01/24 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
大学开学计划书
2014/04/30 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
新年祝酒词大全
2015/08/11 职场文书