JS 原型的解釋

silvertheo 發(fā)布于2019-08-21 15:51 / 3195人閱讀

首先明確兩個概念: 構造函數和 instance 分別是什么

構造函數
JS 中并沒有在語法層面上面區(qū)分構造函數和普通函數, 唯一的區(qū)別是調用方式
使用 new 調用的函數就是構造函數, 沒有則是普通函數.

實例
new Constructor() 返回的對象稱為 Constructor 的一個實例

然后提出一個規(guī)則:
在構造函數的原型上面附加的屬性或者方法, 可以被其所有的實例共用.

可以推導出:

構造函數可以訪問到它的原型, 并且向其上面添加方法和屬性

構造函數的原型應該是一個對象, 這樣才能向其上添加方法和屬性

實例也擁有其構造函數的原型的一個引用, 要不然無法共用.

解釋:
1 構造函數的確有一個屬性, 可以訪問到它的原型, 屬性名為 prototype.
規(guī)范下稱呼:
a 函數的 prototype 屬性, 稱為 "原型屬性"
b 函數的原型屬性指向的對象, 稱為 "原型對象"

2 實例也的確擁有一個對其構造函數的原型的引用
這個引用是一個內部屬性, 使用 [[prototype]] 表示, 稱為 "實例的內部屬性 prototype"
a 內部屬性意味著這個玩意不可讀, 你沒有辦法訪問到的
b 部分瀏覽器為實例提供了一個屬性 "__proto__", 同樣指向實例的構造函數的原型對象.

從實例的角度來看:
1 實例希望知道自己的構造函數是誰
2 實例希望知道自己可以使用的方法到底有多少, 希望知道它的構造函數的原型里面到底有多少方法和屬性

實例何從知道自己的構造函數是誰

 通過 constructor 屬性

每一個 instance, 可以通過 constructor 屬性, 訪問到它的構造函數

 instance 并不擁有 constructor 屬性
      當訪問 instance.constructor 的時候
           instance 本身不持有
           從它構造函數的原型對象中查找
           發(fā)現存在 constructor 屬性
                返回 constructor 的值.

并且存在有:

 構造函數原型對象的 constructor 屬性 始終指向構造函數本身。
 fn.prototype.constructor === fn;

實例想要知道它的構造函數的原型對象擁有多少方法和屬性

 
 根據上面的 constructor 屬性, 可以得到
 instance.constructor.prototype 即可訪問
 或者
 __proto__

應用到具體的場景里面, JS 的所有數據類型的構造函數是誰, 它們的構造函數的原型對象是什么樣子的

原始值類型有:

String
Number
Null
Undefined
Boolean

構造函數分別有:

(1).__proto__ // Number
"a".__proto__ // String
true.__proto__ // Boolean

引用值類型
Array
Function
Object

構造函數分別有:
[].__proto__ // Array
{}.__proto__ // Object
(function (){}).__proto__ // Function

更近一步的思考:
構造函數是否擁有構造函數
構造函數的原型對象是否擁有構造函數

根據上面的信息, 可以嘗試一下

"a".constructor.constructor

最終發(fā)現:
不論原始值類型, 還是引用類型, 它們的構造函數的構造函數, 都是 Function
更近一步, Function 的構造函數是誰
經過驗證, Function 的構造函數是它本身.

 Function.constructor = Function;

說明構造函數到這里到底了.

構造函數的原型對象是否擁有構造函數

 擁有, 你糊了, 原型對象本身就擁有一個 constructor 屬性, 指向構造函數本身.

補充:
下面說的是一個規(guī)則, 不是一個推導

 原型對象本身同樣擁有一個內部屬性 [[prototype]], 指向當前構造函數的構造函數的原型對象.
 這種由原型對象構建而成的鏈表, 就是原型鏈.
 原型鏈存在的意義, 在于盡可能的共用方法和屬性. 或者其他更多的我不知道的意義.

原型鏈長什么樣子
值

 "hello"

它的原型鏈條的
第一個原型對象

 "hello".constructor.prototype  // = String.prototype

第二個原型對象

 "hello".constructor.prototype.__proto__  // = Object.prototype

這里不能再用

 "hello".constructor.prototype.constructor.prototype 
 來間接訪問原型對象的構造函數的原型對象了.

說明 constructor.prototype 這個玩意并不靠譜, 在遇見原型對象的時候就不好用了。

第三個原型對象

 "hello".constructor.prototype.__proto__.__proto__  == null;

說明到底了.

GPU云服務器云服務器 js原型鏈的繼承 js原型面試題 js原型屬性有什么用基于原型的語言

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

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

JS 進階（一）作用域深入和面向對象

摘要：進階第一章作用域深入和面向對象預解釋全局作用域當瀏覽器加載頁面的時候，提供了一個全局代碼執(zhí)行的環(huán)境預解釋變量提升在當前的作用域中，代碼執(zhí)行之前，瀏覽器首先會默認的吧所有帶有和的進行提前聲明或定義理解聲明和定義聲明告訴瀏覽器在全局作用域中有 JS進階第一章作用域深入和面向對象預解釋 1、全局作用域：當瀏覽器加載HTML頁面的時候，提供了一個全局js代碼執(zhí)行的環(huán)境 2、預解釋（變量提升...

chengtao1633 2019-08-22 18:50 評論0 收藏0
javascript基礎學習

摘要：預解釋變量和函數的預解釋只發(fā)生在當前的作用于中中內存的分類棧內存用來提供一個代碼指定的環(huán)境作用域全局作用域和局部作用域堆內存用來存儲引用類型的值對象存儲的是鍵值對，函數儲存的是字符串函數執(zhí)行的時候形成一個私有作用域有形參給形參賦值，形參也預解釋變量和函數的預解釋只發(fā)生在當前的作用于中 js中內存的分類棧內存：用來提供一個js代碼指定的環(huán)境 —>作用域(全局作用域和局部作用域...

魏明 2019-08-26 13:24 評論0 收藏0
用小豬佩奇說明Javascript的原型和原型鏈

摘要：它指向構造函數的原型對象這是原型對象上的一個指向構造函數的屬性。先看代碼的構造函數創(chuàng)建一個的實例，小豬佩奇敲黑板，劃重點，理解這一句整個問題的關鍵，請多重復幾遍。也就是說小豬佩奇的原型，就是從繼承來的寫成代碼就是這個樣子。 ??沒錯，我就是標題黨！你已經成功被我騙進來了。來都來了，那就聊聊再走唄！接下來就聽我一本正經地跟你說道說道。 ??Javascript的原型是這門語言的一個重點和...

vibiu 2019-08-26 11:59 評論0 收藏0
前端面試筆記 - js相關

摘要：將單個事件綁定在父對象上，利用冒泡機制監(jiān)聽來自子元素的事件。事件目標當到達目標元素之后，執(zhí)行目標元素該事件相應的處理函數。函數對象當使用去調用構造函數時，相當于執(zhí)行了原型對象上都有個預定義的屬性，用來引用它的函數對象。請解釋事件代理 (event delegation)。將單個事件綁定在父對象上，利用冒泡機制,監(jiān)聽來自子元素的事件。優(yōu)點：解決子元素增加刪除時候的事件處理，防止內存...

Dogee 2019-08-23 14:50 評論0 收藏0
前端面試題收集，持續(xù)更新中

摘要：對于所訪問的每個元素，函數應該將該元素傳遞給所提供的回調函數。 HTML 在線閱讀Github地址題目列表 HTML HTML和XHTML的區(qū)別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？常見的瀏覽器內核有哪些？介紹一下你對瀏覽器內核的理解？...

kgbook 2019-08-22 16:49 評論0 收藏0