javascript学习笔记(十) js对象 继承


Posted in Javascript onJune 19, 2012

1.原型链
//很少单独使用

View Code 
//定义 SuperClass类,有一个属性property和一个方法getSuperValue 
function SuperClass() { 
this.property = true; 
} 
SuperClass.prototype.getSuperValue = function() { 
return this.property; 
} //定义SubClass类,有一个属性subproperty和后来添加的一个方法getSubValue 
function SubClass() { 
this.subproperty = false; 
} 
//SubClass类继承SuperClass类 
SubClass.prototype = new SuperClass(); 
//SubClass类添加一个方法getSubValue 
SubClass.prototype.getSubValue = function() { 
return this.subproperty; 
} 
//创建SubClass类的实例 
var instance = new SubClass(); 
alert(instance.getSuperValue());

2. 确定原型与实例的关系
第一种方式用 instanceof 操作符,用来测试实例和原型链中出现过的构造函数
alert(instance instanceof Object); //true ,instance是Object的实例吗? 
alert(instance instanceof SuperClass); //true ,instance是SuperClass的实例吗? 
alert(instance instanceof SubClass); //true,instance是SubClass的实例吗?

第二种方式用 isPrototypeOf()方法,测试原型链中出现的原型
alert(Object.prototype.isPrototypeOf(instance)); //true 
alert(SuperClass.prototype.isPrototypeOf(instance)); //true 
alert(SubClass.prototype.isPrototypeOf(instance)); //true

3. 用原型链继承定义方法时的注意点
定义方法是的顺序:
View Code 
function SuperClass() { 
this.property = true; 
} 
SuperClass.prototype.getSuperValue = function() { 
return this.property; 
} function SubClass() { 
this.subproperty = false; 
} 
//SubClass继承SuperClass 
SubClass.prototype = new SuperClass(); //这个要先写,新添加的方法和重写超类的方法要写在后面,否则重写的超类方法将永远无法调用 
//添加新方法 
SubClass.prototype.getSubValue = function() { 
return this.subproperty; 
} 
//重写超类的方法 
SubClass.prototype.getSuperValue = function() { 
return false; 
} 
var instance = new SubClass(); 
alert(instance.getSuperValue()); //fales,这里SubClass的实例调用了SubClass的getSuperValue()方法,而屏蔽了SuperClass的getSuperValue()方法, 
//使用SuperClass的方法会调用SuperClass的getSuperValue()方法

原型链继承的缺点:1)共享超类中的属性,2)在创建子类时不能向超类的构造函数传递参数。所有很少单独使用原型链

4.借用构造函数
//很少单独使用

优点:可以向超类传递参数 。缺点:函数无法复用,所有类都要使用构造函数模式

View Code 
function SuperClass(name) { 
this.name = name; 
} 
function SubClass(){ 
SuperClass.call(this,"RuiLiang"); //继承了SuperClass,同时向SuperClass传递了参数 
this.age = 29; //实例属性 
} var instance = new SubClass(); 
alert(instance.name); //RuiLiang 
alert(instance.age); //29

6.组合继承
//最常用的继承模式
View Code 
//创建SuperClass 
function SuperClass(name) { 
this.name = name; 
this.colors = ["red","blue","green"]; 
} 
SuperClass.prototype.sayName = function() { 
alert(this.name); 
} ////创建SubClass 
function SubClass(name,age) { 
SuperClass.call(this,name); //继承属性 
this.age = age; //自己的属性 
} 
SubClass.prototype = new SuperClass(); //继承方法 
SubClass.prototype.sayAge = function() { //SubClass添加新方法 
alert(this.age); 
}; 
//使用 
var instance1 = new SubClass("RuiLiang",30); 
instance1.colors.push("black"); 
alert(instance1.colors); //"red,blue,green,black" 
instance1.sayName(); //"RuiLiang" 
instance1.sayAge(); //30 
var instance2 = new SubClass("XuZuNan",26); 
alert(instance2.colors); //"red,blue,green" 
instance2.sayName(); //"RuiLiang" 
instance2.sayAge(); //30

7.其它继承模式
原型式继承、寄生式继承、寄生组合式继承
Javascript 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 #Javascript
javascript学习笔记(八) js内置对象
Jun 19 #Javascript
javascript学习笔记(七) js函数介绍
Jun 19 #Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 #Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 #Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 #Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 #Javascript
You might like
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
javascript 函数式编程
2007/08/16 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
python实现趣味图片字符化
2019/04/30 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
2014年药店工作总结
2014/11/20 职场文书
教师党员个人总结
2015/02/10 职场文书
李白故里导游词
2015/02/12 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书