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 相关文章推荐
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 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的autoLoad自动加载机制
2012/09/27 PHP
php标签云的实现代码
2012/10/10 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
js实现消息滚动效果
2017/01/18 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
使用Python & Flask 实现RESTful Web API的实例
2017/09/19 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
python中栈的原理及实现方法示例
2019/11/27 Python
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
任课老师推荐信范文
2013/11/24 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
大一新生学期自我评价
2014/04/09 职场文书
环保倡议书500字
2014/05/15 职场文书
岗位安全生产责任书
2014/07/28 职场文书
单位在职证明书
2014/09/11 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL