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 浏览器检测代码精简版
Mar 04 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
jquery实现全屏滚动
Dec 28 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 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 foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
工作中常用到的JS表单验证代码(包括例子)
2010/11/11 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
讲解Python中的标识运算符
2015/05/14 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python实现字典依据value排序
2016/02/24 Python
python操作redis方法总结
2018/06/06 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
十岁生日同学答谢词
2014/01/19 职场文书
超市周年庆活动方案
2014/08/16 职场文书
查摆剖析材料范文
2014/09/30 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
通讯稿范文
2015/07/22 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android