摘要:類型轉換之裝箱操作一文中說,因為是弱類型語言,我們可以像對待引用類型一樣對基本類型數據進行引用類型才該有的屬性獲取操作。本文的主題關注相反的操作對引用類型進行那些基本類型才該有的操作時會怎樣即,拆箱操作。
眾所周知,JS 中共有 7 種數據類型:Undefined、
Null、
Boolean、
Number、
String、
Symbol 和
Object。前 6 者是基本類型,
Object 是引用類型。
《類型轉換之裝箱操作》一文中說,因為 JS 是弱類型語言,我們可以像對待引用類型一樣對基本類型數據進行引用類型“才該有的”屬性獲取操作。
比如,如下的代碼并不會報錯:
var?a?=?1;
a.x?=?2;
上述代碼運行過程中,發生了“裝箱操作”,通過閱讀《ECMA-262》規范,我們知道瀏覽器內部是調用 ToObject 操作來實現的,它把基本類型包裝成相應的引用類型。例如把
1 包裝成了
new Number(1)。
本文的主題關注相反的操作:對引用類型進行那些基本類型“才該有的”操作時會怎樣?即,“拆箱操作”。
比如,如下的代碼并不會報錯:
var?a??=?1;
var?b?=?{};
console.log(a?-?b);
對普通對象進行減法操作時,對象需要轉化為數字類型。《Ecma-262 Edition 5.1》第11.6.2節對減法操作符規范如下:
The production AdditiveExpression : AdditiveExpression - MultiplicativeExpression is evaluated as follows:
- Let lref be the result of evaluating AdditiveExpression.
- Let lval be GetValue(lref).
- Let rref be the result of evaluating MultiplicativeExpression.
- Let rval be GetValue(rref).
- Let lnum be ToNumber(lval).
- Let rnum be ToNumber(rval).
- Return the result of applying the subtraction operation to lnum and rnum. See the note below 11.6.3.
上述操作中第 5、6 步比較關鍵,調用了內部操作
ToNumber:
Argument Type Result Undefined NaN Null +0 Boolean The result is 1 if the argument is true. The result is +0 if the argument is false. Number The result equals the input argument (no conversion). String See grammar and note below. Object Apply the following steps:
1. Let primValue be ToPrimitive(input argument, hint Number).
2. Return ToNumber(primValue).最后一行,處理
Object時,經歷兩步:1.
ToPrimitive。2.
ToNumber。
而
ToPrimitive 操作正與
ToObject 相對,表示轉化為基本類型:
Input Type Result Undefined The result equals the input argument (no conversion). Null The result equals the input argument (no conversion). Boolean The result equals the input argument (no conversion). Number The result equals the input argument (no conversion). String The result equals the input argument (no conversion). Object Return a default value for the Object. The default value of an object is retrieved by calling the [[DefaultValue]] internal method of the object, passing the optional hint PreferredType. The behaviour of the [[DefaultValue]] internal method is defined by this specification for all native ECMAScript objects in 8.12.8. 最后一行說,對象轉化為基本類型時,是獲取的對象的默認值。使用的是內部
[[DefaultValue]](hint),規范原文引用如下(補充:本文中的英文都可以不看的,我都會仔細說明的):
When the [[DefaultValue]] internal method of O is called with hint String, the following steps are taken:
- Let toString be the result of calling the [[Get]] internal method of object O with argument "toString".
- If IsCallable(toString) is true then,
- Let str be the result of calling the [[Call]] internal method of toString, with O as the this value and an empty argument list.
- If str is a primitive value, return str.
- Let valueOf be the result of calling the [[Get]] internal method of object O with argument "valueOf".
- If IsCallable(valueOf) is true then,
- Let val be the result of calling the [[Call]] internal method of valueOf, with O as the this value and an empty argument list.
- If val is a primitive value, return val.
- Throw a TypeError exception.
When the [[DefaultValue]] internal method of O is called with hint Number, the following steps are taken:
- Let valueOf be the result of calling the [[Get]] internal method of object O with argument "valueOf".
- If IsCallable(valueOf) is true then,
- Let val be the result of calling the [[Call]] internal method of valueOf, with O as the this value and an empty argument list.
- If val is a primitive value, return val.
- Let toString be the result of calling the [[Get]] internal method of object O with argument "toString".
- If IsCallable(toString) is true then,
- Let str be the result of calling the [[Call]] internal method of toString, with O as the this value and an empty argument list.
- If str is a primitive value, return str.
Throw a TypeError exception.- When the [[DefaultValue]] internal method of O is called with no hint, then it behaves as if the hint were Number, unless O is a Date object (see 15.9.6), in which case it behaves as if the hint were String.
When the [[DefaultValue]] internal method of O is called with no hint, then it behaves as if the hint were Number, unless O is a Date object (see 15.9.6), in which case it behaves as if the hint were String.
上述算法是說,根據
hint 值采取不同的處理方式,比如
hint 是
String 時,優先調用對象的
toString 方法,如果返回值是基本類型值,返回該值,否則調用對象的
valueOf 方法,如果返回值是基本類型值,返回該值。否則報錯。
而
hint 是
Number 時,順序是反過來的,優先調用
valueOf,如果其返回值不是基本類型,再調用
toString。另外,除了日期對象外,如果沒傳
hint 的話,其默認值是
Number,因此 JS 中類型轉化時,更偏愛
Number。
下面我們舉幾個例子看看:
var?a?=?{
??toString()?{
????return?3
??},
??valueOf()?{
????return?"30"
??}
};
console.log(a?-?5);?//?25這里使用的是減法操作,此時
hint 是
Number,因此先調用對象
a 的
valueOf 方法,其返回值
"30" 是字符串類型,是基本類型。因此
a - 5 變成了
"30" - 5。
再看:
var?a?=?{
??toString()?{
????return?{}
??},
??valueOf:?null
};
console.log(a?-?5);?//?Uncaught?TypeError:?Cannot?convert?object?to?primitive?value對象
a,其方法
valueOf 不是函數,因而看其
toString 方法,而該方法返回的是一個空對象,不是基本類型。因而報錯。
再如:
var?o?=?{
??toString()?{
????return?"now?is:?"
??},
??valueOf:?function()?{
????return?"時間是:"
??}
};
var?d?=?new?Date();
console.log(o?+?d);?//?時間是:Mon?May?06?2019?13:56:39?GMT+0800?(中國標準時間)這里使用了加法操作:
The production AdditiveExpression : AdditiveExpression + MultiplicativeExpression is evaluated as follows:
- Let lref be the result of evaluating AdditiveExpression.
- Let lval be GetValue(lref).
- Let rref be the result of evaluating MultiplicativeExpression.
- Let rval be GetValue(rref).
- Let lprim be ToPrimitive(lval).
- Let rprim be ToPrimitive(rval).
- If Type(lprim) is String or Type(rprim) is String, then
Return the String that is the result of concatenating ToString(lprim) followed by ToString(rprim)- Return the result of applying the addition operation to ToNumber(lprim) and ToNumber(rprim). See the Note below 11.6.3.
其中第 5、6 步直接獲取加號兩邊的基本類型。此時沒有都傳遞
hint,o 是普通對象,因此默認
hint 是
Number,使用的
valueOf 的返回值。而 d 是日期對象,默認
hint 是
String,優先調用的是其
toString 方法。然后根據第 7 步,采用的是字符串拼接方法。
加法操作,這里再舉一例:
var?o?=?{
???toString:?function()?{
????return?2
??}
};
console.log(o?+?o);?//?4這里不過多解釋了。
ToPrimitive 除了在四則運算中大量用到外,關系運算中也經常使用。比如
== 操作。其他類型轉換等相關知識留給后續文章吧。
至此,“拆箱”已經說完了。
本文完。
《JavaScript 迷你書》傳送門,全面夯實基礎
掘金收藏
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/7325.html
摘要:所謂裝箱轉換,正是把基本類型轉換為對應的對象,他是類型轉換中一種相當重要的種類。拆箱轉換在標準中,規定了函數,它是對象類型到基本類型的轉換即,拆箱轉換。拆箱轉換會嘗試調用和來獲得拆箱后的基本類型。 JavaScript隱式類型轉換 基本數據類型 ECMAScript 一共定義了七種 build-in types,其中六種為 Primitive Value,Null, Undefined...
摘要:本文參考自來自周志明深入理解虛擬機第版,拓展內容建議讀者可以閱讀下這本書。和構造方法一一對應,是同一概念在兩個級別的含義收斂的操作自動保證執行父類的執行語句塊初始化類變量字符串加操作替換為或的操作 showImg(https://segmentfault.com/img/remote/1460000016240419?w=3876&h=3614); 本文參考自來自周志明《深入理解Jav...
摘要:本文從底層原理到實際應用詳細介紹了中的變量和類型相關知識。內存空間又被分為兩種,棧內存與堆內存。一個值能作為對象屬性的標識符這是該數據類型僅有的目的。 導讀 變量和類型是學習JavaScript最先接觸到的東西,但是往往看起來最簡單的東西往往還隱藏著很多你不了解、或者容易犯錯的知識,比如下面幾個問題: JavaScript中的變量在內存中的具體存儲形式是什么? 0.1+0.2為什...
摘要:使用看完你就會正則表達式了四種操作驗證切分提取替換第一章正則表達式字符匹配攻略正則表達式是匹配模式,要么匹配字符,要么匹配位置至少,至多匹配中的任一個字符范圍表示法如果要匹配則要么要么要么通配符,表示幾乎任意 API 使用 String#search String#split String#match String#replace RegExp#test Reg...
閱讀 2405·2021-11-11 16:54
閱讀 1210·2021-09-22 15:23
閱讀 3653·2021-09-07 09:59
閱讀 2002·2021-09-02 15:41
閱讀 3289·2021-08-17 10:13
閱讀 3051·2019-08-30 15:53
閱讀 1241·2019-08-30 13:57
閱讀 1214·2019-08-29 15:16