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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 Javascript
js实现全选和全不选
Jul 28 Javascript
vue实现表格合并功能
Dec 01 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 socke 向指定页面提交数据
2008/07/23 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
php中__toString()方法用法示例
2016/12/07 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
完善的jquery处理机制
2016/02/21 Javascript
Json解析的方法小结
2016/06/22 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
jquery animate动画持续运动的实例
2017/11/29 jQuery
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python发送伪造的arp请求
2014/01/09 Python
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python数组过滤实现方法
2015/07/27 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
开放系统互连参考模型
2016/06/29 面试题
房屋转让协议书
2014/10/18 职场文书
学校通报表扬范文
2015/05/04 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB