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中style属性
Oct 11 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
react学习笔记之state以及setState的使用
Dec 07 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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学习 运算符与运算符优先级
2008/06/15 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
详细介绍Python函数中的默认参数
2015/03/30 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
UDP协议功能
2013/01/06 面试题
override和overload的区别
2016/03/09 面试题
什么时候用assert
2015/05/08 面试题
市场专员岗位职责
2014/02/14 职场文书
六一亲子活动总结
2014/07/01 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
vue elementUI表格控制对应列
2022/04/13 Vue.js