javascript用函數(shù)實現(xiàn)繼承詳解_javascript技巧

《javascript用函數(shù)實現(xiàn)繼承詳解_javascript技巧》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在工程資料-天天文庫。

1、一、知識儲備：1、枚舉屬性名稱的函數(shù)：(1)for...in：口J以在循環(huán)體中遍歷對象中所有可枚舉的屬性(包括自有屬性和繼承屬性)(2)Object.keys():返回數(shù)組(可枚舉的自有屬性)(3)Object.getOwnPropertyNames():所有的自有屬性3、屬性的特性：數(shù)據(jù)屬性和存取器屬性(1)數(shù)據(jù)屬性：口J坊(writable)叮枚舉(enumerable)口J配置(configurable)值(value)數(shù)據(jù)屈性只冇一個簡單的值；(2)存取器屬性：寫入(set)讀取(get)可枚舉(enumerable)可配置(configurabl

2、e)存取器屬性不可寫(即沒有writable特性)。屈性有set方法，那這個屈性是可寫的，有get方法，那這個屈性就是可讀的。4、定義屬性特性的方法:Object.defineProperty(對象，屬性,描述符對象)5、獲取屬性的描述符對象:Object.getOwnPropertyDescriptor(對象，屬性)二、示例1、根據(jù)for...in的用法，我們可以寫出模擬“繼承”的方法：varchild={};varmother={ncime:，zzhangzhiying〃，lastAgc:21

3、,sex:女};functionextend(target,source){for(varpinsource){target[p]=source[p];}returntarget;}extend(chi1d,mother);consolc.log(child);//Objcct{name:，zzhangzhiying〃，lastAge:21,sex:女"}〈/STRONG〉2、使用forin來循環(huán)遍歷原型對象的屬性，然后一一賦值給我們的空對象，從而實現(xiàn)了“繼承”。這個思路很正確，下面我們來對以上示例進行改造：

4、type二〃text/javascript〃>varchild={};varmother={name:znangzhiying,lastAge:21,setage(value){this.lastAge=value;},getage(){returnthis.1astAge+1;},sex:?女};
mother,age二15;//有set方法，具有可寫性functioncxtcnd(target,source){for(varpinsource){target[p]=source[

5、p];}returntarget;}extend(chiId,mother);console,log(child);//Object{name:/Zzhangzhiying，z,lastAge:15,age:16,sex:〃女〃}"STRONG〉可以看到代碼中使用了一對set,get；其中3gc是一個存取器屬性。運行的結果：一個不包含set,get的普通對象。結論:forin實現(xiàn)的“繼承”不處理set和get,它把存取器屬性(age)轉(zhuǎn)換為一個靜態(tài)的數(shù)據(jù)屬性。3^給mother對彖設置數(shù)據(jù)屈性

6、xt/javascript〃>varchild={};varmother={name:Z，zhangzhiying/Z,lastAge:21,setage(value){this.lastAge=value;},getage(){returnthis.lastAge+1;},sex:女};Object?defincProperty(mother,，zlastAgc",{writable:false});//把lastAge設置成了不可寫mother,age二15;//設置無效，因為lastAge的值不變，所以laslAge+1不變，即age不變functi

7、onextend(target,source){for(varpinsource){target[p]=source[p];}returnlargel;}extend(child,mother);console,log(child);//Object{name:，zzhangzhiying，z,lastAge:21,age:22,sex:"女"}child.lastAge=12;//結果顯示lastAge改變，說明child.lastAge沒有"繼承”到mother.lastAge的特性，我們再用getOwnPropertyDesriptor()方法確認一

8、下〈BR>console,log(Object.getO