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访问CSS属性的几种方式介绍
Jul 21 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
JS document对象简单用法完整示例
Jan 14 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
JS常用知识点整理
2017/01/21 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
React key值的作用和使用详解
2018/08/23 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
Python import用法以及与from...import的区别
2015/05/28 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
python 元组和列表的区别
2020/12/30 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
旅游专业职业生涯规划范文
2014/01/13 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
教师年度考核评语
2014/04/28 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
店长岗位职责
2015/02/11 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang