DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript中繼承的一些示例方法與屬性參考
JavaScript中繼承的一些示例方法與屬性參考
編輯:關於JavaScript     
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 方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved