原型和原型鏈及 instanceof函數

Jioby 發布于2019-08-23 15:34 / 1406人閱讀

摘要：有一個有趣的現象為何為等等這些都被稱作是構造函數想一下我們可以來創建一個對象，所以本身就是一個構造函數，他們都是函數。而所有的函數都是構造函數的實例。

一、原型(prototype)

定義：一個簡單的對象，用于實現對象的屬性繼承。可以簡單理解成對象的爹。在Firefox和Chorme中，每個JS對象中都包含一個__proto__（非標準）的屬性指向該對象的原型，可obj.__proto__進行訪問

實例是通過構造函數（new）創建出來的對象，實例通過__proto__指向原型，通過constructor指向構造函數

以上描述可表示為：var a = new Object(); a.__proto__ === a.contructor.prototype

二、原型鏈(prototype chain)

原型鏈是由原型對象組成，每個對象都有一個__proto__屬性，指向了創建該對象的構造函數的原型，__proto__將對象鏈接起來組成了原型鏈。是一個用來實現繼承和共享屬性的有限的對象鏈。

在 javaScript 中，每個對象都有一個指向它的原型（prototype）對象的內部鏈接。這個原型對象又有自己的原型，直到某個對象的原型為 null 為止（也就是不再有原型指向），組成這條鏈的最后一環。這種一級一級的鏈結構就稱為原型鏈（prototype chain）

function A(){};
var a = new A();
// a  ===> a.__proto__(A.prototype) ===> A.prototype.__proto__(Object.prototype) ===> Object.prototype.__proto__ ===> null

三、instanceof函數

定義：instanceof運算時會遞歸查找L的原型鏈，即L.__proto__.__proto__.__proto__.__proto__...直到找到了或者找到頂層為止。一句話理解instanceof的運算規則為：instanceof檢測左側的__proto__原型鏈上，是否存在右側的prototype原型。
有一個有趣的現象：

Function instanceof Object; // true
Object instanceof Function; // true

為何Object instanceof Function為true？

Object, Function, Array等等這些都被稱作是構造“函數”（想一下我們可以var a = new Object()來創建一個對象，所以Object本身就是一個構造函數），他們都是函數。而所有的函數都是構造函數Function的實例。

從原型鏈機制的的角度來說，即Function.prototype在Object的原型鏈上。Function這個內置函數的Function.prototype是一個函數a，因為函數同時也是對象，因此這個函數a也定義了apply、call、bind等屬性（或者說方法）。而Object的委托目標Object.__proto__正是這個函數a，代碼表示為：Function.prototype === Object.__proto__ // true

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

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

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

繼承的實現方式及原型概述 | JavaScript 隨筆

摘要：每一個對象直接量都是的子類，即構造函數中的構造函數與普通函數并沒有什么兩樣，只不過在調用時，前面加上了關鍵字，就當成是構造函數了。由于沒有傳入變量，在調用的構造函數時，會出錯這個問題可以通過一個空對象來解決改自。 showImg(https://segmentfault.com/img/bVmNZj); 對于 OO 語言，有一句話叫Everything is object，雖然 Ja...

chenjiang3 2019-08-22 10:57 評論0 收藏0
復習Javascript專題（三）：面向對象（對象的創建與繼承，原型及原型鏈）

摘要：在創建子類實例時，不能向超類型的構造函數中傳遞參數。構造函數繼承子類傳進的值是基本思想是在子類構造函數的內部調用超類或父類型構造函數。繼承保證構造函數指針指向如果想同時繼承多個，還可使用添加屬性的方式類繼承， OOP：Object Oriented Programming 面向對象編程。題外話：面向對象的范圍實在太大，先把這些大的東西理解理解。 1.什么是對象？根據高程和權威指南上...

testHs 2019-08-23 13:39 評論0 收藏0
《javascript高級程序設計》筆記：原型圖解

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

vspiders 2019-08-21 17:29 評論0 收藏0
js數據類型及類型檢測

摘要：使用的構造函數是，它只為新對象定義了默認的屬性和方法。如果網頁中包含多個框架，那實際上就存在多個不同的全局執行環境，從而存在多個不同版本的構造函數。每個類在內部都有一個屬性，這個屬性中就指定了上述字符串中的構造函數。 js中常見的用于類型判斷的操作符或屬性有：typeof、instanceof、prototype。下面我們就來看看他們是如何判斷數據類型的。一.js數據類型 ECMAs...

Kyxy 2019-08-22 16:17 評論0 收藏0
詳解 JS 中 new 調用函數原理

摘要：中經常使用構造函數創建對象通過操作符調用一個函數，那在使用調用一個函數的時候到底發生了什么先看幾個例子，再解釋背后發生了什么。其中就是指構造函數本身。 JavaScript 中經常使用構造函數創建對象（通過 new 操作符調用一個函數），那在使用 new 調用一個函數的時候到底發生了什么？先看幾個例子，再解釋背后發生了什么。 1）看三個例子 1.1 無 return 語句構造函數最后...

付永剛 2019-08-22 18:22 評論0 收藏0