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 相关文章推荐
JS 自定义函数缺省值的设置方法
May 05 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
js取得html iframe中的元素和变量值
Jun 30 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
angularJS模态框$modal实例代码
May 27 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
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
javascript中的作用域scope介绍
2010/12/28 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
js数组操作学习总结
2013/11/04 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
python绘制动态曲线教程
2020/02/24 Python
为什么说python更适合树莓派编程
2020/07/20 Python
python爬虫用mongodb的理由
2020/07/28 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
北承题目(C++)
2012/05/16 面试题
汽车机修工岗位职责
2014/03/06 职场文书
环境日宣传活动总结
2014/07/09 职场文书
股东授权委托书范本
2014/09/13 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技