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 相关文章推荐
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
详解webpack打包vue时提取css
May 26 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
Mar 27 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php类
2006/11/27 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
深入理解PHP内核(一)
2015/11/10 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
详解Django通用视图中的函数包装
2015/07/21 Python
Python 常用string函数详解
2016/05/30 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
观看信仰心得体会
2014/09/04 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
同意迁入证明模板
2014/10/26 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书