繼承是一種節省記憶體,復用代碼,使代碼組織更高效的編程思想。在本篇文章中,我將詳細解釋JavaScript中繼承的實現方式,相信通過閱讀本篇文章,你將徹底掌握JavaScript繼承技術,希望你能在工作中找準時機,發揮這一技術的價值。 ...
你應該知道,JavaScript是一門基於原型鏈的語言,而我們今天的主題 -- “繼承”就和“原型鏈”這一概念息息相關。甚至可以說,所謂的“原型鏈”就是一條“繼承鏈”。有些困惑了嗎?接著看下去吧。
一、構造函數,原型屬性與實例對象
要搞清楚如何在JavaScript中實現繼承,我們首先要搞懂構造函數,原型屬性與實例對象三者之間的關係,讓我們先看一段代碼:
function Person(name, age) {
var gender = girl // ①
this.name = name // ②
this.age = age
}
// ③
Person.prototype.sayName = function() {
alert(this.name)
}
// ④
var kitty = new Person('kitty', 14)
kitty.sayName() // kitty
讓我們通過這段代碼澄清幾個概念:
Person
是一個“構造函數”(它用來“構造”對象,並且是一個函數),①處gender
是該構造函數的“私有屬性”,②處的語句定義了該構造函數的“自有屬性”;- ③處的
prototype
是Person
的“原型對象”(它是實例對象的“原型”,同時它是一個對象,但同時它也是構造函數的“屬性”,所以也有人稱它為“原型屬性”),該對象上定義的所有屬性(和方法)都會被“實例對象”所“繼承”(我們終於看到這兩個字了,但是不要心急,我們過一會才會談論它); - ④處的變數“kitty”的值是構造函數
Person
的“實例對象”(它是由構造函數生成的一個實例,同時,它是一個對象),它可以訪問到兩種屬性,一種是通過構造函數生成的“自有屬性”,一種是原型對象可以訪問的所有屬性;
對以上這些概念有清楚的認識,才能讓你對JavaScript的“繼承”與“原型鏈”的理解更加深刻,所以務必保障你已經搞清楚了他們之間的關係。(如果沒有,務必多看幾遍,你可以找張紙寫寫畫畫,我第一次就是這麼做的