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行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
Node.js返回JSONP详解
May 18 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
js实现秒表计时器
Dec 16 Javascript
Vue仿百度搜索功能
Dec 28 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
如何使用PHP往windows中添加用户
2006/12/06 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
餐饮营销方案
2014/02/23 职场文书
学校教师安全责任书
2014/07/23 职场文书
国企干部对照检查材料
2014/08/22 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
法定代表人授权委托书
2014/09/19 职场文书
公司离职证明标准样本
2014/10/05 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
js Proxy的原理详解
2021/05/25 Javascript
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL