成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

白話解釋 Javascript 原型繼承(prototype inheritance)

kid143 / 2917人閱讀

摘要：我們有了構(gòu)造函數(shù)之后，第二步開始使用它構(gòu)造一個(gè)函數(shù)。來(lái)個(gè)例子這種方式很簡(jiǎn)單也很直接，你在構(gòu)造函數(shù)的原型上定義方法，那么用該構(gòu)造函數(shù)實(shí)例化出來(lái)的對(duì)象都可以通過(guò)原型繼承鏈訪問(wèn)到定義在構(gòu)造函數(shù)原型上的方法。

來(lái)源: 個(gè)人博客
白話解釋 Javascript 原型繼承(prototype inheritance) 什么是繼承?

學(xué)過(guò)“面向?qū)ο蟆钡耐瑢W(xué)們是否還記得，老師整天掛在嘴邊的面向?qū)ο笕筇卣鳎悍庋b，繼承，多態(tài)。今天我們就來(lái)白話一下javascript中的原型繼承，沒(méi)學(xué)過(guò)的同學(xué)們也不用擔(dān)心，跟著往下走，我相信你會(huì)明白的。

繼承，當(dāng)然是面向?qū)ο笃渲械囊环N思想和概念了，所謂繼承，顧名思義就是繼承了。。。

比如說(shuō)小明是老明唯一的兒子，老明有一個(gè)億的資產(chǎn)，這一個(gè)億的資產(chǎn)雖然不在小明手里，但是小明是老明兒子，小明在一定程度上“繼承”了他老爸給他提供的這么多的資產(chǎn)，小明不僅可以享用自己賺來(lái)的錢，也可以隨時(shí)消費(fèi)他父輩的資產(chǎn)。

在程序中，其實(shí)也是類似的，如果一個(gè)對(duì)象A繼承了對(duì)象B，那么對(duì)象A不僅可以使用自己的屬性和方法，同時(shí)也可以使用父級(jí)B中的屬性和方法。

為了能夠說(shuō)明白Javascript 中的原型繼承，就不得不說(shuō)javascript中的對(duì)象。

javascript對(duì)象兩種創(chuàng)建(聲明)方式

在javascript中你可以使用以下方式創(chuàng)建一個(gè)javascript 對(duì)象(object).

對(duì)象字面量(object literal)方式

構(gòu)造函數(shù)(constructor)方式 // es6中可以用class創(chuàng)建一個(gè)真正的對(duì)象

Object.create(prototype) //常用此方法進(jìn)行對(duì)象間繼承

第一種對(duì)象字面量方式很簡(jiǎn)單粗暴:

var a = {}; // 我創(chuàng)建了一個(gè)空對(duì)象a

第二種“構(gòu)造函數(shù)”方式來(lái)“創(chuàng)建對(duì)象”。

“構(gòu)造函數(shù)”只是創(chuàng)建一個(gè)對(duì)象的第一步！有了構(gòu)造函數(shù)之后，第二部就是用它創(chuàng)建一個(gè)對(duì)象！

所以， 第一步，來(lái)一個(gè)構(gòu)造函數(shù)，你可以把它當(dāng)成一個(gè)普通函數(shù)，比如：

function People(name) {
    this.name = name;
}

這個(gè)函數(shù)也可以接受參數(shù)，如果大家對(duì)this關(guān)鍵字不了解，請(qǐng)先看《詳解javascript this關(guān)鍵字》這個(gè)教程，這里我就不啰嗦了。

我們有了構(gòu)造函數(shù)之后，第二步開始使用它構(gòu)造一個(gè)函數(shù)。

在javascript中，我們使用 “new” 操作符 + 構(gòu)造函數(shù) 來(lái)創(chuàng)建一個(gè)對(duì)象。

var a = new People("xiaoming");
var b = new People;

順便提一下，如果你不想給構(gòu)造函數(shù)傳入?yún)?shù)，那么帶不帶括號(hào)都是一樣的，也就是說(shuō)：

var a = new People;
var b = new People();

這兩種創(chuàng)建對(duì)象方式都正確。

小提示：其實(shí)第一種對(duì)象字面量方式只是構(gòu)建對(duì)象的語(yǔ)法糖(syntax sugar)，底層還是使用構(gòu)造函數(shù)方式構(gòu)造的：

new Object()

大家不相信的話，可以打開你的chrome的控制臺(tái)，直接輸入：

Object

是不是看到了下面這一行？

function Object() { [native code] }

這個(gè)Object也是個(gè)構(gòu)造函數(shù)，只不過(guò)這里原生代碼。

原型prototype

現(xiàn)在大家知道了javascript中對(duì)象創(chuàng)建的兩種方式。

var a = {};
var xiaoming = new People();

接下來(lái)這句話請(qǐng)大家重復(fù)三遍：

所有的javascript對(duì)象都從一個(gè)叫“原型”的地方繼承了所有的屬性和方法！

這個(gè)“原型”是個(gè)啥？就是個(gè)對(duì)象！你可以把它想象成：{}。

我們前面說(shuō)了創(chuàng)建對(duì)象的兩種方法：
1, 對(duì)象字面量

var a = {};
// 其實(shí)等于
var a = new Object;

2, 構(gòu)造函數(shù)

function People(){
}

var a = new People();

我們說(shuō)過(guò)了：

所有的javascript對(duì)象都從一個(gè)叫“原型”的地方繼承了所有的屬性和方法！

上面這兩個(gè)例子中對(duì)象是：

a

那么原型(prototype)在哪呢？大家試著和我一樣做一下：

console.log(Object.prototype);
console.log(People.prototype);

是不是都輸出了一個(gè)對(duì)象？

我們之前也說(shuō)了，原型（prototype）就是一個(gè)對(duì)象而已，現(xiàn)在大家也知道它在哪了吧？原型就是構(gòu)造函數(shù)的一個(gè)屬性，這里可能聽(tīng)著有點(diǎn)別扭，函數(shù)的屬性？對(duì)，javascript中的構(gòu)造函數(shù)也是對(duì)象！

重要的事情說(shuō)三遍：javascript的原型(prototype)是什么？就是“構(gòu)造函數(shù)”下的一個(gè)對(duì)象叫做“原型”(prototype)

再添一句，這個(gè)原型對(duì)象中又有個(gè)名為“constructor”的屬性，指向了該函數(shù)本身。

function People(){}

People.prototype.constructor === People // true

再提醒一下，原型只存在在“構(gòu)造函數(shù)”中，有些同學(xué)會(huì)誤解的去找一個(gè)“對(duì)象”或“對(duì)象字面量”的原型(prototype)，因?yàn)槲覀冋f(shuō)了原型(prototype)只存在在“構(gòu)造函數(shù)”中，所以去對(duì)象或?qū)ο笞置媪坷镎以偷恼也坏降?，只能返回undefined。比如：

var a = {};
console.log(a.prototype) // 返回undefined

// 或者

function People() {}
var p = new People;
console.log(p.prototype) // 依然返回undefined

// 但是
console.log(People.prototype) // 就返回一個(gè){} 當(dāng)然這里面有好多原生的方法

但是，還有一個(gè)特別屬性

__proto__

可以讓你“向父級(jí)”查看，當(dāng)前對(duì)象繼承的“原型”是誰(shuí)？就是孩子找爸爸。
打開你的chrome瀏覽器的控制臺(tái)，接著上面的代碼繼續(xù)試驗(yàn)：

a.__proto__ // Object {}
p.__proto__ // Object {}
a.__proto__ === Object.prototype // true
p.__proto__ === People.prototype // true

// 我們發(fā)現(xiàn)兩個(gè)對(duì)象的原型都是對(duì)象。
// 那么我們?cè)賮?lái)看看構(gòu)造函數(shù)“繼承”的原型是誰(shuí)？

Object.__proto__ // function () {}
People.__proto__ // function () {}

看到這里，希望你能明白，不管是javascript自帶的，還是我們自定義的構(gòu)造函數(shù)依然繼承自匿名函數(shù)的原型！(希望你沒(méi)暈)

原型繼承

有了上面的鋪墊，我們終于能夠開始說(shuō)一下原型繼承了。如果你上面的知識(shí)點(diǎn)都理解了，理解原型繼承不在話下。

來(lái)個(gè)例子：

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

這種方式很簡(jiǎn)單也很直接，你在構(gòu)造函數(shù)的原型上定義sayHi方法，那么用該構(gòu)造函數(shù)實(shí)例化出來(lái)的對(duì)象都可以通過(guò)原型繼承鏈訪問(wèn)到定義在構(gòu)造函數(shù)原型上的方法。

理解了上述內(nèi)容，你可以直接利用javascript的原型繼承，也可以用它為基礎(chǔ)構(gòu)造自己“類”感覺(jué)小庫(kù)。

來(lái)源：個(gè)人博客

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88118.html

相關(guān)文章

  • 白話原型和原型鏈

    摘要：二原型和原型鏈其實(shí)，原型這個(gè)名字本身就很容易產(chǎn)生誤解，原型在百度詞條中的釋義是指原來(lái)的類型或模型。對(duì)象的原型是通過(guò)創(chuàng)建的對(duì)象，其原型是而的原型是，從而兩個(gè)原型對(duì)象和有了繼承關(guān)系三和這是容易混淆的兩個(gè)屬性。 關(guān)于原型和原型鏈的介紹，網(wǎng)上數(shù)不勝數(shù)，但能講清楚這兩個(gè)概念的很少，大多數(shù)都是介紹各種對(duì)象、屬性之間如何指來(lái)指去，最后的結(jié)果就是箭頭滿天飛，大腦一團(tuán)糟。本文將從這兩個(gè)概念的命名入手，用...

    lijy91 評(píng)論0 收藏0

  • 深入理解JavaScript

    摘要：深入之繼承的多種方式和優(yōu)缺點(diǎn)深入系列第十五篇，講解各種繼承方式和優(yōu)缺點(diǎn)。對(duì)于解釋型語(yǔ)言例如來(lái)說(shuō)，通過(guò)詞法分析語(yǔ)法分析語(yǔ)法樹，就可以開始解釋執(zhí)行了。 JavaScript深入之繼承的多種方式和優(yōu)缺點(diǎn) JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。 寫在前面 本文講解JavaScript各種繼承方式和優(yōu)缺點(diǎn)。 但是注意： 這篇文章更像是筆記，哎，再讓我...

    myeveryheart 評(píng)論0 收藏0

  • 面向?qū)ο蟮?JavaScript

    摘要：是完全的面向?qū)ο笳Z(yǔ)言，它們通過(guò)類的形式組織函數(shù)和變量，使之不能脫離對(duì)象存在。而在基于原型的面向?qū)ο蠓绞街?，?duì)象則是依靠構(gòu)造器利用原型構(gòu)造出來(lái)的。 JavaScript 函數(shù)式腳本語(yǔ)言特性以及其看似隨意的編寫風(fēng)格，導(dǎo)致長(zhǎng)期以來(lái)人們對(duì)這一門語(yǔ)言的誤解，即認(rèn)為 JavaScript 不是一門面向?qū)ο蟮恼Z(yǔ)言，或者只是部分具備一些面向?qū)ο蟮奶卣鳌１疚膶⒒貧w面向?qū)ο蟊疽?，從?duì)語(yǔ)言感悟的角度闡述為什...

    novo 評(píng)論0 收藏0

  • JavaScript中的面向?qū)ο螅╫bject-oriented）編程

    摘要：對(duì)象在中，除了數(shù)字字符串布爾值這幾個(gè)簡(jiǎn)單類型外，其他的都是對(duì)象。那么在函數(shù)對(duì)象中，這兩個(gè)屬性的有什么區(qū)別呢表示該函數(shù)對(duì)象的原型表示使用來(lái)執(zhí)行該函數(shù)時(shí)這種函數(shù)一般成為構(gòu)造函數(shù)，后面會(huì)講解，新創(chuàng)建的對(duì)象的原型。這時(shí)的函數(shù)通常稱為構(gòu)造函數(shù)。。 本文原發(fā)于我的個(gè)人博客，經(jīng)多次修改后發(fā)到sf上。本文仍在不斷修改中，最新版請(qǐng)?jiān)L問(wèn)個(gè)人博客。 最近工作一直在用nodejs做開發(fā)，有了nodejs，...

    JerryZou 評(píng)論0 收藏0

  • 理解JavaScript的核心知識(shí)點(diǎn)：原型

    摘要：首先，需要來(lái)理清一些基礎(chǔ)的計(jì)算機(jī)編程概念編程哲學(xué)與設(shè)計(jì)模式計(jì)算機(jī)編程理念源自于對(duì)現(xiàn)實(shí)抽象的哲學(xué)思考，面向?qū)ο缶幊淌瞧湟环N思維方式，與它并駕齊驅(qū)的是另外兩種思路過(guò)程式和函數(shù)式編程。 JavaScript 中的原型機(jī)制一直以來(lái)都被眾多開發(fā)者（包括本人）低估甚至忽視了，這是因?yàn)榻^大多數(shù)人沒(méi)有想要深刻理解這個(gè)機(jī)制的內(nèi)涵，以及越來(lái)越多的開發(fā)者缺乏計(jì)算機(jī)編程相關(guān)的基礎(chǔ)知識(shí)。對(duì)于這樣的開發(fā)者來(lái)說(shuō) J...

    iKcamp 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<