javaScript原型及原型鏈詳解（一）

springDevBird 發布于2019-08-20 16:37 / 1023人閱讀

摘要：執行行代碼，我們可以看到控制臺打印出來的結果如下結果印證了我們上面講的內容指向的構造函數指向的原型對象原型對象中指向構造函數。

在javascript中原型和原型鏈機制是最難懂的部分（沒有之一），同時也是最重要的部分，在學習的過程中你可能認認真真的看了一遍但還是完全不懂書上說的什么，的確是這樣的，我在學習的時候可是反復看了4、5遍才初步理解了。下面我把我的理解總結了一下希望對你們有一點幫助。

對象

講原型和原型鏈之前我們先講基礎知識——js對象。什么是對象呢？這里引用別人的一句話“js中一切皆對象”，先不用完全明白，因為我也不明白，在后面的學習中慢慢理解。
首先在js中對象分為函數對象和普通對象兩種，看下面的例子：

 function fun1(){};
 var fun2 = function(){};
 var fun3 = new Function();

 var obj1 = new fun1();
 var obj2 = {};
 var obj3 =new Object();

 console.log(typeof Object);     // function
 console.log(typeof Function);   // function
 console.log(typeof obj1);         // object
 console.log(typeof obj2);         // object
 console.log(typeof obj3);         // object
 console.log(typeof fun1);       // function
 console.log(typeof fun2);       // function
 console.log(typeof fun3);       // function

上面代碼中fun1、fun2、fun3是函數對象，obj1、obj2、obj3是普通對象，那么怎么區分呢？很簡單，凡是通過 new Function() 創建的對象都是函數對象，其他的都是普通對象，fun1、fun2歸根結底還是通過 new Function() 創建的，因此也是函數對象。

普通對象

首先我們來講普通對象，我們通過一張圖來看看普通對象在創建時都做了些什么。

1   var foo = {
2      x: 10,
2      y: 20
3   }

4  console.log(foo.__proto === Object.prototype)    // true

上面的代碼中我們創建了一個普通對象foo，并初始化了兩個屬性（自身屬性）x、y，同時在對象內部還自動創建了一個屬性__proto__,這個__proto__屬性實際上是個指針，指向構造foo的構造函數的原型，這里foo對象實際是通過 new Object 創建的，因此第4行代碼結果為true. 這里講到了Object.prototype就涉及到函數對象了，因為只有函數對象才有prototype屬性，所以接下來我們講函數對象。

函數對象

用與上面類似的代碼來解釋：

1    function foo() {
2        this.x = 10
3    }

4    foo.prototype.y = 20;

5    console.log(foo.__proto__);    
6    console.log(foo.prototype);

當我們創建foo函數時，初始化了一個自身屬性x = 10，同時函數對象中自動創建了一個prototype屬性和__proto__屬性，還為foo創建了一個原型對象foo.prototype。其中__proto__屬性我們上面已經講過了，而prototype屬性則指向foo新創建的prototype原型對象，這個原型對象中自動創建了一個constructor屬性，指向構造函數foo。
（注：原型對象prototype也是一個普通對象，因此會自動創建__proto__屬性，為避免文章變得晦澀難懂，此處省略，后面再深入講解）
執行第4行代碼，為新創建的prototype原型對象添加了一個原型屬性y = 20。
執行5、6行代碼，我們可以看到控制臺打印出來的結果如下：

結果印證了我們上面講的內容：1.__proto__指向foo的構造函數function 2.prototype指向foo的原型對象prototype 3.原型對象中constructor指向構造函數foo。

下一節內容：javaScript原型及原型鏈詳解（二）

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

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

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

javaScript原型及原型鏈詳解（二）

摘要：當然這還沒完，因為我們還有重要的一步沒完成，沒錯就是上面的第行代碼，如果沒有這行代碼實例中的指針是指向構造函數的，這樣顯然是不對的，因為正常情況下應該指向它的構造函數，因此我們需要手動更改使重新指向對象。第一節內容：javaScript原型及原型鏈詳解（二）第一節中我們介紹了javascript中的原型和原型鏈，這一節我們來講利用原型和原型鏈我們可以做些什么。普通對象的繼承 ...

widuu 2019-08-20 16:37 評論0 收藏0
【前端芝士樹】Javascript的原型與原型鏈

摘要：在創建對象不論是普通對象還是函數對象的時候，都有一個叫做的內置屬性，用于指向創建它的構造函數的原型對象，也就是。因為一個普通對象的構造函數所以原型鏈原型鏈的形成是真正是靠而非。參考文章最詳盡的原型與原型鏈終極詳解，沒有可能是。【前端芝士樹】Javascript的原型、原型鏈以及繼承機制前端的面試中經常會遇到這個問題，自己也是一直似懂非懂，趁這個機會整理一下 0. 為什么會出現原型和...

yy736044583 2019-08-23 12:17 評論0 收藏0
JavaScript學習總結（五）原型和原型鏈詳解

摘要：原型對象內部也有一個指針屬性指向構造函數實例可以訪問原型對象上定義的屬性和方法。在創建子類型的實例時，不能向超類型的構造函數中傳遞參數。贊助我以寫出更好的文章，give me a cup of coffee? 2017最新最全前端面試題私有變量和函數在函數內部定義的變量和函數，如果不對外提供接口，外部是無法訪問到的，也就是該函數的私有的變量和函數。 function ...

EscapedDog 2019-08-21 12:28 評論0 收藏0
詳解javascript的類

摘要：原文地址詳解的類博主博客地址的個人博客從當初的一個彈窗語言，一步步發展成為現在前后端通吃的龐然大物。那么，的類又該怎么定義呢在面向對象編程中，類是對象的模板，定義了同一組對象又稱實例共有的屬性和方法。這個等同于的屬性現已棄用。。前言生活有度，人生添壽。原文地址：詳解javascript的類博主博客地址：Damonare的個人博客 ??Javascript從當初的一個彈窗語言，一...

hufeng 2019-08-29 11:30 評論0 收藏0