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 相关文章推荐
JS远程获取网页源代码实例
Sep 05 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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与paypal整合方法
2010/11/28 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python中黄金分割法实现方法
2015/05/06 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python计算n的阶乘的方法代码
2019/10/25 Python
python如何保存文本文件
2020/06/07 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
高一新生军训感言
2014/03/02 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
关于旅游的活动方案
2014/08/15 职场文书
员工培训协议书
2014/09/15 职场文书
导游词之吉林吉塔
2019/11/11 职场文书