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 相关文章推荐
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
AngularJS基础知识
Dec 21 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
js实现简单的轮播图效果
Dec 13 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
iframe实用操作锦集
2014/04/22 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
python 捕获shell脚本的输出结果实例
2017/01/04 Python
python中异常捕获方法详解
2017/03/03 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
自我鉴定怎么写
2013/12/05 职场文书
抗震救灾标语
2014/06/26 职场文书
应届生求职信范文
2014/06/30 职场文书
股东出资证明书范例
2014/10/04 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
施工现场安全管理制度
2015/08/05 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
详解JAVA的控制语句
2021/11/11 Java/Android