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 相关文章推荐
jquery 可排列的表实现代码
Nov 13 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
简单了解Vue computed属性及watch区别
Jul 10 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&&mysql)三
2006/10/09 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
2017/08/16 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
使用JS获取页面上的所有标签
2018/10/18 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
临床医师专业个人自我评价范文
2013/11/07 职场文书
自我鉴定注意事项
2014/01/19 职场文书
银行员工辞职信范文
2014/01/20 职场文书
情侣吵架检讨书
2014/02/05 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
毕业生就业协议书
2014/04/11 职场文书
业务员自荐信范文
2014/04/20 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
新农村建设典型材料
2014/05/31 职场文书
企业精神口号
2014/06/11 职场文书
学校安全管理责任书
2014/07/23 职场文书
小学生表扬稿范文
2015/05/05 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
无线电通信名词解释
2022/02/18 无线电
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle