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 相关文章推荐
JavaScript实现Sleep函数的代码
Mar 04 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
Postman的下载及安装教程详解
Oct 16 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实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python调用百度REST API实现语音识别
2018/08/30 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
PyTorch-GPU加速实例
2020/06/23 Python
Python调用JavaScript代码的方法
2020/10/27 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
教堂婚礼主持词
2014/03/14 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
视光学专业自荐信
2014/06/24 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
作息时间调整通知
2015/04/22 职场文书
自书遗嘱范文
2015/08/07 职场文书
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle
SpringBoot详解执行过程
2022/07/15 Java/Android