深入理解JavaScript是如何實現繼承的_javascript技巧

最近最網路上看了一個人面試淘寶時的經歷，然後發現了自己有很多好多不太清楚的地方，所以特此寫點文章來加深自己對一些問題的理解。

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

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

我們知道JavaScript中的function是萬能的，除了用於的函數定義，也可以用於類別的定義。

JavaScript的繼承，說起來也是有點怪，不像C 和一些物件導向的語言，他沒有public,private等存取控制修飾，也沒有implement或其他特定的符號來說明是實作繼承。

關於javascript類別的繼承可以參考一下下面的這個例子。

複製代碼 代碼如下:

上例中，首先是聲明一個person類，裡麵包含了一些屬性和方法，然後接著又聲明了一個programmer類，其中有個base屬性，這個屬性並不是必需的，但是出於規範以及以後在尋找物件所繼承的類別時都需要寫上，然後是給programmer的原型物件（prototype）拷貝了person類別；於是便實現了類別的繼承。

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

在物件導向的語言中，我們使用類別來建立一個自訂物件。然而JavaScript中所有事物都是對象，那麼用什麼辦法來建立自訂對象呢？

這就需要引入另一個概念- 原型（prototype），我們可以簡單的把prototype看做是一個模版，新創建的自定義對像都是這個模版（prototype）的一個拷貝（實際上不是拷貝而是鏈接，只不過這種鏈接是不可見，給人們的感覺好像是拷貝）。

讓我們來看看透過prototype建立自訂物件的範例：

複製程式碼

程式碼如下:// 建構子  function Person(name, sex) {

      this.name = name;

    原型，原型中的屬性可由自訂物件引用
  Person.prototype = {
      getName: function() {
       ex: function() {
          return this.sex;
      }
  }



這裡我們把函數Person稱為建構函數，也就是建立自訂物件的函數。可以看出，JavaScript透過建構函數和原型的方式模擬實現了類別的功能。

下面透過一個例子來具體闡述創建一個自訂對象，javascript所做的具體的工作：

複製程式碼

程式碼如下:

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

コード var zhang = new Person("ZhangSan", "man") が実行されると、実際に内部で次のことが行われます。

空のオブジェクト (new Object()) を作成します。
Person.prototype の属性 (キーと値のペア) をこの空のオブジェクトにコピーします (前述したように、内部実装はコピーではなく隠しリンクです)。
this キーワードを使用してこのオブジェクトをコンストラクターに渡し、コンストラクターを実行します。
このオブジェクトを変数 zhang に代入します。
すべての作業が完了しました。
プロトタイプ テンプレートがインスタンス化されたオブジェクトにコピーされるのではなく、リンクの方法であることを証明するには、次のコードを参照してください:

コードをコピー コードは次のとおりです。

function person(name, sex) {
this.name = name;
this.sex = sex;
}
person.prototype.age = 20;
var zhang = new Person("ZhangSan", "man");
console.log(zhang.age) // 20
; //
zhang.age = 19;
console.log(zhang.age) のプロトタイプを上書きします // 19
delete zhang.age;
// インスタンス属性を削除した後age、この属性値はプロトタイプから取得されます
console.log(zhang.age) // 20

;

上記の例では、コピーによってのみ取得された場合、age 属性を削除した後、オブジェクトは存在しません。ただし、この例の age 属性は引き続き出力または上書きできます。サブクラス内の同じ名前の属性が削除されただけで、親クラスの age 属性は非表示のリンクを介してオブジェクト内にまだ存在します。

JavaScript で単純な継承を実装するにはどうすればよいですか?

次の例では、従業員クラス Employee を作成します。これは、プロトタイプのすべてのプロパティを Person から継承します。

コードをコピーします コードは次のとおりです:

function Employee(name, sex,employeeID) {
this.name = name;
this.sex = sex;
this.employeeID =employeeID;
}
// Employee のプロトタイプが Person
のインスタンスを指すようにします。 // Employee の person インスタンスは person プロトタイプのメソッドを呼び出すことができるため、Employee のインスタンスは person プロトタイプのすべてのプロパティを呼び出すこともできます。
Employee.prototype = new Person();
Employee.prototype.getEmployeeID = function() {
return this.employeeID;
};
var zhang = new Employee("ZhangSan" , "man", "1234");
console.log(zhang.getName()); // "ZhangSan

わかりました。上記は JavaScript で継承を実装するためのいくつかの具体的なプロセスです。 、および継承を実装するメソッド。

もちろん、要約すると、JavaScript の継承メカニズムは一部のオブジェクト指向言語と比較すると、荒削りでいくつかの欠陥がありますが、それでもフロントエンドの開発が遅くなるわけではありません。この点に関する著者の熱意。