理解原型鏈

岳光發布于2019-08-19 18:25 / 707人閱讀

摘要：作用原型鏈的存在，主要是為了實現對象的繼承。理解要理解原型鏈，需要從幾個概念入手。因此在不斷的指向中，形成了原型鏈。原型鏈的內存結構為了嚴謹起見，區分對象和變量

JavaScript之原型鏈

參考：http://zhangjiahao8961.iteye.com/blog/2070650

原型鏈

概念

原型鏈是一種機制，指的是JavaScript每個對象包括原型對象都有一個內置的[[proto]]屬性指向創建它的函數對象的原型對象，即prototype屬性。

作用

原型鏈的存在，主要是為了實現對象的繼承。

理解

要理解原型鏈，需要從幾個概念入手。

1、函數對象

在JavaScript中，函數即對象。

2、原型對象

當定義一個函數對象的時候，會包含一個預定義的屬性，叫prototype，這就屬性稱之為原型對象。

//函數對象
function F(){};
console.log(F.prototype)

//普通對象
var a = {};
console.log(a.prototype);//undefined

3、__proto__

JavaScript在創建對象的時候，都會有一個[[proto]]的內置屬性，用于指向創建它的函數對象的prototype。原型對象也有[[proto]]屬性。因此在不斷的指向中，形成了原型鏈。

舉個例子來說，我們將對象F的原型對象修改一下，就可以清楚看到上述的關系

//函數對象
function F(){};
F.prototype = {
    hello : function(){}
};
var f = new F();
console.log(f.__proto__)

4、new

當使用new去調用構造函數時，相當于執行了

var o = {};
o.__proto__ = F.prototype;
F.call(o);

因此，在原型鏈的實現上，new起到了很關鍵的作用。

5、constructor

原型對象prototype上都有個預定義的constructor屬性，用來引用它的函數對象。這是一種循環引用。

function F(){};
F.prototype.constructor === F;

在實際運用中，經常會有下列的寫法

function F(){};
F.prototype = {
    constructor : F,
    doSomething : function(){}
}

這里要加constructor是因為重寫了原型對象，constructor屬性就消失了，需要自己手動補上。

6、原型鏈的內存結構

function F(){
    this.name = "zhang";
};
var f1 = new F();
var f2 = new F();

為了嚴謹起見，區分對象和變量

GPU云服務器云服務器原型原型鏈原型鏈原型鏈繼承原型鏈圖

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

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

【5】JavaScript 函數高級——原型與原型鏈深入理解（圖解）

摘要：探索是如何判斷的表達式如果函數的顯式原型對象在對象的隱式原型鏈上，返回，否則返回是通過自己產生的實例案例案例重要注意的顯示原型和隱式原型是一樣的。面試題測試題測試題報錯對照下圖理解原型與原型鏈深入理解（圖解）原型（prototype）函數的 prototype 屬性（圖）每個函數都有一個prototype屬性，它默認指向一個Object空對象（即稱為：原型對象）原型對象中有...

馬龍駒 2019-08-23 17:17 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

xuexiangjys 2019-08-02 16:12 評論0 收藏0
如何理解JavaScript的原型和原型鏈？

摘要：之前有朋友問怎么去理解原型和原型鏈的問題。理解原型鏈的小技巧將箭頭視作泛化子類到父類關系那么圖中所有的虛線將構成一個繼承層級，而實線表示屬性引用。原型鏈是實現繼承的重要方式，原型鏈的形成是真正是靠而非。之前有朋友問怎么去理解原型和原型鏈的問題。這個問題，在面試中，很多同學經常都會遇到。這里給大家講講，方便大家記憶。 JavaScript的特點JavaScript是一門直譯式腳本...

adie 2019-08-23 16:54 評論0 收藏0
原型鏈二：Function的原型鏈問題

摘要：每個函數都有一個屬性構造函數指向實例原型如下圖重點理解實例對象指向實例原型對象參考原博客的那個部分挖來下圖理解之后我們來看在聲明函數的時候有一種聲明方法是構造函數下面參考阮一峰第三種聲明函數的方式是構造函數。理解關于Function的原型鏈問題關于Function的原型鏈問題的一些個人粗略理解,歡迎指正錯誤的地方可以看這篇文章：https://github.com/KieSun...

dingda 2019-08-22 17:04 評論0 收藏0
理解javaScript原型、原型鏈

摘要：構造函數的屬性指向原型對象原型對象的屬性指向構造函數實例對象的指向原型對象所有引用類型默認都繼承了，而這個繼承也是通過原型鏈實現的。第一種方式是使用操作符，只要用這個操作符來測試實例與原型鏈中出現過的構造函數，結果就會返回。理解對象首先對象的定義是:無序屬性的集合，其屬性可以包含基本值、對象或者函數。嚴格來講，這就相當于說對象是一組沒有特定順序的值。對象的每個屬性或方法都有一個名...

NSFish 2019-08-26 18:13 評論0 收藏0