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 相关文章推荐
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
js给selected添加options的方法
May 06 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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
PHP编码规范-php coding standard
2007/03/16 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
表单内同名元素的控制
2006/11/22 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
详解Django中Request对象的相关用法
2015/07/17 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python迭代dict的key和value的方法
2018/07/06 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
小学教师事迹材料
2014/01/13 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
升学宴学生致辞
2015/09/29 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python