iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
0
自我挑戰組

Javascript 犀牛本-濃縮再濃縮 提煉再提煉系列 第 3

Day 3: Datatypes and Values (Part 2)

JavaScript型別

null

  • null 是JavaScript關鍵字。
  • null 被視為一種無物件(no object)的特殊物件。
  • null 自成一個型別且這個型別的成員只有自己。
var test = null;
typeof test // "object"

undefined

  • 表示值不存在。
  • 對尚未初始化的變數中取著會得到undefined。
var str1;
var str2;
typeof str1; // "undefined"
str1 == str2; // true
str1 === str2 // false

undefined 像是系統層級的錯誤值(嘗試去取得未初始化的參數)
null 像是程式層級的空值(非錯誤)

Group物件

在web browser開啟時啟動Javascript會創建group參數。

  • Group object
    • undefined、Infinity、NaN
    • isNaN()、parseInt()、eval()
    • Data()、RegExp()、Striing()、Object()、Array()
    • Math、JSON
  • 可以使用this關鍵字取得group屬性
var group = this;
  • 在browser中的Window可當成group變數,Window 有一個window屬性可以代替this.

Wrapper物件

  • 透過"."來取得屬性值,若屬性值是函數,則透過o.m()來取得o裡面的m函數。
string

看看以下的例子

var str = "test";

當我們str是"test"(字串)時,JavaScript 會透過 new String(str)的方式轉成Object,這個Object繼承了String的方法,所以這時候可以去引用String的方法或屬性,當引用結束後,會將這個創立的Object銷毀(實際上不一定是真的銷毀)
所以看看以下的例子

var str = "test";
str.len = 5;
str.len; // return "undefined"

可以看到str.len 會回undefined,這是因為上面所說的當引用結束會將Object銷毀

var str1 = "test";
var str2 = new String(str1);
str1; // return "test"
str2; // teturn String {"test"} ->是一個String 的Object 如下圖
str1 == str2; // return true 
str1 === str2; // return false
typeof str1; // "string"
typeof str2; // "object"

Number()、Boolean()、String()是同樣的邏輯。
當在參考 string number boolean 的特性,會暫時產生Wrapper物件 (有種臨時物件的感覺),當對wrapper 物件操作時,如果碰到需要基本型別的場景,也是會被自動轉換。
wrapper 屬於js得實作細節,無法定義新特性
wrapper物件是JavaScript的實作,string、number、boolean與物件的差異在於他們無法加新的特性,新增完隨即會被註銷。

類型轉換

當在使用boolean時,但提供任意類型值,JavaScript會根據需要自動轉換類型

value string number boolean object
undefined "udefined" NaN false throws TypeError
null "null" 0 false throws TypeError
true "true" 1 true new Boolean(true)
false "false" 0 false new Boolean(false)
""(空字串) 0 false new String("")
"1.5" 1.5 true new String("1.5")
0 "0" 0 false new Number(0)
-0 "0" -0 false new Number(-0)
NaN "NaN" NaN false new Number(NaN)
Infinity "Infinity" Infinity true new Number(Infinity)
-Infinity "-Infinity" -Infinity true new Number(-Infinity)
  • 下面的例子都成立(true)
null == undefined;
"0" == 0;
0 == false;
"0" == false

undefined 在轉成boolean時會以false表示,但不代表 undefiined == false。

  • 如果拿物件型別來比較原始型別,所有的物件型別物件,一定會透過 valueOf() 或 toString() 方法先轉成原始型別物件,然後才進行比較
str1="string";
str2 = new String("string");
str1 == str2 // true 
// str2 會先執行 str2.valueof() 在作比較

str1 === str2 // false 

參考資料: valueof() and tostring()

hoisting

JavaScript會將宣告的參數提昇(hoisting)到函數的頂端(僅提昇宣告,並未做賦予值)

var scope = "global";
function() {
    console.log(scope); // "undefined"
    var scope = "local";
    console.log(scope); // local
}

可以看出第三行印出的是"undefined",非"global",再來看看以下經過hoisting後的程式

  • hoisting
var scope = "global";
function() {
    var scope;
    console.log(scope); // "undefined"
    scope = "local";
    console.log(scope); // local
}

以上的程式,可以看出hoisting後第三行對scope宣告,但為初始會(給值),所以第四行會是"undefined",第五行才給值,所以第六行才有local可以印出。


上一篇
Day 2: Datatypes and Values (Part 1)
下一篇
Day 4: 運算式與運算值
系列文
Javascript 犀牛本-濃縮再濃縮 提煉再提煉30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言