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获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
javascript对象的创建和访问
Mar 08 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 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
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
php解决约瑟夫环示例
2014/04/09 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
js实现文字截断功能
2016/09/14 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python中的默认参数实例分析
2018/01/29 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
Python模块的加载讲解
2019/01/15 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
毕业班联欢会主持词
2014/03/27 职场文书
求职意向书
2014/04/01 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
学位证书委托书
2014/09/30 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
户外拓展训练感想
2015/08/07 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js