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 相关文章推荐
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
详解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
合作指挥官:孟斯克
2020/03/16 星际争霸
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
ionic3 懒加载
2017/08/16 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
Python常见数据结构详解
2014/07/24 Python
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
中青班党性分析材料
2014/02/16 职场文书
求职意向书
2014/07/29 职场文书
财产分割协议书范本
2014/11/03 职场文书
暂停营业通知
2015/04/25 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python