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代码实现随机颜色的小方块
Jul 30 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
js事件委托和事件代理案例分享
Jul 25 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
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 静态变量与自定义常量的使用方法
2010/01/26 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
Node.js实现文件上传
2016/07/05 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
python多重继承实例
2014/10/11 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
pycharm安装图文教程
2017/05/02 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
学校经典推荐信
2013/10/30 职场文书
优秀护士事迹材料
2014/12/25 职场文书
个人年底工作总结
2015/03/10 职场文书
2015年工程部工作总结
2015/04/30 职场文书
门卫管理制度范本
2015/08/05 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
导游词之塘栖古镇
2019/12/04 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python