資訊專欄INFORMATION COLUMN
摘要：對應(yīng)的關(guān)系圖如下講解了構(gòu)造函數(shù)和原型對象之間的關(guān)系，那么實例對象和原型對象之間的關(guān)系又是怎么樣的呢下面講解。原型對象的指向的是構(gòu)造函數(shù)和本身沒有屬性，但是其原型對象有該屬性，因此也能獲取到構(gòu)造函數(shù)。
JavaScript進階 - 1. 原型和原型鏈的概念
我們好多經(jīng)常會被問道JavaScript原型和原型鏈的概念，還有關(guān)于繼承，new操作符相關(guān)的概念。本文就專門整理了原型和原型鏈的概念，關(guān)于對象繼承我們后邊進行介紹。本文包含對應(yīng)的示例代碼和腦圖。如有奇異，歡迎指正！
目錄講解1. 構(gòu)造函數(shù)創(chuàng)建對象
2. 相關(guān)的名詞介紹
2.1 prototype
2.2 _proto_
2.3 constructor
3. 實例和原型 原型和原型
4. 原型鏈是怎么產(chǎn)生的(附有相關(guān)的關(guān)系圖說明)
1. 構(gòu)造函數(shù)創(chuàng)建對象我們先使用構(gòu)造函數(shù)的方式聲明一個對象：
function Person() {}
let person = new Person()
person.name = "小紅"
console.log(person.name) // 小紅
在上面的代碼中。Person是構(gòu)造函數(shù)， person是通過new方式創(chuàng)建的實例對象。
現(xiàn)在開始進入一個環(huán)節(jié)
prototype,constructor,__proto__是我們經(jīng)常見到的幾個概念，但是他們之間的關(guān)系具體是什么樣的呢，讓我們逐步開始了解。
2.1 prototype每個函數(shù)都有 prototype 屬性，除了 Function.prototype.bind()，該屬性指向原型, prototype: 指向?qū)嵗龑ο蟮脑蛯ο?/b>
function Person() {}
Person.prototype.name = "小紅"
let person = new Person()
console.log(person.name) // 小紅
Person這個函數(shù)有聲明prototype屬性，那么這個值指向的到底是哪兒，是原型對象嗎？
其實prototype指向的是，調(diào)用當前構(gòu)造函數(shù)創(chuàng)建實例對象的原型，也就是person的原型。
那么原型到底是什么呢？其實原型可以理解為，一個JavaScript對象(null除外)在創(chuàng)建的時候會關(guān)聯(lián)另外一個對象，這個被關(guān)聯(lián)的對象就是我們說的原型對象，實例對象會在創(chuàng)建的時候，從原型對象繼承一些屬性或者方法。
對應(yīng)的關(guān)系圖如下：
prototype講解了構(gòu)造函數(shù)和原型對象之間的關(guān)系，那么實例對象和原型對象之間的關(guān)系又是怎么樣的呢？下面講解。每個JavaScript對象(null除外)，都會有個__proto__的屬性，這個屬性指向的就是原型對象
function Person() {}
let person = new Person()
console.log(person.__proto__ === Person.prototype) // true
// ES5 通過實例對象獲取原型對象的方法
console.log(Object.getPrototypeOf(person) === Person.prototype) // true
由此我們上面的管理系圖譜可以補充為：
上面講解了原型對象和構(gòu)造函數(shù)，實例對象之間的關(guān)系，那么反過來獲取原型對象和實例對象的構(gòu)造函數(shù)是不是能獲取到呢？？constructor就能做到這一點。constructor： 指向該原型對象對應(yīng)的構(gòu)造函數(shù)
function Person() {}
let person = new Person()
// 原型對象的構(gòu)造函數(shù)
console.log(Person.prototype.constructor === Person) // true
// 實例對象的構(gòu)造函數(shù)
console.log(person.constructor === Person) // true
// 實例對象本身是否含有constructor屬性
console.log(person.hasOwnProperty("constructor")) // false
注意：
person.constructor 中實際上是沒有constructor屬性的，這是從person的原型中獲取到的constructor屬性才有了 person.constructor === Person。通過
關(guān)系圖可以補充為：
當我們讀取一個對象的屬性是，如果實例對象中能找到，就會返回實例對象對應(yīng)的value，如果沒有找到，就會站到實例對象的原型對象中，查看有無此值，有則返回，沒有的話，繼續(xù)查找原型的原型對象上有無此值。一直會查到頂層為止。
function Person() {}
Person.prototype.name = "小紅"
let person1 = new Person()
let person2 = new Person()
person2.name = "小明"
console.log(person1.name) //小紅
console.log(person2.name) //小明
那么原型的原型執(zhí)行的是什么呢？
3.2 原型和原型實際上，原型的原型也是一個實例對象，是通過Object的構(gòu)造函數(shù)生成的，因此，原型的原型也能通過__proto__獲取其對應(yīng)的原型對象的屬性。
function Person() {}
Object.prototype.name = "sunny"
let person1 = new Person()
let person2 = new Person()
console.log(person1.name) //sunny
console.log(person2.name) //sunny
對應(yīng)的關(guān)系圖如下：
console.log(Object.prototype.__proto__ === null) // true
Object.prototype的原型為null， null代表的意思是沒有對象，為空。換句話的意思就是說，沒有原型對象了，這也就是查找的頂層對象了。
整個的關(guān)系圖我們梳理為：
關(guān)系圖中，紅色的線其實就是我們平時說的原型鏈了
擴展內(nèi)容我們知道函數(shù)其實也是一個對象，任何函數(shù)都能看成是Function()通過new實例化后的結(jié)果。因此，如果把Person和Object當做是實例對象的話，他們的原型指向的是構(gòu)造函數(shù)Function()的實例對象Function.prototype。
console.log(Person.__proto__ === Function.prototype) //true console.log(Object.__proto__ === Function.prototype) //true
原型對象Function.prototype的constructor指向的是構(gòu)造函數(shù)Function,Person和Object本身沒有constructor屬性，但是其原型對象有該屬性，因此也能獲取到構(gòu)造函數(shù)。
console.log(Function.prototype.constructor === Function) // true
console.log(Person.constructor === Function) //true
console.log(Person.hasOwnProperty("constructor")) //false
console.log(Object.constructor === Function) //true
console.log(Object.hasOwnProperty("constructor")) //false
所有的函數(shù)對象都可以看成是Function通過new之后生成的實例對象，那么Function可以看成是自己調(diào)用自己實例化的結(jié)果產(chǎn)生的。因此有Function的實例對象指向Function.prototype
console.log(Function.prototype === Function.__proto__) // true console.log(Function.prototype === Function.prototype) //true
如果此時的Function.prototype作為實例，那么他自己的實例對象執(zhí)行的又是誰呢？所有的對象都可以看作是Object實例化的結(jié)果。所以，F(xiàn)unction.prototype的原型對象是Object.prototype，其原型函數(shù)是Object()。
console.log(Function.prototype.__proto__ === Object.prototype); //true
把這些全部總結(jié)完，之后我們的關(guān)系圖，就變成了下面這個樣子：
JavaScript深入之從原型到原型鏈一張圖理解JS的原型（prototype、_proto_、constructor的三角關(guān)系）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105409.html
摘要：二構(gòu)造函數(shù)我們先復習一下構(gòu)造函數(shù)的知識上面的例子中和都是的實例。這兩個實例都有一個構(gòu)造函數(shù)屬性，該屬性是一個指針指向。原型鏈其中是對象的實例。 一. 普通對象與函數(shù)對象 JavaScript 中，萬物皆對象！但對象也是有區(qū)別的。分為普通對象和函數(shù)對象，Object 、Function 是 JS 自帶的函數(shù)對象。下面舉例說明 var o1 = {}; var o2 =new Objec...
摘要：構(gòu)造函數(shù)的執(zhí)行過程先說一點基本概念。只有當一個函數(shù)以關(guān)鍵字來調(diào)用的時候，我們才能說它是一個構(gòu)造函數(shù)。構(gòu)造函數(shù)的返回值構(gòu)造函數(shù)執(zhí)行過程的最后一步是默認返回。 showImg(https://segmentfault.com/img/bV55lY?w=500&h=312); 大家都知道原型和原型鏈是 JavaScript 中最經(jīng)典的問題之一，而構(gòu)造函數(shù)又是原型和原型鏈的基礎(chǔ)，所以先了解清楚...
摘要：我們通過一個簡單的例子與圖示，來了解構(gòu)造函數(shù)，實例與原型三者之間的關(guān)系。而原型對象的指向構(gòu)造函數(shù)。于是根據(jù)構(gòu)造函數(shù)與原型的特性，我們就可以將在構(gòu)造函數(shù)中，通過聲明的屬性與方法稱為私有變量與方法，它們被當前被某一個實例對象所獨有。 showImg(https://segmentfault.com/img/remote/1460000008593382); 如果要我總結(jié)一下學習前端以來我遇...
摘要：原型鏈和對象的原型是對象實例和它的構(gòu)造函數(shù)之間建立的鏈接，它的值是構(gòu)造函數(shù)的。對象的原型根據(jù)上文提到的構(gòu)造調(diào)用函數(shù)的時候會創(chuàng)建一個新對象，自動將的原型指向構(gòu)造函數(shù)的對象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型鏈一直是比較難理解的內(nèi)容，不少初學者甚至有一定經(jīng)驗的老鳥都不一定能完全說清...
摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...
閱讀 3537·2021-09-22 15:50
閱讀 3237·2019-08-30 15:54
閱讀 2752·2019-08-30 14:12
閱讀 3061·2019-08-30 11:22
閱讀 2085·2019-08-29 11:16
閱讀 3581·2019-08-26 13:43
閱讀 1194·2019-08-23 18:33
閱讀 927·2019-08-23 18:32
