玩轉JavaScript OOP[0]——基礎類型

前言

long long ago，你們廣泛地認爲JavaScript就是作一些網頁特效的、處理一些事件的。
我身邊有一些老頑固的.NET程序員仍然停留在這種認知上，他們以爲沒有後端開發確定是構建不了系統的。

編程語言和技術的結合使用，就像一個男人娶了好幾個妞同樣。
在舊的時代，.NET是大房，JavaScript是偏房。
大房是「後宮之主」，不只要操持家業，還能給你生娃，娃未來也要繼承家業的。
偏房就沒那麼幸運了，在「後宮」沒什麼地位，雖然衣食無憂，但不能管理家族事務，生的娃也只能算是庶出，沒有繼承家業的權利。

But，時代變遷了，家族事業越作越大，家族也在各地開枝散葉，男人也變成了衆人口中的「老爺「。
事業這麼穩定，老爺太無聊了，好色又是人的本能，老爺要找點「性趣」來知足本身了。
大房爲家族勞心勞力，歲月在她的臉上留下了不少痕跡，老爺已經逐漸失去了對她的興趣；
偏房清閒度日，家族事務又不用她操心，平常事務就是打扮本身、維持本身的青春光彩。
老爺這雙好色的眸子又盯上了偏房，因而偏房終於上位了，上位固然是地位的提高，不只可以插手家族的事業，還能讓本身的娃也管理一部分生意。
(PS：這個例子有不恰當的地方，JavaScript出現的比.NET早）

隨着互聯網的普及和迅速發展，JavaScript能作的事兒愈來愈多。
它能作什麼呢？

• 它能作網頁富客戶端應用，結合HTML5和CSS3它能夠實現複雜的前端交互
• 它能作服務端應用，好比當前很是流行的Node.js框架
• 它能夠作移動端應用，好比你能夠經過PhoneGap或Titianium製做IOS和Android平臺的app

JavaScript還能作其餘不少事兒，JavaScript近乎無處不在。
如今咱們能夠這麼說，不管是PC、智能手機，仍是智能電視，凡是提供了JavaScript運行環境的設備，均可以用JavaScript來作一些事情。

類型概述

標題揭示了這又是一個系列文章，是關於JavaScript面向對象編程的。
在正式開始JavaScript面向對象編程前，咱們須要先對JavaScript的類型有一個全面的瞭解。

不少.NET程序員可以理解C#中的數據類型，但不能徹底理解JavaScript的數據類型。
JavaScript是一門弱類型的語言，它的類型雖然不如C#中那麼繁多，但它勝在靈活。

例如：在C#中，1就是int類型的，true就是bool類型的，1和true是不能直接比較的。
在JavaScript中，數字不只僅是數字，有時還能做爲條件判斷的邏輯表達式。

var count = 1;
if(count){
    console.log("Hello!");
}

在C#中，編譯器是不容許你這麼作的，下面的代碼根本就編譯不經過。

var count = 1;
if (count)
{
    Console.WriteLine("Hello!");
}

正式由於這樣的靈活性，使得一些.NET的程序員在編寫JavaScript代碼時產生了不少困惑。
今天咱們就帶着這個困惑開始這個系列之旅。

JavaScript數據類型簡介

在JavaScript中類型能夠分爲兩大類：

• 基礎類型：Number、String、Boolean、Undefined和Null。
• 複雜類型：只有Object一種。

（最新的ECMAScript 6追加了一個新的基礎類型Symbol）

1. Number: 數字類型，它包括整數、浮點數，例如：666, 3.14。
2. String: 表示文本數據的類型，例如："Hello", "JavaScript"。
3. Boolean: 表示一個邏輯實體，它只有兩個值true和false。
4. Undefined: 表示變量未定義或未賦值，它有一個惟一的值undefined。
5. Null: 它表示空、無值，它也只有一個惟一的值null。
6. Object: 它表示JavaScript中的對象，例如由new Array()或new Object建立的對象。

基礎類型和複雜類型的區別

• 基礎類型的變量直接保存值，例如數字100，字符串"Hello"。
• 複雜類型的變量並不直接保存對象，而是一個指向內存中實際對象的指針。

 

基礎類型

Number類型

.NET FCL的數字類型有多種，包括Int1六、Int3二、Int6四、Float、Double和Decimal。
Int1六、Int3二、Int64還分別包含有符號和無符號版本。

Int16 shortValue = 73;
Int32 intValue = 666;
Int64 longValue = 2147483648;
Single floatValue = 3.14f;
Double doubleValue = 999.99;
Decimal decimalValue = 86400.35627m;

在JavaScript中則只有一種數字類型，即Number類型，它包括整數和浮點數。
JavaScript的數字類型還有3個特殊的表示：

• Inifiity：正的無窮大
• -Inifity：負的無窮大
• NaN：非數字（Not a number）

下面這段JS代碼定義了5個變量，分別表示這5種狀況，使用typeof查看變量的類型：

var intValue = 123;
var floatValue = 3.14;
var nanValue = NaN;
var positiveInfinityValue = Infinity;
var negativeInfinityValue = -Infinity;

typeof操做用於獲取變量的類型，它符返回一個字符串

String類型

.NET的FCL有兩種字符類型，分別是Char和String。
Char用於表示一個16位的Unicode字符，String則用於表示一個字符數組。
Char類型須用一對單引號包圍字符，String類型需用一對雙引號包圍字符。

// Char字符
var ch = 'g';
// String字符串
var str1 = "Hello";
// 包含雙引號的字符串（使用轉義字符）
var str2 = "He said: \" It is a good job!\"";

JavaScript只有一種字符類型，即String類型。
和.NET不一樣的是，JavaScript的String類型用單引號和雙引號包圍字符均可以，這必定程度上提供了便利性。

// 1個字符的字符串
var ch = 'g';
// 字符串
var str1 = 'Hello World';
// 帶雙引號的字符串（使用轉義字符）
var str2 = "He said: \" It is a good job!\"";
// 使用單引號表示字符串，雙引號不用轉義
var str3 = 'He said: "It is a good job!"';

用typeof查看變量的類型：

Boolean類型

和.NET同樣，Boolean類型是表示邏輯實體，它只有true和false兩個值。

var flag = true;
var deleted = false;

用typeof查看變量類型：

Null類型

.NET也有null值，表示一個空指針的對象，null值用於引用類型。

因爲C#是強類型語言，因此沒法經過var關鍵字直接將null值賦給一個變量，由於編譯器沒法推斷它的隱式類型。

在JavaScript中，null值是Null類型的惟一值，概念上和.NET是一致的。

var foo = null;

使用typeof查看變量的類型

爲何typeof null爲"object"呢？

實際上typeof null爲"object"時ECMAScript的一個bug， 從JavaScript一開始出現時就是這樣的，typeof null原本應該是"null"。

Undefined類型

.NET沒有Undefined類型，Undefined是JavaScript特有的類型，表示未賦值的變量，或未定義的變量。

// 定義變量，未賦值
var undefinedValue1;
// 定義變量賦值爲undefined
var undefinedValue2 = undefined;

若是你定義了變量卻沒有賦值，JavaScript引擎會自動地幫你將變量初始化爲undefined值。

在Chrome控制檯查看變量undefinedValue1，它的值是undefined。
用typeof查看變量的類型：

判斷變量是否有值

若是變量已經定義了，但不知道變量是否有值，能夠經過=== undefined來判斷

var unassigndVar;
if(unassigndVar === undefined){
	// 邏輯處理
}else{
	// 邏輯處理
}

判斷變量是否存在

以下變量undeclaredVar未定義，則不能用 === undefined來判斷，不然瀏覽器會提示一個錯誤：
Uncaught ReferenceError: undeclaredVar is not defined

這時須要經過typeof來判斷變量是否存在

if (typeof undeclaredVar === 'undefined') {
	console.log('變量undeclaredVar未定義！');
} else {
	console.log('Hello!');
}

小技巧：判斷變量是否有值或判斷變量是否存在，均可以經過if (typeof (variable) !== "undefined")這種方式。

==和===操做符

在介紹Undefined類型時，咱們使用了===，它是「相等」操做符。
在JavaScript中，有兩種「相等」操做符，分別是==和===。

• ==操做符：用於比較兩個變量的值，它會忽視變量的類型。即便兩個變量的類型不一致，JavaScript引擎會先將兩個變量轉換成相同的類型。只要值相同，==操做符就會返回true。
• ===操做符：不只比較兩個變量的值，它還比較兩個變量的類型，只有類型和值都相同時才返回true。

咱們在控制檯中分別用這兩個操做符比較數字1和字符串"1"，JavaScript認爲1和"1"值是相等的，但類型是不相等的。

有「相等」就會有「不等」，JavaScript也提供了兩種「不等」比較符，!=是寬鬆比較符號，!==是嚴格比較符。

注意：NaN是一個特殊的存在，它和任何值都是不相等的，即便是它自己。

NaN == NaN; // false

PS：在這篇文章中我沒有介紹其餘比較符，好比>=、<=、&&、||等，由於它們和C#中相應的操做符的表現是一致的。

undefined和null的比較

undefined和null是兩個有意思的值，undefined表示」無「或」不存在「，null表示」空「。
從字面解釋來看，它們多少有些相近的意思，兩者也常常拿來做比較。

區別1：值相等類型不相等

先看一段代碼：

var x;
var y = null;

console.log(x == y);

變量x和y是不一樣類型的，在Chrome控制檯中輸出的結果卻爲true，是否是有點驚訝？

咱們能夠這麼認爲：null和undefined雖然類型不一樣，但持有相同的值。

在Chrome的控制檯中輸入如下兩行代碼：

null == undefined;
null === undefined;

獲得的結果以下：

區別2：和數字的運算

既然null和undefined的值是相同的，那麼它們在運算上有什麼區別呢？

說到運算，最多見的固然是數字的加減乘除預算，在Chrome控制檯中輸入如下兩行代碼：

1 + null;
1 + undefined;

1 + null獲得的是1，1 + undefined獲得的是NaN。

在JavaScript中，undefined和null參與運算時，有兩個約定：

• 運算表達式中包含undefined的，最終的結果都是NaN。
• 運算表達式中包含null的，在運行時被看成0。

這能意味着null和0的值是相等的嗎？不，null和0仍然是不相等的。

null和數字的加減乘除運算

注意：5 / null的結果爲Infinity，Infinity表示正的無窮大， 5 / 0的結果也是Infinity。

undefined和數字的加減乘除運算

undefined和null比較總結

1. undefined和null持有相同的值，undefined == null返回true
2. undefined和null的類型不一樣，undefined === null返回false
3. undefined和數字進行加減乘除運算，結果始終爲NaN
4. null和數字進行加減乘除運算，null會被看成0來運算

Number、Boolean和String的比較

前面已經比較了null和undefined這兩個特殊的存在，既然==操做符能比較值，那麼Number、Boolean和String的值，放在一塊兒比較時會有什麼表現呢？

Number和Boolean的比較

結論：用==操做符比較Number和Boolean類型時，只有數字1才和true相等。

Number和String的比較

有意思的是，65 == "0065"和3.14 == "3.14000"的結果是真。

結論：比較Number和String類型時，老是會將字符串先轉換成相應的數字，而後再作比較，只要數值相同結果就爲true。

Boolean和String的比較

"0001" == true、"1.0000" == true和"0" == false的結果爲真。

結論：比較Boolean和String類型，若是字符串不能轉換爲數字類型的，則結果爲false。若是可以轉換爲數字類型，老是先將字符串先轉換成相應的數字，而後再比較，只有1才和true相等。

基礎類型總結

到此咱們已經介紹完了JavaScript的基礎類型，咱們用一段代碼和三幅圖來總結本篇的內容

var intValue = 666;
var floatValue = 3.14;
var strValue = "Hello";
var boolValue = true;
var nullValue = null;
var unassignedValue;

變量類型

undefined和null的比較

Number、String和Boolean的==比較

null和undefined分別用於四則運算

引用和參考

1. 《Object-Oriented JavaScript 2nd Edition》

2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures