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

資訊專欄INFORMATION COLUMN

你真的明白javascript中的原型和原型鏈了嗎

Harpsichord1207 / 3366人閱讀

摘要:補充的知識這個是原型中的自帶屬性,指向構(gòu)造函數(shù)這個屬性其實是瀏覽器實現(xiàn)的,不是標準的訪問原型的方式中規(guī)定的正式方法是以上知識,最終的圖如下思考題在文章開頭我們說過函數(shù)也是對象,既然是對象就有原型,那的原型指向誰呢是嗎

文章開頭說的話

首先你必須明白(或者記住)的JavaScript常識:

在JavaScript中每個函數(shù)都有一個prototype屬性

在JavaScript中每個對象都有一個__proto__屬性

在JavaScript中函數(shù)是一等公民,即函數(shù)也是對象

prototype和__proto__

prototype到底是個啥呢?下面看下這段代碼,我們慢慢來

// Animal是個構(gòu)造函數(shù),所以有prototype屬性
function Animal(){}
// 在prototype上定義eat方法
Animal.prototype.eat = function(food){
  console.log("it is eating " + food);  
}
// 構(gòu)造函數(shù)實例化a1
const a1 = new Animal();
// 構(gòu)造函數(shù)實例化a2
const a2 = new Animal();
// 調(diào)用實例的方法
a1.eat("food");
a2.eat("food");

從上面的代碼中,我們可以看到:

函數(shù)的prototype指向一個對象

函數(shù)實例化后的對象可以獲取prototype指向?qū)ο蟮姆椒?和屬性)

那他們之前的關系是怎么樣的呢?

從圖中我們可以看到:

Animal的prototype指向一個對象

Animal的實例通過__proto__關聯(lián)到Animal的prototype指向的對象

用官方術(shù)語說,就是:

函數(shù)的prototype所指向的對象就是該函數(shù)創(chuàng)建的實例的原型(即:a2和a2的原型是Animal.prototype)

那么問題來了,什么是原型呢?
在JavaScript中,每個對象(null除外)在創(chuàng)建的時候都會與之關聯(lián)另外一個對象,對象和原型之間通過__proto__進行關聯(lián)

原型的作用

在上面的代碼中,我們可以看到實例對象中并沒有eat方法,但是每個實例對象都可以調(diào)用eat方法,那中間的過程是怎樣的呢?

當我們調(diào)用實例對象(a1和a2)的方法(eat)的時候,如果找到則直接調(diào)用實例對象的方法或者屬性;如果找不到,就會查找與之關聯(lián)的原型上是否有這個方法,如果這個原型沒有,就會繼續(xù)向上查找該原型的原型(原型的原型后面探討)

原型的原型

在上面我們提到了如果在原型上找不到相應的屬性或者方法,就會在原型的原型上查找,那么什么是原型的原型呢?

首先在文章開頭我們說每個對象都有原型,而原型也是對象,所以原型也是有原型的(聽起來有點繞)

那之前代碼的Animal.prototype的原型指向哪里呢(即Animal.prototype.__proto__)指向誰呢?這里Animal.prototype是JavaScript內(nèi)置構(gòu)造函數(shù)Object生成的呢,那是不是應該指向Object.prototype呢?答案是是的。

那Object.prototype也是對象,它的原型呢?Object.prototype.__proto__指向哪個對象呢?答案是:null;即:

Object.prototype.__proto__ === null // true
// 表示如果查找屬性的時候到Object.prototype時還是沒有就停止,沒有了

最后畫張圖:

原型鏈

注意到上圖中的藍色線條部分了嗎,這就是大名鼎鼎的原型鏈。

補充的知識

constructor: 這個是原型中的自帶屬性,指向構(gòu)造函數(shù)

__proto__: 這個屬性其實是瀏覽器實現(xiàn)的,不是標準的訪問原型的方式;ES5中規(guī)定的正式方法是:Object.getPrototypeOffang"fa

Object.getPrototypeOf(a1) === Animal.prototype // true

以上知識,最終的圖如下:

思考題:

在文章開頭我們說過函數(shù)也是對象,既然是對象就有原型,那Animal的原型指向誰呢?

Function.prototype === Function.__proto__ 是true嗎?

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/102328.html

相關文章

  • 真的明白 new 了嗎

    摘要:如果構(gòu)造函數(shù)有返回值呢一般情況下構(gòu)造函數(shù)沒有返回值,但是我們依舊可以得到該對象的實例如果構(gòu)造函數(shù)有返回值,憑直覺來說情況應該會不一樣。歡迎光臨小弟博客我的博客原文你真的弄明白了嗎參考再談面向?qū)ο缶幊痰膶嵗c繼承請停止使用關鍵字 好久沒有寫點東西了,總覺得自己應該寫點牛逼的,卻又不知道如何下筆。既然如此,還是回歸最基本的吧,今天就來說一說這個new。關于javascript的new關鍵...

    tolerious 評論0 收藏0
  • 徹底搞懂JavaScript中的繼承

    摘要:這正是我們想要的太棒了毫不意外的,這種繼承的方式被稱為構(gòu)造函數(shù)繼承,在中是一種關鍵的實現(xiàn)的繼承方法,相信你已經(jīng)很好的掌握了。 你應該知道,JavaScript是一門基于原型鏈的語言,而我們今天的主題 -- 繼承就和原型鏈這一概念息息相關。甚至可以說,所謂的原型鏈就是一條繼承鏈。有些困惑了嗎?接著看下去吧。 一、構(gòu)造函數(shù),原型屬性與實例對象 要搞清楚如何在JavaScript中實現(xiàn)繼承,...

    _ivan 評論0 收藏0
  • javascript對象詳解:__proto__prototype的區(qū)別聯(lián)系

    摘要:當這步完成,這個對象就與構(gòu)造函數(shù)再無聯(lián)系,這個時候即使構(gòu)造函數(shù)再加任何成員,都不再影響已經(jīng)實例化的對象了。此時,對象具有了和屬性,同時具有了構(gòu)造函數(shù)的原型對象的所有成員,當然,此時該原型對象是沒有成員的。 前言 本篇文章用來記錄下最近研究對象的一些心得,做一個記錄與總結(jié),以加深自己的印象,同時,希望也能給正在學習中的你一點啟發(fā)。本文適合有一定JavaScript基礎的童鞋閱讀。原文戳這...

    chavesgu 評論0 收藏0
  • 如何優(yōu)雅的理解ECMAScript中的對象

    摘要:標準對象,語義由本規(guī)范定義的對象。這意味著雖然有,本質(zhì)上依然是構(gòu)造函數(shù),并不能像那樣表演多繼承嵌套類等高難度動作。不過這里的并不是我們所說的數(shù)據(jù)類型,而是對象構(gòu)造函數(shù)。 序 ECMAScript is an object-oriented programming language for performing computations and manipulating computat...

    why_rookie 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<