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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
vue实现多级菜单效果
Oct 19 Javascript
js实现左右轮播图
Jan 09 Javascript
详解ES6中class的实现原理
Oct 03 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
我的论坛源代码(五)
2006/10/09 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
Python压缩和解压缩zip文件
2015/02/14 Python
python基于ID3思想的决策树
2018/01/03 Python
Python重新加载模块的实现方法
2018/10/16 Python
PyQt5 多窗口连接实例
2019/06/19 Python
keras得到每层的系数方式
2020/06/15 Python
HTML5进度条特效
2014/12/18 HTML / CSS
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
生物科学专业个人求职信范文
2013/12/05 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
活动策划求职信模板
2014/04/21 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
灵山大佛导游词
2015/02/04 职场文书
综治目标管理责任书
2015/05/11 职场文书
海底两万里读书笔记
2015/06/26 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL