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 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
Node学习记录之cluster模块
May 31 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
node错误处理与日志记录的实现
Dec 24 Javascript
js事件触发操作实例分析
Jun 21 Javascript
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
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP微信API接口类
2016/08/22 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
python执行等待程序直到第二天零点的方法
2015/04/23 Python
python中id函数运行方式
2020/07/03 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
CSS3 边框效果
2019/11/04 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
煤矿班组长竞聘书
2014/03/31 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
财政局长个人总结
2015/03/04 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
二胎满月酒致辞
2015/07/29 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android