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 相关文章推荐
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
通过Kettle自定义jar包供javascript使用
Jan 29 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
Prototype Number对象 学习
2009/07/19 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
python动态加载变量示例分享
2014/02/17 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python enumerate内置函数用法总结
2020/01/07 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
班级聚会策划书
2014/01/16 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
闭幕式主持词
2014/04/02 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
三字经教学反思
2014/04/26 职场文书
旅游文化节策划方案
2014/06/06 职场文书
小学假期安全广播稿
2014/09/28 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
python和anaconda的区别
2022/05/06 Python