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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
js核心基础之闭包的应用实例分析
May 11 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二维/三维数组转字符串
2013/09/13 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python获取本机所有IP地址的方法
2018/12/26 Python
对Python w和w+权限的区别详解
2019/01/23 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
python numpy库np.percentile用法说明
2020/06/08 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
后勤岗位职责
2013/11/26 职场文书
《木笛》教学反思
2014/03/01 职场文书
护校行动方案
2014/05/31 职场文书
授权委托书
2014/07/31 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书