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 相关文章推荐
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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 fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
Python内置函数dir详解
2015/04/14 Python
Python实现截屏的函数
2015/07/25 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
python中update的基本使用方法详解
2019/07/17 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
Django url 路由匹配过程详解
2021/01/22 Python
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
暑期社会实践方案
2014/02/05 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
村长贪污检举信
2014/04/04 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
大学生求职信范文
2014/05/24 职场文书
小学运动会口号
2014/06/07 职场文书