摘要:我們有了構造函數之后,第二步開始使用它構造一個函數。來個例子這種方式很簡單也很直接,你在構造函數的原型上定義方法,那么用該構造函數實例化出來的對象都可以通過原型繼承鏈訪問到定義在構造函數原型上的方法。
來源: 個人博客白話解釋 Javascript 原型繼承(prototype inheritance) 什么是繼承?
學過“面向對象”的同學們是否還記得,老師整天掛在嘴邊的面向對象三大特征:封裝,繼承,多態。今天我們就來白話一下javascript中的原型繼承,沒學過的同學們也不用擔心,跟著往下走,我相信你會明白的。
繼承,當然是面向對象其中的一種思想和概念了,所謂繼承,顧名思義就是繼承了。。。
比如說小明是老明唯一的兒子,老明有一個億的資產,這一個億的資產雖然不在小明手里,但是小明是老明兒子,小明在一定程度上“繼承”了他老爸給他提供的這么多的資產,小明不僅可以享用自己賺來的錢,也可以隨時消費他父輩的資產。
在程序中,其實也是類似的,如果一個對象A繼承了對象B,那么對象A不僅可以使用自己的屬性和方法,同時也可以使用父級B中的屬性和方法。
為了能夠說明白Javascript 中的原型繼承,就不得不說javascript中的對象。
javascript對象兩種創建(聲明)方式在javascript中你可以使用以下方式創建一個javascript 對象(object).
對象字面量(object literal)方式
構造函數(constructor)方式 // es6中可以用class創建一個真正的對象
Object.create(prototype) //常用此方法進行對象間繼承
第一種對象字面量方式很簡單粗暴:
var a = {}; // 我創建了一個空對象a
第二種“構造函數”方式來“創建對象”。
“構造函數”只是創建一個對象的第一步!有了構造函數之后,第二部就是用它創建一個對象!
所以, 第一步,來一個構造函數,你可以把它當成一個普通函數,比如:
function People(name) { this.name = name; }
這個函數也可以接受參數,如果大家對this關鍵字不了解,請先看《詳解javascript this關鍵字》這個教程,這里我就不啰嗦了。
我們有了構造函數之后,第二步開始使用它構造一個函數。
在javascript中,我們使用 “new” 操作符 + 構造函數 來創建一個對象。
var a = new People("xiaoming"); var b = new People;
順便提一下,如果你不想給構造函數傳入參數,那么帶不帶括號都是一樣的,也就是說:
var a = new People; var b = new People();
這兩種創建對象方式都正確。
小提示:其實第一種對象字面量方式只是構建對象的語法糖(syntax sugar),底層還是使用構造函數方式構造的:
new Object()
大家不相信的話,可以打開你的chrome的控制臺,直接輸入:
Object
是不是看到了下面這一行?
function Object() { [native code] }
這個Object也是個構造函數,只不過這里原生代碼。
原型prototype現在大家知道了javascript中對象創建的兩種方式。
var a = {}; var xiaoming = new People();
接下來這句話請大家重復三遍:
所有的javascript對象都從一個叫“原型”的地方繼承了所有的屬性和方法!
這個“原型”是個啥?就是個對象!你可以把它想象成:{}。
我們前面說了創建對象的兩種方法:
1, 對象字面量
var a = {}; // 其實等于 var a = new Object;
2, 構造函數
function People(){ } var a = new People();
我們說過了:
所有的javascript對象都從一個叫“原型”的地方繼承了所有的屬性和方法!
上面這兩個例子中對象是:
a
那么原型(prototype)在哪呢?大家試著和我一樣做一下:
console.log(Object.prototype); console.log(People.prototype);
是不是都輸出了一個對象?
我們之前也說了,原型(prototype)就是一個對象而已,現在大家也知道它在哪了吧?原型就是構造函數的一個屬性,這里可能聽著有點別扭,函數的屬性?對,javascript中的構造函數也是對象!
重要的事情說三遍:javascript的原型(prototype)是什么?就是“構造函數”下的一個對象叫做“原型”(prototype)
再添一句,這個原型對象中又有個名為“constructor”的屬性,指向了該函數本身。
function People(){} People.prototype.constructor === People // true
再提醒一下,原型只存在在“構造函數”中,有些同學會誤解的去找一個“對象”或“對象字面量”的原型(prototype),因為我們說了原型(prototype)只存在在“構造函數”中,所以去對象或對象字面量里找原型的找不到的,只能返回undefined。比如:
var a = {}; console.log(a.prototype) // 返回undefined // 或者 function People() {} var p = new People; console.log(p.prototype) // 依然返回undefined // 但是 console.log(People.prototype) // 就返回一個{} 當然這里面有好多原生的方法
但是,還有一個特別屬性
__proto__
可以讓你“向父級”查看,當前對象繼承的“原型”是誰?就是孩子找爸爸。
打開你的chrome瀏覽器的控制臺,接著上面的代碼繼續試驗:
a.__proto__ // Object {} p.__proto__ // Object {} a.__proto__ === Object.prototype // true p.__proto__ === People.prototype // true // 我們發現兩個對象的原型都是對象。 // 那么我們再來看看構造函數“繼承”的原型是誰? Object.__proto__ // function () {} People.__proto__ // function () {}
看到這里,希望你能明白,不管是javascript自帶的,還是我們自定義的構造函數依然繼承自匿名函數的原型!(希望你沒暈)
原型繼承有了上面的鋪墊,我們終于能夠開始說一下原型繼承了。如果你上面的知識點都理解了,理解原型繼承不在話下。
來個例子:
function People(name) { this.name = name; } People.prototype.sayHi = function () { console.log("hi, my name is ", this.name); }; var a = new People("xiaoming"); a.sayHi(); // hi, my name is xiaoming var b = new People("laoming"); b.sayHi(); // hi, my name is laoming
這種方式很簡單也很直接,你在構造函數的原型上定義sayHi方法,那么用該構造函數實例化出來的對象都可以通過原型繼承鏈訪問到定義在構造函數原型上的方法。
理解了上述內容,你可以直接利用javascript的原型繼承,也可以用它為基礎構造自己“類”感覺小庫。
來源:個人博客
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88118.html
摘要:深入之繼承的多種方式和優缺點深入系列第十五篇,講解各種繼承方式和優缺點。對于解釋型語言例如來說,通過詞法分析語法分析語法樹,就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇,講解JavaScript各種繼承方式和優缺點。 寫在前面 本文講解JavaScript各種繼承方式和優缺點。 但是注意: 這篇文章更像是筆記,哎,再讓我...
摘要:是完全的面向對象語言,它們通過類的形式組織函數和變量,使之不能脫離對象存在。而在基于原型的面向對象方式中,對象則是依靠構造器利用原型構造出來的。 JavaScript 函數式腳本語言特性以及其看似隨意的編寫風格,導致長期以來人們對這一門語言的誤解,即認為 JavaScript 不是一門面向對象的語言,或者只是部分具備一些面向對象的特征。本文將回歸面向對象本意,從對語言感悟的角度闡述為什...
摘要:對象在中,除了數字字符串布爾值這幾個簡單類型外,其他的都是對象。那么在函數對象中,這兩個屬性的有什么區別呢表示該函數對象的原型表示使用來執行該函數時這種函數一般成為構造函數,后面會講解,新創建的對象的原型。這時的函數通常稱為構造函數。。 本文原發于我的個人博客,經多次修改后發到sf上。本文仍在不斷修改中,最新版請訪問個人博客。 最近工作一直在用nodejs做開發,有了nodejs,...
摘要:首先,需要來理清一些基礎的計算機編程概念編程哲學與設計模式計算機編程理念源自于對現實抽象的哲學思考,面向對象編程是其一種思維方式,與它并駕齊驅的是另外兩種思路過程式和函數式編程。 JavaScript 中的原型機制一直以來都被眾多開發者(包括本人)低估甚至忽視了,這是因為絕大多數人沒有想要深刻理解這個機制的內涵,以及越來越多的開發者缺乏計算機編程相關的基礎知識。對于這樣的開發者來說 J...
閱讀 3233·2021-11-18 10:02
閱讀 1936·2021-09-22 10:54
閱讀 2988·2019-08-30 15:43
閱讀 2576·2019-08-30 13:22
閱讀 1575·2019-08-29 13:57
閱讀 1041·2019-08-29 13:27
閱讀 731·2019-08-26 14:05
閱讀 2511·2019-08-26 13:30