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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 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实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
layui导航栏实现代码
2017/05/19 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
python自定义类并使用的方法
2015/05/07 Python
简单介绍Python中的floor()方法
2015/05/15 Python
python变量不能以数字打头详解
2016/07/06 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
python检索特定内容的文本文件实例
2018/06/05 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
出纳试用期自我鉴定
2014/04/07 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
经济管理自荐书
2014/06/09 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
财会专业大学生求职信
2014/09/26 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
小学数学教学随笔
2015/08/14 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js