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 源码中文说明之 prototype.js
Sep 22 Javascript
window.location.hash 属性使用说明
Mar 20 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
使用jquery如何获取时间
Oct 13 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
vue 移动端记录页面浏览位置的方法
Mar 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显示指定目录下子目录的方法
2015/03/20 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
javascript实现json页面分页实例代码
2014/02/20 Javascript
js动态切换图片的方法
2015/01/20 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Python高并发和多线程有什么关系
2020/11/14 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
售后客服工作职责
2014/06/16 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
大班上学期个人总结
2015/02/13 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
情况说明书格式及范文
2019/06/24 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
Python - 10行代码集2000张美女图
2021/05/23 Python
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL