快捷導(dǎo)航

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

更新時(shí)間：2016年05月28日 10:24:05 投稿：jingxian

下面小編就為大家?guī)?lái)一篇javascript 用函數(shù)實(shí)現(xiàn)繼承詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一、知識(shí)儲(chǔ)備：

1、枚舉屬性名稱(chēng)的函數(shù)：

（1）for...in：可以在循環(huán)體中遍歷對(duì)象中所有可枚舉的屬性（包括自有屬性和繼承屬性）

（2）Object.keys()：返回?cái)?shù)組（可枚舉的自有屬性）

（3）Object.getOwnPropertyNames()：所有的自有屬性

3、屬性的特性：數(shù)據(jù)屬性和存取器屬性

（1）數(shù)據(jù)屬性：可寫(xiě)（writable）可枚舉（enumerable）可配置（configurable）值（value）

數(shù)據(jù)屬性只有一個(gè)簡(jiǎn)單的值；

（2）存取器屬性: 寫(xiě)入（set）讀?。╣et）可枚舉（enumerable）可配置（configurable）

存取器屬性不可寫(xiě)（即沒(méi)有writable特性）。

屬性有set方法，那這個(gè)屬性是可寫(xiě)的，有g(shù)et方法，那這個(gè)屬性就是可讀的。

4、定義屬性特性的方法：Object.defineProperty(對(duì)象，屬性，描述符對(duì)象)

5、獲取屬性的描述符對(duì)象：Object.getOwnPropertyDescriptor(對(duì)象，屬性)

二、示例

1、根據(jù)for...in的用法，我們可以寫(xiě)出模擬“繼承”的方法：

<script type="text/javascript"> 
  var child={}; 
  var mother={ 
    name:"zhangzhiying", 
    lastAge:21, 
    sex:"女"
  }; 
  function extend(target,source){ 
  　　　　for(var p in source){ 
    　　target[p]=source[p]; 
  　　　　} 
  　　　　return target; 
  } 
  extend(child,mother); 
  console.log(child);   //<STRONG>Object {name: "zhangzhiying", lastAge: 21, sex: "女"}</STRONG> 
</script>

2、使用for in來(lái)循環(huán)遍歷原型對(duì)象的屬性，然后一一賦值給我們的空對(duì)象，從而實(shí)現(xiàn)了“繼承”。這個(gè)思路很正確，下面我們來(lái)對(duì)以上示例進(jìn)行改造：

<script type="text/javascript"> 
  var child={}; 
  var mother={ 
    name:"zhangzhiying", 
    lastAge:21, 
    <STRONG>set age(value){ 
      this.lastAge=value; 
    }, 
    get age(){ 
      return this.lastAge+1; 
    },</STRONG> 
    sex:"女"
  };<BR>　　　　<STRONG>　mother.age=15;</STRONG>    //有set方法，具有可寫(xiě)性 
  function extend(target,source){ 
  　　　　for(var p in source){ 
    　　target[p]=source[p]; 
  　　　　} 
  　　　　return target; 
  } 
  extend(child,mother); 
  console.log(child);  //<STRONG>Object {name: "zhangzhiying", lastAge: 15, age: 16, sex: "女"}</STRONG> 
</script>

可以看到代碼中使用了一對(duì)set，get；其中age是一個(gè)存取器屬性。

運(yùn)行的結(jié)果：一個(gè)不包含set，get的普通對(duì)象?！?/p>

結(jié)論：for in實(shí)現(xiàn)的“繼承”不處理set和get　，它把存取器屬性（age）轉(zhuǎn)換為一個(gè)靜態(tài)的數(shù)據(jù)屬性。

3、給mother對(duì)象設(shè)置數(shù)據(jù)屬性

<script type="text/javascript"> 
  var child={}; 
  var mother={ 
    name:"zhangzhiying", 
    lastAge:21, 
    set age(value){ 
      this.lastAge=value; 
    }, 
    get age(){ 
      return this.lastAge+1; 
    }, 
    sex:"女"
  }; 
  Object.defineProperty(mother,"lastAge",{writable:false}); //把lastAge設(shè)置成了不可寫(xiě) 
  mother.age=15;                       //設(shè)置無(wú)效，因?yàn)閘astAge的值不變，所以lastAge+1不變，即age不變 
  function extend(target,source){ 
    for(var p in source){ 
    target[p]=source[p]; 
  } 
  return target; 
  } 
  extend(child,mother); 
  console.log(child);   //Object {name: "zhangzhiying", lastAge: 21, age: 22, sex: "女"} 
  child.lastAge=12;　　　　//結(jié)果顯示lastAge改變，說(shuō)明child.lastAge沒(méi)有“繼承”到mother.lastAge的特性，我們?cè)儆胓etOwnPropertyDesriptor()方法確認(rèn)一下<BR>　　　　 console.log(Object.getO

<EM id=__mceDel></script> 
</EM>

結(jié)論：要實(shí)現(xiàn)繼承，我們還需要解決的問(wèn)題->“繼承”屬性特性。

4、完善版本　

<script type="text/javascript"> 
  var child={}; 
  var mother={ 
    name:"zhangzhiying", 
    lastAge:21, 
    set age(value){ 
      this.lastAge=value; 
    }, 
    get age(){ 
      return this.lastAge+1; 
    }, 
    sex:"女"
  }; 
  Object.defineProperty(mother,"lastAge",{writable:false}); 
  mother.age=15; 
  <SPAN style="COLOR: #333399"><STRONG>function extend(target,source){ 
    var names=Object.getOwnPropertyNames(source);  //獲取所有的屬性名 
    for(var i=0;i<names.length;i++){ 
      if(names[i] in target) continue;  //如果這個(gè)屬性存在，就跳過(guò)（原型繼承中，如果自有屬性和原型對(duì)象的屬性重名，保留自有屬性） 
      var desc=Object.getOwnPropertyDescriptor(source,names[i]);  //獲取mother屬性的描述符對(duì)象（即屬性特性的集合，es5中用描述符對(duì)象來(lái)表示） 
      Object.defineProperty(target,names[i],desc);  //將mother的描述符對(duì)象給child的屬性定義 
    } 
    return target; 
  }</STRONG></SPAN> 
  extend(child,mother); 
  console.log(child); 
  child.lastAge=12; 
  console.log(Object.getOwnPropertyDescriptor(child,"lastAge")); 
  console.log(child); 
</script>

最后的結(jié)果：