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 匿名函数的理解(透彻版)
Jan 28 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
Ajax异步刷新功能及简单案例
Nov 20 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里面的抽象类
2010/01/28 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
python与C互相调用的方法详解
2017/07/14 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python入门之基础语法学习笔记
2020/02/08 Python
python字符串的index和find的区别详解
2020/06/20 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
入党积极分子思想汇报
2014/01/02 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
小学假期安全广播稿
2014/09/28 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python