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获取随机数函数可自定义最小值最大值
May 08 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
javascript随机变色实例代码
Oct 15 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
js 操作符汇总
2014/11/08 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
webpack多入口多出口的实现方法
2018/08/17 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
python excel转换csv代码实例
2019/08/26 Python
Python类中self参数用法详解
2020/02/13 Python
如何在pycharm中安装第三方包
2020/10/27 Python
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
类和结构的区别
2012/08/15 面试题
学习之星事迹材料
2014/05/17 职场文书
质量管理标语
2014/06/12 职场文书
自查自纠工作总结
2014/10/15 职场文书
驻村工作简报
2015/07/20 职场文书
超市员工管理制度
2015/08/06 职场文书
我爱我班主题班会
2015/08/13 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL
【2·13】一图读懂中国无线电发展
2022/02/18 无线电