前言

我是歌謠 知其然知其所以然 人人都有一個(gè)大廠夢(mèng) 希望通過(guò)自己的一個(gè)總結(jié)分享可以給予大家?guī)?lái)幫助和提升。

本期知識(shí)點(diǎn)

原型和原型鏈

目標(biāo)

1理解原型和原型鏈
2理解構(gòu)造函數(shù)
3理解構(gòu)造函數(shù) 原型和原型鏈之間的關(guān)系

引用類型都是對(duì)象

基本數(shù)據(jù)類型和引用數(shù)據(jù)類型可以看下面這篇

驚呼!JavaScript基本數(shù)據(jù)類型和引用數(shù)據(jù)類型詳解

原型和原型鏈都是來(lái)源于對(duì)象而服務(wù)于對(duì)象的概念，所以我們要先明確一點(diǎn)： JavaScript中一切引用類型都是對(duì)象，對(duì)象就是屬性的集合。
Array類型、Function類型、Object類型、Date類型、RegExp類型等都是引用類型。 也就是說(shuō)
數(shù)組是對(duì)象、函數(shù)是對(duì)象、正則是對(duì)象、對(duì)象還是對(duì)象。

prototype

JS設(shè)計(jì)之初為了實(shí)現(xiàn)簡(jiǎn)單繼承，引入了prototype屬性，也叫原型對(duì)象（顯式原型）。

//原型對(duì)象 function Geyao(){}; console.log(typeof Geyao.prototype) //Object console.log(typeofObject.prototype) // Object

可以看出，從本質(zhì)上講，prototype是一個(gè)普通對(duì)象，是函數(shù)對(duì)象的構(gòu)造函數(shù)創(chuàng)建的一個(gè)實(shí)例。相當(dāng)于在Geyao創(chuàng)建的時(shí)候，自動(dòng)創(chuàng)建了一個(gè)它的實(shí)例，并且把這個(gè)實(shí)例賦值給了prototype。
但是存在一個(gè)特例Function，
Function.prototype是原型對(duì)象，本質(zhì)卻是函數(shù)對(duì)象。作為一個(gè)函數(shù)對(duì)象，又沒(méi)有prototype屬性。

console.log(typeof Function.prototype) // 特殊 Function console.log(typeof Function.prototype.prototype) //undefined 函數(shù)對(duì)象卻沒(méi)有prototype屬性

__proto__屬性

所有的對(duì)象obj(null和undefined除外)都具有__proto__屬性（隱式原型），__proto__屬性在本質(zhì)上為一個(gè)指針，指向函數(shù)對(duì)象的prototype屬性。

//創(chuàng)建構(gòu)造函數(shù)function Geyao(name,age){this.name = name;this.age= age;}Geyao.prototype = {alertName(){alert(this.name);}}//創(chuàng)建實(shí)例var dog = new Geyao("歌謠");dog .print = function(){alert(this.name);}dog.print(); //歌謠dog.alertName(); //歌謠

所有的對(duì)象obj(null和undefined除外)都具有__proto__屬性（隱式原型），__proto__屬性在本質(zhì)上為一個(gè)指針，指向函數(shù)對(duì)象的prototype屬性。

geyao.__proto__ === Geyao.prototype// true

constructor 構(gòu)造函數(shù)

function Geyao(){}; console.log(Geyao.constructor===Function); //true console.log(Geyao.prototype.constructor===Geyao); //true

函數(shù)Geyao是由Function創(chuàng)造出來(lái)的,那么它的constructor指向的Function,Geyao.prototype是由new
Geyao()的方式創(chuàng)造出來(lái),那么Geyao.prototype.constructor理應(yīng)指向Geyao。

原型鏈

function Geyao(){ this.geyaoType = "geyao"; } Geyao.prototype.getGeyaoType = function(){ return this.geyaoType ; } function geyao(){ this.geyaotype = "geyao"; } Geyao.prototype = new Geyao(); Geyao.prototype.geGeyaoType = function(){ return this.Geyaotype ; } var geyao= new Geyao();alert(geyao.getGeyaoType ());// geyao

總結(jié)得出原型鏈就是：由原型對(duì)象組成，每個(gè)對(duì)象都有 proto 屬性，指向了創(chuàng)建該對(duì)象的構(gòu)造函數(shù)的原型，proto
將對(duì)象連接起來(lái)組成了原型鏈。是一個(gè)用來(lái)實(shí)現(xiàn)繼承和共享屬性的有限的對(duì)象鏈。

屬性查找機(jī)制:
當(dāng)查找對(duì)象的屬性時(shí)，如果實(shí)例對(duì)象自身不存在該屬性，則沿著原型鏈往上一級(jí)查找，找到時(shí)則輸出，不存在時(shí)，則繼續(xù)沿著原型鏈往上一級(jí)查找，直至最頂級(jí)的原型對(duì)象Object.prototype，如還是沒(méi)找到，則輸出undefined；
屬性修改機(jī)制: 只會(huì)修改實(shí)例對(duì)象本身的屬性，如果不存在，則進(jìn)行添加該屬性，如果需要修改原型的屬性時(shí)，則可以用: b.prototype.x
= 2；但是這樣會(huì)造成所有繼承于該對(duì)象的實(shí)例的屬性發(fā)生改變。

作用

如果構(gòu)造函數(shù)中有很多屬性和方法，那么構(gòu)造函數(shù)所有的實(shí)例化對(duì)象都是公用這些屬性和方法的，當(dāng)有多個(gè)實(shí)例想用共用這些東西的時(shí)候，每個(gè)實(shí)例都拷貝一份，就造成極大的資源浪費(fèi)，那是不是可以考慮存把這些需要共用的屬性和方法放到一個(gè)共同的東西上。這個(gè)共同的東西就是原型對(duì)象（prototype）。

面試題分享

Object.prototype.proto //null
Function.prototype.proto //Object.prototype
Object.proto //Function.prototype

圖解（這張圖建議收藏）

總結(jié)

我是歌謠 放棄很容易 但是堅(jiān)持一定很酷 這一部分也是面試經(jīng)常問(wèn)到的面試題之一 純屬個(gè)人總結(jié) 若有不合理之處 可選擇性關(guān)閉網(wǎng)頁(yè) 歡迎討論 下期主要講述深拷貝和淺拷貝,敬請(qǐng)期待。

總結(jié)

以上是生活随笔為你收集整理的硬核!原型和原型链详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。