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延迟执行实现方法(setTimeout)
Dec 30 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
Apr 27 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
Vue性能优化的方法
Jul 30 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和MySQL保存和输出图片
2006/10/09 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP加密解密类实例分析
2015/04/20 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
Python遍历指定文件及文件夹的方法
2015/05/09 Python
简单介绍Python中的floor()方法
2015/05/15 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
妇科医生自荐信
2013/11/05 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
优秀团支部申报材料
2014/12/26 职场文书
个人年终总结怎么写
2015/03/09 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS