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 YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
jquery tools之tooltip
Jul 25 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
页面点击小红心js实现代码
May 26 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
详解mpvue开发小程序小总结
Jul 25 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 session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
python 矩阵增加一行或一列的实例
2018/04/04 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python 自动批量打开网页的示例
2019/02/21 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
Python常用数据分析模块原理解析
2020/07/20 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
研修第一天随笔感言
2014/02/15 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
主持稿开场白
2015/06/01 职场文书