原來(lái)JS還可以這樣拆箱轉(zhuǎn)換詳解
前言
在讀 Winter 大佬的《重學(xué)前端》欄目時(shí),重溫了 JS 的「拆箱轉(zhuǎn)換」?!秆b箱轉(zhuǎn)換」與「拆箱轉(zhuǎn)換」以前都是了解的,今天來(lái)看,自己所謂的了解也真是一知半解。在閱讀 Winter 老師寫的內(nèi)容后,對(duì)「拆箱轉(zhuǎn)換」這個(gè)知識(shí)點(diǎn)還是不甚清楚,因此我再去深入地了解一番,參考資料詳見(jiàn)文末的「參考鏈接」。
被我們忽略的表象
首先,我們來(lái)看一下例子:
const a = { name: 'a', toString () { console.log(this); console.log('toString'); return { name: 'toString' }; }, valueOf () { console.log(this); console.log('valueOf'); return { name: 'valueOf' }; } }; a * 2; // {name: "a", toString: ƒ, valueOf: ƒ} // valueOf // {name: "a", toString: ƒ, valueOf: ƒ} // toString // Uncaught TypeError: Cannot convert object to primitive value a + ""; // {name: "a", toString: ƒ, valueOf: ƒ} // valueOf // {name: "a", toString: ƒ, valueOf: ƒ} // toString // Uncaught TypeError: Cannot convert object to primitive alert(a); // {name: "a", toString: ƒ, valueOf: ƒ} // toString // {name: "a", toString: ƒ, valueOf: ƒ} // valueOf // Uncaught TypeError: Cannot convert object to primitive value
可以看到,toString 和 valueOf 的執(zhí)行順序并不固定,而是根據(jù)某個(gè)條件來(lái)決定的,那么是根據(jù)什么呢?那就是在拆箱轉(zhuǎn)換時(shí),調(diào)用了對(duì)象的 ToPrimitive 內(nèi)部函數(shù)時(shí),其會(huì)根據(jù)執(zhí)行上下文,自動(dòng)傳入一個(gè)轉(zhuǎn)換類型參數(shù),暫時(shí)給它命名為 hint。
ToPrimitive
在 JavaScript 標(biāo)準(zhǔn)中,規(guī)定了 ToPrimitive 函數(shù),它是對(duì)象類型到基本類型轉(zhuǎn)換的實(shí)現(xiàn)者(即,拆箱轉(zhuǎn)換);但這是一個(gè)內(nèi)部算法,是編程語(yǔ)言在內(nèi)部執(zhí)行時(shí)遵循的一套規(guī)則。
對(duì)象到 String 和 Number 的轉(zhuǎn)換都遵循“先拆箱再轉(zhuǎn)換”的規(guī)則。通過(guò)拆箱轉(zhuǎn)換,把對(duì)象變成基本類型,再?gòu)幕绢愋娃D(zhuǎn)換為對(duì)應(yīng)的 String 或者 Number。
但是對(duì)于不同的操作,拆箱轉(zhuǎn)換的內(nèi)部實(shí)現(xiàn)也有所區(qū)別,正如上面的例子所示。
「拆箱轉(zhuǎn)換」的調(diào)用規(guī)則及順序如下:
- 檢查對(duì)象中是否有用戶顯式定義的 [Symbol.toPrimitive] 方法,如果有,直接調(diào)用;
- 如果沒(méi)有,則執(zhí)行原內(nèi)部函數(shù) ToPrimitive,然后判斷傳入的 hint 值,如果其值為 string,順序調(diào)用對(duì)象的 toString 和 valueOf 方法(其中 toString 方法一定會(huì)執(zhí)行,如果其返回一個(gè)基本類型值,則返回、終止運(yùn)算,否則繼續(xù)調(diào)用 valueOf 方法);
- 如果判斷傳入的 hint 值不為 string,則就可能為 number 或者 default 了,均會(huì)順序調(diào)用對(duì)象的 valueOf 和 toString 方法(其中 valueOf 方法一定會(huì)執(zhí)行,如果其返回一個(gè)基本類型值,則返回、終止運(yùn)算,否則繼續(xù)調(diào)用 toString 方法);
來(lái)看一下第一種情況:
const b = { [Symbol.toPrimitive] (hint) { console.log(`hint: ${hint}`); return {}; }, toString () { console.log('toString'); return 1; }, valueOf () { console.log('valueOf'); return 2; } }; alert(b); // hint: string b + ''; // hint: default b + 500; // hint: default +b; // hint: number b * 1; // hint: number
第二、三種情況:
const c = { toString () { console.log('toString'); return 1; }, valueOf () { console.log('valueOf'); return 2; } }; alert(c); // 打印出 toString 并 alert 出 1 c + ''; // 先后打印出 valueOf,"2" c + 500; // 先后打印出 valueOf,502 +c; // 先后打印出 valueOf,2 c * 1; // 先后打印出 valueOf,2
那么關(guān)于 hint 可取的三種值,都有什么含義?又什么情況對(duì)應(yīng)什么值?
確定 hint 取值
string
當(dāng)在希望是字符串操作,也即發(fā)生對(duì)象到字符串的轉(zhuǎn)換時(shí),傳入內(nèi)部函數(shù) ToPrimitive 的參數(shù)值即為 string:
// output alert(obj); // using object as a property key anotherObj[obj] = 123;
number
當(dāng)在希望是數(shù)值操作,也即發(fā)生對(duì)象到數(shù)值的轉(zhuǎn)換時(shí),傳入內(nèi)部函數(shù) ToPrimitive 的參數(shù)值即為 number:
// explicit conversion let num = Number(obj); // maths (except binary plus) let n = +obj; // unary plus let delta = date1 - date2; // less/greater comparison let greater = user1 > user2;
default
當(dāng)在一些不確定需要將對(duì)象轉(zhuǎn)換成什么基礎(chǔ)類型的場(chǎng)景下,傳入內(nèi)部函數(shù) ToPrimitive 的參數(shù)值即為 default:
// binary plus let total = car1 + car2; // obj == string/number/symbol if (user == 1) { ... };
結(jié)語(yǔ)
如果親愛(ài)的讀者們?cè)诒疚闹邪l(fā)現(xiàn)了什么錯(cuò)誤,或者有什么不同的意見(jiàn),還請(qǐng)留言,一起討論,一起將隱藏的、晦澀的點(diǎn)提出來(lái),然后解決掉。
參考鏈接
- 《重學(xué)前端》——極客時(shí)間APP
- Object to primitive conversion
- ToPrimitive
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- Json對(duì)象與Json字符串互轉(zhuǎn)(4種轉(zhuǎn)換方式)
- js數(shù)組與字符串的相互轉(zhuǎn)換方法
- js 將json字符串轉(zhuǎn)換為json對(duì)象的方法解析
- js中將字符串轉(zhuǎn)換成json的三種方式
- js 字符串轉(zhuǎn)換成數(shù)字的三種方法
- 解析JSON對(duì)象與字符串之間的相互轉(zhuǎn)換
- js字符串轉(zhuǎn)換成數(shù)字與數(shù)字轉(zhuǎn)換成字符串的實(shí)現(xiàn)方法
- JS對(duì)象與JSON格式數(shù)據(jù)相互轉(zhuǎn)換
- js將類數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組對(duì)象
- js實(shí)現(xiàn)數(shù)組轉(zhuǎn)換成json
相關(guān)文章
uni-app如何頁(yè)面?zhèn)鲄?shù)的幾種方法總結(jié)
這篇文章主要介紹了uni-app如何頁(yè)面?zhèn)鲄?shù)的幾種方法總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04為什么說(shuō)JavaScript預(yù)解釋是一種毫無(wú)節(jié)操的機(jī)制詳析
這篇文章主要給大家介紹了關(guān)于為什么說(shuō)JavaScript預(yù)解釋是一種毫無(wú)節(jié)操的機(jī)制的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧2018-11-11基于mouseout和mouseover等類似事件的冒泡問(wèn)題解決方法
這篇文章主要介紹了關(guān)于mouseout和mouseover等類似事件的冒泡問(wèn)題解決方法。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11typeScript?核心基礎(chǔ)之接口interface
本篇文章主要介紹?typeScript?中接口是啥?如何定義的?接口是如何進(jìn)行擴(kuò)展的以及類如何實(shí)現(xiàn)接口,接下來(lái)和小編一起進(jìn)入下面文章一起學(xué)習(xí)?typeScript?接口2022-02-02D3.js實(shí)現(xiàn)散點(diǎn)圖和氣泡圖的方法詳解
這篇文章將會(huì)給大家介紹了另外兩種可視化圖表,利用D3.js實(shí)現(xiàn)散點(diǎn)圖和氣泡圖,文章通過(guò)多個(gè)方面介紹的非常詳細(xì),下面來(lái)一起看看吧。2016-09-09帶有定位當(dāng)前位置的百度地圖前端web api實(shí)例代碼
這篇文章主要介紹了帶有定位當(dāng)前位置的百度地圖前端web api實(shí)例代碼 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06面試官常問(wèn)之說(shuō)說(shuō)js中var、let、const的區(qū)別
var、let和const都是JavaScript中用來(lái)聲明變量的關(guān)鍵字,并且let和 const關(guān)鍵字是在 ES6 中才新增的,下面這篇文章主要給大家介紹了關(guān)于var、let、const區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-03-03