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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
node+express制作爬虫教程
Nov 11 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
Javascript的this用法
Jan 16 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
微信小程序实现吸顶效果
Jan 08 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生成zip文件类实例
2015/04/07 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
Javascript的this用法
2017/01/16 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python的变量与赋值详细分析
2017/11/08 Python
python实现多人聊天室
2020/03/31 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
NumPy 数组使用大全
2019/04/25 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python super()函数使用及多重继承
2020/05/06 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
社区平安建设方案
2014/05/25 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
护士节活动总结
2014/08/29 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
css3 文字断裂效果
2022/04/22 HTML / CSS