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获取css中的选择器(实例讲解)
Dec 02 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
js实现移动端图片滑块验证功能
Sep 29 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代码
2007/03/03 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
javascript 动态添加表格行
2006/06/22 Javascript
JS代码格式化和语法着色V2
2006/10/14 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
js微信支付实现代码
2016/12/22 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Python I/O与进程的详细讲解
2019/03/08 Python
python实现QQ批量登录功能
2019/06/19 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
银行会计主管岗位职责
2014/10/01 职场文书
简历自荐信范文
2015/03/09 职场文书