資訊專欄INFORMATION COLUMN
首先明確兩個概念: 構(gòu)造函數(shù)和 instance 分別是什么
構(gòu)造函數(shù)
JS 中并沒有在語法層面上面區(qū)分構(gòu)造函數(shù)和普通函數(shù), 唯一的區(qū)別是調(diào)用方式
使用 new 調(diào)用的函數(shù)就是構(gòu)造函數(shù), 沒有則是普通函數(shù).
實例
new Constructor() 返回的對象稱為 Constructor 的一個實例
然后提出一個規(guī)則:
在構(gòu)造函數(shù)的原型上面附加的屬性或者方法, 可以被其所有的實例共用.
可以推導出:
構(gòu)造函數(shù)可以訪問到它的原型, 并且向其上面添加方法和屬性
構(gòu)造函數(shù)的原型應該是一個對象, 這樣才能向其上添加方法和屬性
實例也擁有其構(gòu)造函數(shù)的原型的一個引用, 要不然無法共用.
解釋:
1 構(gòu)造函數(shù)的確有一個屬性, 可以訪問到它的原型, 屬性名為 prototype.
規(guī)范下稱呼:
a 函數(shù)的 prototype 屬性, 稱為 "原型屬性"
b 函數(shù)的 原型屬性指向的 對象, 稱為 "原型對象"
2 實例也的確擁有一個對其構(gòu)造函數(shù)的原型的引用
這個引用是一個內(nèi)部屬性, 使用 [[prototype]] 表示, 稱為 "實例的內(nèi)部屬性 prototype"
a 內(nèi)部屬性意味著這個玩意不可讀, 你沒有辦法訪問到的
b 部分瀏覽器為實例提供了一個屬性 "__proto__", 同樣指向 實例的構(gòu)造函數(shù)的原型對象.
從實例的角度來看:
1 實例希望知道自己的構(gòu)造函數(shù)是誰
2 實例希望知道自己可以使用的方法到底有多少, 希望知道它的構(gòu)造函數(shù)的原型里面到底有多少方法和屬性
實例何從知道自己的構(gòu)造函數(shù)是誰
通過 constructor 屬性
每一個 instance, 可以通過 constructor 屬性, 訪問到它的構(gòu)造函數(shù)
instance 并不擁有 constructor 屬性
當訪問 instance.constructor 的時候
instance 本身不持有
從它構(gòu)造函數(shù)的原型對象中查找
發(fā)現(xiàn)存在 constructor 屬性
返回 constructor 的值.
并且存在有:
構(gòu)造函數(shù)原型對象的 constructor 屬性 始終指向構(gòu)造函數(shù)本身。 fn.prototype.constructor === fn;
實例想要知道它的構(gòu)造函數(shù)的原型對象擁有多少方法和屬性
根據(jù)上面的 constructor 屬性, 可以得到 instance.constructor.prototype 即可訪問 或者 __proto__
應用到具體的場景里面, JS 的所有數(shù)據(jù)類型的構(gòu)造函數(shù)是誰, 它們的構(gòu)造函數(shù)的原型對象是什么樣子的
原始值類型有:
String
Number
Null
Undefined
Boolean
構(gòu)造函數(shù)分別有:
(1).__proto__ // Number
"a".__proto__ // String
true.__proto__ // Boolean
引用值類型
Array
Function
Object
構(gòu)造函數(shù)分別有:
[].__proto__ // Array
{}.__proto__ // Object
(function (){}).__proto__ // Function
更近一步的思考:
構(gòu)造函數(shù)是否擁有構(gòu)造函數(shù)
構(gòu)造函數(shù)的原型對象是否擁有構(gòu)造函數(shù)
根據(jù)上面的信息, 可以嘗試一下
"a".constructor.constructor
最終發(fā)現(xiàn):
不論原始值類型, 還是引用類型, 它們的構(gòu)造函數(shù)的構(gòu)造函數(shù), 都是 Function
更近一步, Function 的構(gòu)造函數(shù)是誰
經(jīng)過驗證, Function 的構(gòu)造函數(shù)是它本身.
Function.constructor = Function;
說明構(gòu)造函數(shù)到這里到底了.
構(gòu)造函數(shù)的原型對象是否擁有構(gòu)造函數(shù)
擁有, 你糊了, 原型對象本身就擁有一個 constructor 屬性, 指向構(gòu)造函數(shù)本身.
補充:
下面說的是一個規(guī)則, 不是一個推導
原型對象本身同樣擁有一個內(nèi)部屬性 [[prototype]], 指向當前構(gòu)造函數(shù)的構(gòu)造函數(shù)的原型對象. 這種由原型對象構(gòu)建而成的鏈表, 就是原型鏈. 原型鏈存在的意義, 在于盡可能的共用方法和屬性. 或者其他更多的我不知道的意義.
原型鏈長什么樣子
值
"hello"
它的原型鏈條的
第一個原型對象
"hello".constructor.prototype // = String.prototype
第二個原型對象
"hello".constructor.prototype.__proto__ // = Object.prototype
這里不能再用
"hello".constructor.prototype.constructor.prototype 來間接訪問原型對象的構(gòu)造函數(shù)的原型對象了.
說明 constructor.prototype 這個玩意并不靠譜, 在遇見原型對象的時候就不好用了。
第三個原型對象
"hello".constructor.prototype.__proto__.__proto__ == null;
說明到底了.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88289.html
摘要：進階第一章作用域深入和面向?qū)ο箢A解釋全局作用域當瀏覽器加載頁面的時候，提供了一個全局代碼執(zhí)行的環(huán)境預解釋變量提升在當前的作用域中，代碼執(zhí)行之前，瀏覽器首先會默認的吧所有帶有和的進行提前聲明或定義理解聲明和定義聲明告訴瀏覽器在全局作用域中有 JS進階 第一章作用域深入和面向?qū)ο?預解釋 1、全局作用域：當瀏覽器加載HTML頁面的時候，提供了一個全局js代碼執(zhí)行的環(huán)境 2、預解釋（變量提升...
摘要：預解釋變量和函數(shù)的預解釋只發(fā)生在當前的作用于中中內(nèi)存的分類棧內(nèi)存用來提供一個代碼指定的環(huán)境作用域全局作用域和局部作用域堆內(nèi)存用來存儲引用類型的值對象存儲的是鍵值對，函數(shù)儲存的是字符串函數(shù)執(zhí)行的時候形成一個私有作用域有形參給形參賦值，形參也 預解釋 變量和函數(shù)的預解釋只發(fā)生在當前的作用于中 js中內(nèi)存的分類 棧內(nèi)存：用來提供一個js代碼指定的環(huán)境 —>作用域(全局作用域和局部作用域...
摘要：它指向構(gòu)造函數(shù)的原型對象這是原型對象上的一個指向構(gòu)造函數(shù)的屬性。先看代碼的構(gòu)造函數(shù)創(chuàng)建一個的實例，小豬佩奇敲黑板，劃重點，理解這一句整個問題的關(guān)鍵，請多重復幾遍。也就是說小豬佩奇的原型，就是從繼承來的寫成代碼就是這個樣子。 ??沒錯，我就是標題黨！你已經(jīng)成功被我騙進來了。來都來了，那就聊聊再走唄！接下來就聽我一本正經(jīng)地跟你說道說道。 ??Javascript的原型是這門語言的一個重點和...
摘要：將單個事件綁定在父對象上，利用冒泡機制監(jiān)聽來自子元素的事件。事件目標當?shù)竭_目標元素之后，執(zhí)行目標元素該事件相應的處理函數(shù)。函數(shù)對象當使用去調(diào)用構(gòu)造函數(shù)時，相當于執(zhí)行了原型對象上都有個預定義的屬性，用來引用它的函數(shù)對象。 請解釋事件代理 (event delegation)。 將單個事件綁定在父對象上，利用冒泡機制,監(jiān)聽來自子元素的事件。 優(yōu)點：解決子元素增加刪除時候的事件處理，防止內(nèi)存...
摘要：對于所訪問的每個元素，函數(shù)應該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址 題目列表 HTML HTML和XHTML的區(qū)別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？ 常見的瀏覽器內(nèi)核有哪些？ 介紹一下你對瀏覽器內(nèi)核的理解？...
閱讀 3729·2021-09-22 15:49
閱讀 3300·2021-09-08 09:35
閱讀 1422·2019-08-30 15:55
閱讀 2321·2019-08-30 15:44
閱讀 714·2019-08-29 16:59
閱讀 1597·2019-08-29 16:16
閱讀 479·2019-08-28 18:06
閱讀 890·2019-08-27 10:55
