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 相关文章推荐
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
js实现模拟购物商城案例
May 18 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上传图片之时间戳命名(保存路径)
2014/08/15 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
python实现图片文件批量重命名
2020/03/23 Python
Python3中的bytes和str类型详解
2019/05/02 Python
Python3 集合set入门基础
2020/02/10 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
详解Python中的Lock和Rlock
2021/01/26 Python
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
计算机专业自我鉴定
2013/10/15 职场文书
《花木兰》教学反思
2014/04/09 职场文书
师德演讲稿范文
2014/05/06 职场文书
精神文明建设标语
2014/06/16 职场文书
毕业生面试求职信
2014/06/23 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
个人债务授权委托书
2014/10/17 职场文书
谢师宴邀请函
2015/02/02 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
励志语录:你若不勇敢,谁替你坚强
2019/11/08 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
Redis读写分离搭建的完整步骤
2021/09/14 Redis
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python