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 中使用JSON的实现代码
Dec 01 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
详解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时的知识积累总结
2013/06/07 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
JavaScript引用类型Function实例详解
2018/08/09 Javascript
layui获取多选框中的值方法
2018/08/15 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
python生成excel的实例代码
2017/11/08 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
python实现远程控制电脑
2019/05/23 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python模块 _winreg操作注册表
2020/02/05 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
Java模拟试题
2014/11/10 面试题
读书小明星事迹材料
2014/05/03 职场文书
签约仪式策划方案
2014/06/02 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
2014年教师工作总结
2014/11/10 职场文书
课改心得体会范文
2016/01/25 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python