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中get()方法用法实例
Dec 27 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
Javascript的一种模块模式
2008/03/22 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
node网页分段渲染详解
2016/09/05 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
vue监听input标签的value值方法
2018/08/27 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
银行业务授权委托书
2014/10/10 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python