javascript原型是什嗎？javascript原型的詳細解說

本篇文章給大家帶來的內容是關於javascript原型是什嗎？javascript原型的詳細解說 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

原型

原型還是比較重要的，想單獨來細說一下，說到原型，那麼什麼是原型呢？

在建構函式建立出來的時候，都有一個prototype(原型)屬性，這個屬性是一個指標，系統會預設的建立並關聯一個對象，這個對象就是原型，原型對象預設是Null 物件，而這個對象的用途是包含可以由特定類型的所有執行個體共用的屬性和方法。
說白了就是可以在建構函式上調用prototype屬性來指向原型，從而建立那個對象執行個體的原型對象

使用原型有什麼好處呢？

使用原型的好處是可以讓所有對象執行個體共用它所包含的屬性和方法。

轉暈了麽？是不是超級亂？又建構函式，又原型，又執行個體，不擔心，我一句話點破你
我們所有的建構函式最終都要演變成執行個體才有意義，因為在建構函式中定義方法無法被所有的執行個體共用，因此只能找建構函式的上一級，就是原型，在原型上定義的屬性和方法可以被所有的執行個體所共用，這就是對原型對象的性質

看個圖你就知道了，它們三者之間就是三角戀關係

很通俗易懂了吧
建構函式.prototype = 原型
原型.constructor = 建構函式
執行個體對象.constructor = 建構函式（這是因為執行個體對象在自身找不到constructor屬性，那麼他會通過__proto__去原型中找，通過原型搭橋指向了建構函式）
執行個體對象.__proto__ = 原型

原型是列印顯示不出來的，只能通過 建構函式.prototype 去表示

下面介紹另外兩個擷取原型的方法

isPrototypeOf()方法：用於判斷這個執行個體的指標是否指向這個原型。
Object.getPrototypeOf()方法：擷取執行個體的原型，這個方法支援的瀏覽器有IE9+、Firefox 3.5+、Safari 5+、Opera 12+和Chrome，因此比較推薦通過這個方法擷取對象的原型。

假定有個Person建構函式和person對象Person.prototype.isPrototypeof(person)  // 返回true說明前者是person1的原型Object.getPrototypeOf(person) === Person.prototype // 擷取person的原型

多個對象執行個體共用原型所儲存的屬性和方法的基本原理
每當代碼讀取某個對象的某個屬性時，都會執行一次搜尋，目標是具有給定名字的屬性。首先從對象執行個體本身開始。如果在執行個體中找到了具有給定名字的屬性，則返回該屬性的值；如果沒有找到，則繼續搜尋指標指向的原型對象，在原型對象中尋找具有給定名字的屬性。如果在原型對象中找到了這個屬性，則返回該屬性值。

我們可以訪問原型中的值，但是卻不能重寫原型中的值，如果我們在執行個體中添加一個屬性，而這個屬性名稱和原型中的重名，則這個屬性將會屏蔽（複寫）原型中的那個屬性。

function Person() {}Person.prototype.name = "George"Person.prototype.sayName = function() {    console.log(this.name)}let person1 = new Person();let person2 = new Person();person1.name = "命名最頭痛";// 在這一環節，person1.name會從他執行個體中找，若執行個體沒找到，則繼續搜尋它的原型對象console.log(person1.name); // 命名最頭痛 console.log(person2.name); // George

在執行個體對象中添加一屬性只會阻止我們訪問原型中的那個屬性，但不會修改那個屬性。即使將這個屬性設定為null，也只會在執行個體中設定這個屬性，而不會恢複其指向原型的串連。

若想完全刪除執行個體屬性，可使用delete操作符，從而讓我們能夠重新訪問原型中的屬性。

delete 操作符的使用

依舊用上面那個例子delete操作符可用於刪除對象的屬性，無論是執行個體上的屬性，還是在原型上的屬性都可以刪delete person1.name    // 刪除這個執行個體的屬性delete Person.prototype.name    // 刪除原型上的屬性delete Person.prototype.constructor // 刪除constructor屬性，這樣就沒辦法指回函數了

hasOwnProperty()方法可用來檢測一個屬性是存在於執行個體中，還是存在於原型中。這個方法只在給定屬性存在於對象執行個體時，才返回true，也可以這樣理解，hasOwnProperty方法用於檢測這個屬性是否是對象本身屬性。
obj.hasOwnProperty('屬性名稱')

Demo：

function Person(){   this.name = '命名最頭痛'}var person = new Person()Person.prototype.age = '18'console.log(person.hasOwnProperty('name'))  // trueconsole.log(Person.prototype.hasOwnProperty('age')) // true

in操作符

in操作符有兩種用法
①放在for-in迴圈中使用，for-in能夠返回所有能夠通過對象訪問的、可枚舉的(enumerable)屬性（可枚舉屬性可參看一眼看穿