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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
vue设置全局访问接口API地址操作
Aug 14 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中的按位与和按位或操作示例
2014/01/27 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
Vue 实现简易多行滚动"弹幕"效果
2020/01/02 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
人事部主管岗位职责
2013/12/26 职场文书
寒假思想汇报
2014/01/10 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
服务宗旨标语
2014/07/01 职场文书