js原型和原型鏈

Winer 發布于2019-08-23 12:26 / 1395人閱讀

摘要：幾乎所有對象在創建的時候都會生成鏈，就是人們常說的原型鏈，當你試圖引用對象的屬性時，會觸發對象的操作，對于默認的操作來說，第一步就是去查找當前的對象中有沒有你要引用的屬性，如果有就會使用它，如果沒有找到，就會去查找這個對象的原型鏈，舉個例子

[[Prototype]]

幾乎所有對象在創建的時候都會生成[[Prototype]]鏈，就是人們常說的原型鏈，當你試圖引用對象的屬性時，會觸發對象的[[Get]]操作，對于默認的[[Get]]操作來說，第一步就是去查找當前的對象中有沒有你要引用的屬性，如果有就會使用它，如果沒有找到，就會去查找這個對象的原型鏈，舉個例子：

var one = {
  type: "one"
}

var two = Object.create(one)

console.log(two.type) // one

在上述例子中，two對象中并沒有type屬性，但是由于Object.create（創建一個新對象，帶著指定的原型對象和屬性）將one對象和two對象聯系到一起，因此在原型鏈的查找過程中，即便在two對象中沒有找到type屬性，會繼續向上查找，在one對象中查找到type屬性并打印，如果沿著原型鏈一直向上查找都沒有找到，則會打印undefined

prototype

要講清楚prototype是什么先舉一個簡單的例子：

function origin(type) {
  this.type = type
  console.log(this.type)
}
origin.prototype.name = "origin"
var son1 = new origin("male")
var son2 = new origin("male")
console.log(son1.name) // origin
console.log(son2.name) // origin

函數origin的prototype屬性實際上相當與一個對象，這個對象指向實例son1和son2的原型對象，因此，當調用name屬性，會沿著原型鏈一直向上找，輸出origin.prototype.name的值，簡單來說，函數的prototype對象會指向實例的原型，從另一個角度上來說，也可以說son1和son2繼承了函數origin的prototype對象

constructor

先看一個簡單的例子：

function origin() {

}
const son = new origin()
console.log(origin.prototype.constructor === origin) // true
console.log(son.constructor === origin) // true

origin.prototype默認有一個公有并且不可枚舉的屬屬性，constructor，并且這個屬性引用的是對象關聯的函數，因此origin.prototype.construct = origin，同時實例對象son也有一個construcor屬性，指向創建這個對象的函數

_proto_

__proto__其實是一個絕大多數瀏覽器支持的用來訪問內部原型鏈的一個屬性

    son.__proto__ === origin.prototype // true

當調用son.__proto__實際上調用了son.__proto__()，返回值和Object.getPrototypeOf(origin)結果相同

云服務器 GPU云服務器 js原型鏈的繼承原型原型鏈原型鏈原型鏈繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98527.html

JS基礎-原型、原型鏈真的不能一知半解

摘要：原型鏈和對象的原型是對象實例和它的構造函數之間建立的鏈接，它的值是構造函數的。對象的原型根據上文提到的構造調用函數的時候會創建一個新對象，自動將的原型指向構造函數的對象。 showImg(https://segmentfault.com/img/remote/1460000020185197); JS的原型、原型鏈一直是比較難理解的內容，不少初學者甚至有一定經驗的老鳥都不一定能完全說清...

changfeng1050 2019-08-26 11:00 評論0 收藏0
js 的原型原型鏈原型鏈的繼承

摘要：圖片描述缺點是無法實現多繼承可以在構造函數中，為實例添加實例屬性。對象的方法 Object.assign() 對象可以簡寫，如果 key 和 value 相等則可以簡寫 let name = xm; let age = 2; let obj = { name， age, fn(){ // 可以省略函數關鍵字和冒號： console.log(2...

soasme 2019-08-26 10:13 評論0 收藏0
從實現角度分析js原型鏈

摘要：從實現角度分析原型鏈歡迎來我的博客閱讀從實現角度分析原型鏈網上介紹原型鏈的優質文章已經有很多了，比如說作為補充，就讓我們換個角度，從實現來分析一下吧本文假設你對原型鏈已經有所了解。從實現角度分析js原型鏈歡迎來我的博客閱讀：《從實現角度分析js原型鏈》網上介紹原型鏈的優質文章已經有很多了，比如說： https://github.com/mqyqingfeng/Blog/issu...

CompileYouth 2019-08-20 19:04 評論0 收藏0
溫故js系列（15）-原型&原型鏈&原型繼承

摘要：給添加屬性給的原型對象添加屬性原型鏈在中，每個對象都有一個屬性，其保存著的地址就構成了對象的原型鏈。實例變量實例函數原型鏈繼承有了原型鏈，就可以借助原型鏈實現繼承。是中唯一一個處理屬性但是不查找原型鏈的函數。前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：原型&原型鏈&原型繼承 JavaScript-原...

Ethan815 2019-08-22 10:37 評論0 收藏0
JS面向對象的程序設計之繼承的實現 - 原型鏈

摘要：簡單回顧一下構造函數原型和實例對象之間的關系每個構造函數都有一個原型對象。找到生成構造函數的原型對象的構造函數，搜索其原型對象，找到了。 JS面向對象的程序設計之繼承的實現 - 原型鏈前言：最近在細讀Javascript高級程序設計，對于我而言，中文版，書中很多地方翻譯的差強人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯誤，會非常感謝您的指出。文中絕大部分內容引用自《JavaS...

zhaochunqi 2019-08-23 12:22 評論0 收藏0
【前端基礎進階】JS原型、原型鏈、對象詳解

摘要：二構造函數我們先復習一下構造函數的知識上面的例子中和都是的實例。這兩個實例都有一個構造函數屬性，該屬性是一個指針指向。原型鏈其中是對象的實例。一. 普通對象與函數對象 JavaScript 中，萬物皆對象！但對象也是有區別的。分為普通對象和函數對象，Object 、Function 是 JS 自帶的函數對象。下面舉例說明 var o1 = {}; var o2 =new Objec...

explorer_ddf 2019-08-23 15:30 評論0 收藏0