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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
jquery 回车事件实现代码
Aug 23 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
js 日期比较相关天数代码
Apr 02 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
js实现随机8位验证码
Jul 24 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
vue中是怎样监听数组变化的
Oct 24 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
详解django中使用定时任务的方法
2018/09/27 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
创意广告词
2014/03/17 职场文书
如何写股份合作协议书
2014/09/11 职场文书
求职自我评价范文100字
2014/09/23 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
八月一日观后感
2015/06/10 职场文书
同意落户证明
2015/06/19 职场文书
给学校的建议书400字
2015/09/14 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
2019教师的学习计划
2019/06/25 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS