前言

我是歌謠 知其然知其所以然 人人都有一個大廠夢 希望通過自己的一個總結分享可以給予大家帶來幫助和提升。

本期知識點

原型和原型鏈

目標

1理解原型和原型鏈
2理解構造函數
3理解構造函數 原型和原型鏈之間的關系

引用類型都是對象

基本數據類型和引用數據類型可以看下面這篇

驚呼!JavaScript基本數據類型和引用數據類型詳解

原型和原型鏈都是來源于對象而服務于對象的概念，所以我們要先明確一點： JavaScript中一切引用類型都是對象，對象就是屬性的集合。
Array類型、Function類型、Object類型、Date類型、RegExp類型等都是引用類型。 也就是說
數組是對象、函數是對象、正則是對象、對象還是對象。

prototype

JS設計之初為了實現簡單繼承，引入了prototype屬性，也叫原型對象（顯式原型）。

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

可以看出，從本質上講，prototype是一個普通對象，是函數對象的構造函數創建的一個實例。相當于在Geyao創建的時候，自動創建了一個它的實例，并且把這個實例賦值給了prototype。
但是存在一個特例Function，
Function.prototype是原型對象，本質卻是函數對象。作為一個函數對象，又沒有prototype屬性。

console.log(typeof Function.prototype) // 特殊 Function console.log(typeof Function.prototype.prototype) //undefined 函數對象卻沒有prototype屬性

__proto__屬性

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

//創建構造函數function Geyao(name,age){this.name = name;this.age= age;}Geyao.prototype = {alertName(){alert(this.name);}}//創建實例var dog = new Geyao("歌謠");dog .print = function(){alert(this.name);}dog.print(); //歌謠dog.alertName(); //歌謠

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

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

constructor 構造函數

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

函數Geyao是由Function創造出來的,那么它的constructor指向的Function,Geyao.prototype是由new
Geyao()的方式創造出來,那么Geyao.prototype.constructor理應指向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

總結得出原型鏈就是：由原型對象組成，每個對象都有 proto 屬性，指向了創建該對象的構造函數的原型，proto
將對象連接起來組成了原型鏈。是一個用來實現繼承和共享屬性的有限的對象鏈。

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

作用

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

面試題分享

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

圖解（這張圖建議收藏）

總結

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。