JavaScript是如何實現繼承的

　　最近最網上看了一我的面試淘寶時的經歷，而後發現了本身有好多好多不太清楚的地方，因此特此寫點文章來加深本身對一些問題的理解。

　　文章中提到了一個問題是：JavaScript是如何實現繼承的？

 

 下面我便闡述一些在網上找到的方法和實例來解釋下，藉以加深本身的印象。

　　咱們知道JavaScript中的function是萬能的，除了用於的函數定義，也能夠用於類的定義。

　　JavaScript的繼承，提及來也是有點怪，不像C++和一些面向對象的語言，他沒有public,private等訪問控制修飾，也沒有implement或其餘特定的符號來講明是實現繼承。

　　關於javascript類的繼承能夠參考一下下面的這個例子。

 1 <script type="text/javascript"> 
 2 function Person() {
 3     // 屬性 
 4     this.Gender = "female";
 5     this.Age = 18;
 6     this.Words = "Silence";
 7     // 方法
 8     this.shouting = function() {
 9         alert("開心哦！父類的方法");
10     }
11 }
12 // 繼承
13 function Programmer() {
14     this.base = Person;
15 }
16 Programmer.prototype = new Person;
17 // 爲子類添加新的方法
18 Programmer.prototype.typeCode = function() {
19     alert("俺是敲代碼的！IT民工，很不開心。子類的方法");
20 }
21 // 調用示例
22 function sayHello() {
23     var a = new Programmer();
24     alert(a.Gender); // 調用父類的屬性
25     a.shouting(); // 調用父類的方法
26     a.typeCode(); // 調用子類的方法
27 }        
28 sayHello();
29 </script>

　　上例中，首先是聲明一個person類，裏面包含了一些屬性和方法，而後接着又聲明瞭一個programmer類，其中有個base屬性，這個屬性並非必需的，可是出於規範以及之後在查找對象所繼承的類時都須要寫上，而後是給programmer的原型對象（prototype）拷貝了person類；因而便實現了類的繼承。

模擬JavaScript中類和繼承的一些原理

　　在面向對象的語言中，咱們使用類來建立一個自定義對象。然而JavaScript中全部事物都是對象，那麼用什麼辦法來建立自定義對象呢？

這就須要引入另一個概念 - 原型（prototype），咱們能夠簡單的把prototype看作是一個模版，新建立的自定義對象都是這個模版（prototype）的一個拷貝 （實際上不是拷貝而是連接，只不過這種連接是不可見，給人們的感受好像是拷貝）。

　　讓咱們看一下經過prototype建立自定義對象的一個例子： 

 1 // 構造函數
 2   function Person(name, sex) {
 3       this.name = name;
 4       this.sex = sex;
 5   }
 6   // 定義Person的原型，原型中的屬性能夠被自定義對象引用
 7   Person.prototype = {
 8       getName: function() {
 9           return this.name;
10       },
11       getSex: function() {
12           return this.sex;
13       }
14   }

　　這裏咱們把函數Person稱爲構造函數，也就是建立自定義對象的函數。能夠看出，JavaScript經過構造函數和原型的方式模擬實現了類的功能。

　　下面經過一個例子來具體闡述建立一個自定義對象，javascript所作的具體的工做：

1 var zhang = new Person("ZhangSan", "man");
2 console.log(zhang.getName()); // "ZhangSan"
3 var chun = new Person("ChunHua", "woman");
4 console.log(chun.getName()); // "ChunHua"

　　當代碼var zhang = new Person("ZhangSan", "man")執行時，其實內部作了以下幾件事情：

1. 建立一個空白對象（new Object()）。
2. 拷貝Person.prototype中的屬性（鍵值對）到這個空對象中（咱們前面提到，內部實現時不是拷貝而是一個隱藏的連接）。
3. 將這個對象經過this關鍵字傳遞到構造函數中並執行構造函數。
4. 將這個對象賦值給變量zhang。
5. 全部工做完成。

　　爲了證實prototype模版並非被拷貝到實例化的對象中，而是一種連接的方式，請看以下代碼：

 1 function Person(name, sex) {
 2     this.name = name;
 3     this.sex = sex;
 4 }
 5 Person.prototype.age = 20;
 6 var zhang = new Person("ZhangSan", "man");
 7 console.log(zhang.age); // 20
 8 // 覆蓋prototype中的age屬性
 9 zhang.age = 19;
10 console.log(zhang.age); // 19
11 delete zhang.age;
12 // 在刪除實例屬性age後，此屬性值又從prototype中獲取
13 console.log(zhang.age); // 20

　　在上面的這個例子中，若是他僅僅是經過拷貝得來的，則在刪除了這個age這個屬性後，這個對象裏面將不會存在，可是例子中的age屬性還能輸出，仍是覆蓋之前的值，說明咱們僅僅是刪除了子類中同名的屬性，而父類當中的age屬性經過一種不可見的連接依然存在在對象中。

如何在JavaScript中實現簡單的繼承？

　　下面的例子將建立一個僱員類Employee，它從Person繼承了原型prototype中的全部屬性。

 1 function Employee(name, sex, employeeID) {
 2     this.name = name;
 3     this.sex = sex;
 4     this.employeeID = employeeID;
 5 }
 6 // 將Employee的原型指向Person的一個實例
 7 // 由於Person的實例能夠調用Person原型中的方法, 因此Employee的實例也能夠調用Person原型中的全部屬性。
 8 Employee.prototype = new Person();
 9 Employee.prototype.getEmployeeID = function() {
10     return this.employeeID;
11 };
12 var zhang = new Employee("ZhangSan", "man", "1234");
13 console.log(zhang.getName()); // "ZhangSan

　　好了，以上就是一些關於javascript實現繼承的具體過程，和實現繼承的方法。

　　固然總結一下，javascript中的繼承機制僅僅是靠模擬的，於一些面向對象的語言來說，顯的粗糙並且還有一些缺陷，不過總的來說，這依然不併會下降前端開發者在這方面的熱情。

　　

　　最後，第一次發博客，不免存在一些不足的地方，忘各位指正與見諒。

　　另外推廣下我的小站：www.xiangyifight.com