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的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
node.js实现快速截图
Aug 27 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
深入理解JavaScript 箭头函数
May 30 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
php adodb操作mysql数据库
2009/03/19 PHP
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
yii2安装详细流程
2018/05/23 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
js实现时间日期校验
2020/05/26 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
2013年入党人员的自我鉴定
2013/10/25 职场文书
会计助理的岗位职责
2013/11/29 职场文书
客服服务心得体会
2013/12/30 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
年底个人总结范文
2015/03/10 职场文书
会计出纳岗位职责
2015/03/31 职场文书
千与千寻观后感
2015/06/04 职场文书
python字符串常规操作大全
2021/05/02 Python
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
如何使用python包中的sched事件调度器
2022/04/30 Python
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS