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 window.document的属性、方法和事件小结
Oct 24 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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 JSON格式的中文显示问题解决方法
2015/04/09 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
JS常用知识点整理
2017/01/21 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
JS如何生成动态列表
2020/09/22 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
Python群发邮件实例代码
2014/01/03 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python 实现线程之间的通信示例
2020/02/14 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
职工趣味运动会方案
2014/02/10 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
python实现剪贴板的操作
2021/07/01 Python
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL