JavaScript中继承的一些示例方法与属性参考


Posted in Javascript onAugust 07, 2010

prototype 属性的作用:
利用prototype 属性提供对象的类的一组基本功能。对象的新实例“继承”赋予该对象原型的操作。

prototype 属性的功能:
所有JavaScript 内部对象都有只读的prototype 属性。可以为内部对象的原型添加功能,但该对象不能被赋予不同的原型。
然而,用户定义的对象可以被赋给新的原型。

constructor 属性的作用:
constructor 表示创建对象的函数。

constructor 属性的功能:
constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 JavaScript 内部对象。
constructor 属性保存了对构造特定对象实例的函数的引用。

A 利用prototype 添加对象的属性 [ 方式一]
示例:

<script type="text/javascript"> 
//方式一 
var myObj = function(){ 
this.study = "JavaScript"; 
} 
myObj.prototype.hobby = function() 
{ 
this.hobby = "See girl"; 
} 
var newObj = new myObj(); 
for ( var attr in newObj ) 
{ 
document.write( attr +"<br/>" ); 
} 
</script>

B 利用prototype 添加对象的属性 [ 方式二]
示例:

<script type="text/javascript"> 
//方式二 
var superObj = { name:"xugang" }; 
var subObj = { age:20 }; 
function extend(superObj,subObj){ 
//获得父对象的原型对象 
subObj.getSuper = superObj.prototype; 
//将父对象的属性给子对象 
for(var i in superObj){ 
subObj[i] = superObj[i]; 
} 
} 
extend(superObj,subObj); 
for ( var s in subObj ) 
{ 
document.write( s +"<br/>" ); //遍历子对象的属性 
} 
</script>

C 利用prototype 继承父类的原型属性
示例:

<script> 
function Person(_name){ 
this.name = _name; 
} 
//创建对象(用于更改 prototype 原型对象) 
function addSex(_sex){ 
this.sex = _sex; 
} 
//更改原型对象 
Person.prototype = new addSex('男'); 
var p = new Person('xugang'); 
alert("p 的原型为:" + p.constructor); 
//打印所有属性 
for(var i in p){ 
//alert(p[i]); 
} // ================= 继承 ================= 
//创建子对象 Student 
function Student(_study){ 
this.study = _study; 
} 
// 通过 prototype 让 Student 继承 Person 
Student.prototype = new Person('刘德华'); 
var stu1 = new Student('JS'); 
alert("stu1 的原型为:" + stu1.constructor); 
for(var i in stu1){ 
alert(stu1[i]); 
} 
</script>

因为Student 对象的原型更改为Person 对象,而Person 对象的原型更改为addSex ,所以,Student 对象的原型为addSex 。
注意:一个对象的原型是在 new 对象的那一刻确定的,如果在 new 对象以后更改无效!

D 如何设置对象的原型对象和构造函数
示例:

<script type="text/javascript"> 
function B(){ 
this.name = "刘德华"; 
return "B方法"; 
} 
function C(){ 
this.age = 42; 
return "C方法"; 
} 
B.prototype = new C(); 
var b = new B(); 
b.constructor = B; //重写b的构造方法为B本身 
document.write("b 的构造方法:"); 
document.write(b.constructor() + "<br/>"); 
document.write("b 的原型对象的构造方法:"); 
document.write(b.constructor.prototype.constructor() + "<br/>"); 
for ( var m in b ) 
{ 
document.write("属性:" + m ); 
document.write(" 值:" + b[m] +"<br/>"); 
} 
</script>

结果如下:
b 的构造方法:B方法
b 的原型对象的构造方法:C方法
属性:age 值:42
属性:name 值:刘德华

E 对象中用来保存原型的 __proto__ 变量
示例:

<script type="text/javascript"> 
function myObject(){} 
var my = new myObject(); 
//任何对象都会有一个隐藏的 __proto__ 变量用来保存原型 
document.write(my.__proto__ + "<br/>"); 
//在 Internet Explorer 下显示为:undefined 
//在 Mozilla Firefox 下显示为:[object Object] function Person(){ 
this.name = "刘德华"; 
return "Person 方法"; 
} 
/* 
定义方法后,在内存中相当于: 
Person.prototype = { constructor:Person } 
*/ 
//改变 Person 对象的原型对象 
function Super_Person(){ 
this.hobby = "唱歌"; 
return "Super_Person 方法"; 
} 
Person.prototype = new Super_Person(); 
var newObj = new Person(); 
/* 使用 new 创建对象过程: 
var o = {}; 
Person.prototype.constructor.call(o); 
o = {__proto__:Person.prototype,name = "刘德华"}; 
return o; 
*/ 
document.write(newObj.constructor.prototype.constructor() + "<br/>"); 
//打印newObj原型对象(在 IE 下无效!) 
document.write(newObj.__proto__.constructor() + "<br/>"); 
</script>

在 Firefox 中的结果如下:
[object Object]
Super_Person 方法
Super_Person 方法
Javascript 相关文章推荐
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
在vue中使用echars实现上浮与下钻效果
Nov 08 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
javascript 防止刷新,后退,关闭
Aug 07 #Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 #Javascript
基于jquery的商品展示放大镜
Aug 07 #Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 #Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 #Javascript
javascript new fun的执行过程
Aug 05 #Javascript
过虑特殊字符输入的js代码
Aug 05 #Javascript
You might like
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
php处理带有中文URL的方法
2016/07/11 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
Highcharts入门之简介
2016/08/02 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python安装教程
2018/02/28 Python
查看python下OpenCV版本的方法
2018/08/03 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
找到不普通的东西:Bonanza
2016/10/20 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
信息技术专业个人自我评价
2013/12/11 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android
一文解答什么是MySQL的回表
2022/08/05 MySQL