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动态调整iframe高度的方法
Mar 06 Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
node.js从数据库获取数据
May 08 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
Element PageHeader页头的使用方法
Jul 26 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对文件进行加锁、解锁实例
2015/01/23 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
python str字符串转uuid实例
2020/03/03 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
python将数据插入数据库的代码分享
2020/08/16 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
外企C语言笔试题
2013/11/10 面试题
最新销售员个人自荐信
2013/09/21 职场文书
工地门卫岗位职责
2013/12/30 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
2015感人爱情寄语
2015/02/26 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python