最近最網路上看了一個人面試淘寶時的經歷,然後發現了自己有很多好多不太清楚的地方,所以特此寫點文章來加深自己對一些問題的理解。
文章中提到了一個問題是: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 の継承メカニズムは一部のオブジェクト指向言語と比較すると、荒削りでいくつかの欠陥がありますが、それでもフロントエンドの開発が遅くなるわけではありません。この点に関する著者の熱意。