快捷導(dǎo)航

JavaScript中繼承的一些示例方法與屬性參考

更新時間：2010年08月07日 20:14:31 作者：

JavaScript中繼承的一些示例方法與屬性參考，學(xué)習(xí)繼承的朋友可以參考下。

prototype 屬性的作用：
利用prototype 屬性提供對象的類的一組基本功能。對象的新實例“繼承”賦予該對象原型的操作。

prototype 屬性的功能：
所有JavaScript 內(nèi)部對象都有只讀的prototype 屬性?？梢詾閮?nèi)部對象的原型添加功能，但該對象不能被賦予不同的原型。
然而，用戶定義的對象可以被賦給新的原型。

constructor 屬性的作用：
constructor 表示創(chuàng)建對象的函數(shù)。

constructor 屬性的功能：
constructor 屬性是所有具有 prototype 的對象的成員。它們包括除 Global 和 Math 對象以外的所有 JavaScript 內(nèi)部對象。
constructor 屬性保存了對構(gòu)造特定對象實例的函數(shù)的引用。

A 利用prototype 添加對象的屬性 [ 方式一]
示例：

復(fù)制代碼代碼如下:

 
<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 添加對象的屬性 [ 方式二]
示例：

復(fù)制代碼代碼如下:

 
<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 繼承父類的原型屬性
示例：

復(fù)制代碼代碼如下:

 
<script> 
function Person(_name){ 
this.name = _name; 
} 
//創(chuàng)建對象(用于更改 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]); 
} 

// ================= 繼承 ================= 
//創(chuàng)建子對象 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 如何設(shè)置對象的原型對象和構(gòu)造函數(shù)
示例：

復(fù)制代碼代碼如下:

 
<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的構(gòu)造方法為B本身 
document.write("b 的構(gòu)造方法："); 
document.write(b.constructor() + "<br/>"); 
document.write("b 的原型對象的構(gòu)造方法："); 
document.write(b.constructor.prototype.constructor() + "<br/>"); 
for ( var m in b ) 
{ 
document.write("屬性：" + m ); 
document.write(" 值：" + b[m] +"<br/>"); 
} 
</script> 

結(jié)果如下：
b 的構(gòu)造方法：B方法
b 的原型對象的構(gòu)造方法：C方法
屬性：age 值：42
屬性：name 值：劉德華

E 對象中用來保存原型的 __proto__ 變量
示例：

復(fù)制代碼代碼如下:

 
<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 方法"; 
} 
/* 
定義方法后，在內(nèi)存中相當(dāng)于： 
Person.prototype = { constructor:Person } 
*/ 
//改變 Person 對象的原型對象 
function Super_Person(){ 
this.hobby = "唱歌"; 
return "Super_Person 方法"; 
} 
Person.prototype = new Super_Person(); 
var newObj = new Person(); 
/* 使用 new 創(chuàng)建對象過程： 
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> 