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 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
JS创建或填充任意长度数组的小技巧汇总
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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
js中判断控件是否存在
2010/08/25 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
2013/07/08 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
python各种语言间时间的转化实现代码
2016/03/23 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
python标识符命名规范原理解析
2020/01/10 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
婚礼父母致辞
2015/07/28 职场文书
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA