圖解javascript原型&原型鏈

sutaking 發布于2019-08-23 18:08 / 774人閱讀

我們在學習javascript時，經常會聽到“萬物皆對象”，但是呢，其實萬物皆對象的對象也有區別。分為普通對象和函數對象。
1.對象分為函數對象和普通對象
? ??通過new Function()創建的對象都是函數對象，其他的都是普通對象。

2.構造函數
而提到new關鍵字，我們不得不提到構造函數。構造函數又分為自定義構造函數及native構造函數(即構造器)
2.1?自定義構造函數

 function Person(name,age,job){
? ? ? ? this.name = name;
? ? ? ? this.age = age;
? ? ? ? this.job = job;
? ??}
? ? var miya = new Person("miya",18,"engineer"); //miya是構造函數Person的實例；

而實例的構造函數屬性(constructor) 都指向構造函數
? ? 即：miya.constuctor = Person?
? ??
2.2 構造器?
? ??js內置的構造器包括Number,Boolean,String,Object,Function,Array,RegExp,Error,Date等
同樣的，我們的構造器的實例也有一個constuctor指向它的構造器
? ?

    let miya= new Array()
? ??miya.constuctor ==Array;

通過以上的分析，我們可以得到以下這張圖? ??

這里擴展一下，其實我們在做類型判斷的時候習慣用typeof，typeof判斷簡單數據類型的時候其實是ok的。但是typeof有判斷復雜數據類型不是很清晰，得到的基本是String或者Function
比如一下圖示判斷

但是，通過上述我們知道構造器的實例都有一個constructor的屬性指向構造器。那其實我們直接用constructor便可以清晰地知道這個實例從哪里來。

3.原型對象
? ? 每個函數對象都有一個prototype屬性，這個屬性指向函數的原型對象即prototype。
? ??所有的prototype會有一個默認的constuctor屬性，指向函數對象本身。? ??

function Person(name,age,job){
this.name = name;
    this.age = age;
    this.job = job;
}
Person.prototype.sayName = function () {
    console.log(this.name);
};

let miya = new Person("miya",18,"engineer");
let tiffany = new Person("tiffany",18,"engineer");
miya.sayName();  //miya
tiffany.sayName();  //tiffany
console.log(miya.sayName == tiffany.sayName);  //true
console.log(Person.prototype.constructor == Person);  //true

通過:Person.prototype.constuctor?= Person ，因為構造函數的實例是有一個constructor的屬性指向構造函數的，我們可以得到結論其實Person.prototype也是Person的實例
? ? 即：原型對象是構造函數的一個實例【原型對象(Function.prototype除外)是一個普通對象，而不是函數對象】

4.__proto__屬性
? ? 4.1 JS在創建對象的時候都會有一個__proto__指向它的構造函數的原型對象

其實，每個對象都有一個__proto__屬性，但只有函數對象有prototype屬性。
因此，可以得到以下這樣圖。

? ? 4.2構造函數擴展
? 而我們的構造函數本質上都是從Function new出來的。他們本質上都是Function的一個實例。都有一個__proto屬性指向Function的原型，也有一個constructor屬性指向Function。

? ? 提示：Math，JSON是以對象形式存在的，無需new。他們的__proto__是Object.prototype?

因此可以得到以下的圖示，所有的函數對象的__proto__都指向Function.prototype(是一個空函數)

5.函數對象
? ? 1.所有的構造器都是通過Function new出來的，他們都是Function的實例，他們的__pro__都指向Function.prototype，甚至包括根構造器Object及Function本身。

Number.__proto__ === Function.prototype  // true
Number.constructor == Function //true

String.__proto__ === Function.prototype  // true
String.constructor == Function //true

Object.__proto__ === Function.prototype  // true
Object.constructor == Function // true

Function.__proto__ === Function.prototype // true
Function.constructor == Function //true

? ? 2.除Object.prototype外，所有的構造器的prototype的__proto__屬性都指向Object.prototype

Function.prototype.__proto__ === Object.prototype; // true
Number.prototype.__proto__ === Object.prototype; // true
String.prototype.__proto__ === Object.prototype; // true
Array.prototype.__proto__ === Object.prototype; // true
Boolean.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === Object.prototype; // true

? ? 3.那Object.prototype的__proto__屬性是指向null的。

Object.prototype.__proto__?=== null;?// true

? ??Function.prototype也是唯一一個typeof XXX.prototype為?function的prototype? ??
? ??推導Function.prototype.__proto__是什么呢？ Object.prototype
? ? 所有的構造器都繼承Function.prototype的屬性及方法 =>所有的構造器函數都是普通的js函數可以用Object的方法
? ? Object.prototype.__proto__ == null
?
?

console.log(typeof Function.prototype) // function
console.log(typeof Object.prototype)   // object
console.log(typeof Number.prototype)   // object
console.log(typeof Boolean.prototype)  // object
console.log(typeof String.prototype)   // object
console.log(typeof Array.prototype)    // object
console.log(typeof RegExp.prototype)   // object
console.log(typeof Error.prototype)    // object
console.log(typeof Date.prototype)     // object
console.log(typeof Object.prototype)   // object

?
補充：
? ??null是一個獨立數據類型，而不是一個空引用，只是期望此處引用一個對象?https://developer.mozilla.org...
? ? typeof null == Object是一個遺留bug

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

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

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

《你不知道的javascript》筆記_對象&amp;原型

摘要：上一篇你不知道的筆記寫在前面這是年第一篇博客，回顧去年年初列的學習清單，發現僅有部分完成了。當然，這并不影響年是向上的一年在新的城市穩定連續堅持健身三個月早睡早起游戲時間大大縮減，學會生活。上一篇：《你不知道的javascript》筆記_this 寫在前面這是2019年第一篇博客，回顧去年年初列的學習清單，發現僅有部分完成了。當然，這并不影響2018年是向上的一年：在新的城市穩定、...

seasonley 2019-08-23 14:32 評論0 收藏0
【5】JavaScript 函數高級——原型與原型鏈深入理解（圖解）

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

馬龍駒 2019-08-23 17:17 評論0 收藏0
《javascript高級程序設計》筆記：原型圖解

摘要：不理解沒關系，下面會結合圖例分析上一篇高級程序設計筆記創建對象下一篇高級程序設計筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對象與原型鏈繼承與原型鏈文章直接從原型圖解開始的，如果對一些概念不太清除，可以結合后面幾節查看 1. 圖解原型鏈 1.1 鐵三角關系（重點） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 評論0 收藏0
Deep in JS - 收藏集 - 掘金

摘要：今天同學去面試，做了兩道面試題全部做錯了，發過來給道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。排序算法 -- JavaScript 標準參考教程（alpha） - 前端 - 掘金來自《JavaScript 標準參考教程（alpha）》，by 阮一峰目錄冒泡排序簡介算法實現選擇排序簡介算法實現 ... 圖例詳解那道 setTimeout 與循環閉包的經典面...

enali 2019-08-20 16:36 評論0 收藏0
《javascript高級程序設計》筆記：繼承

摘要：繼承和前面兩篇文章中的知識非常相關，如果對函數創建原理和原型鏈不熟悉，請猛戳高級程序設計筆記創建對象高級程序設計筆記原型圖解繼承，通俗的說，就是將自身不存在的屬性或方法，通過某種方式為自己所用文章分別介紹原型鏈繼承繼承借用構造函數繼承組合繼繼承和前面兩篇文章中的知識非常相關，如果對函數創建原理和原型鏈不熟悉，請猛戳：《javascript高級程序設計》筆記：創建對象《javascri...

JerryC 2019-08-21 17:31 評論0 收藏0