重學Javascript之引用類型

注意： 本文章爲 《重學js之JavaScript高級程序設計》系列第五章【JavaScript引用類型】。 關於《重學js之JavaScript高級程序設計》是從新回顧js基礎的學習。

引用類型的值（對象）是引用類型的一個實例。在ES中，引用類型是一種數據結構，用於將數據和功能組織在一塊兒，也被稱之爲類。但這並不穩當，引用類型有時候也被稱爲對象定義，由於它們描述的是一類對象所具備的屬性和方法。

對象是某個特定引用類型的實例。新對象是使用 new 操做符跟一個 構造函數來建立的。構造函數自己就是一個函數，只不過該函數是出於建立新對象的目的而定義的，以下：

var person = new Object();
複製代碼

上面這行代碼建立了 Object 引用類型的一個新實例，而後把該實例保存在變量person中。使用的構造函數是 Object ，它只爲新對象定義了默認的屬性和方法。

一、object類型

建立object實例的方式有兩種。第一種使用new操做符後跟object函數，第二種使用對象字面量表示法，對象字面量是對象定義的一種簡寫形式。

// 第一種方法

var person = new Object()
person.name = 'nice'
person.age = 20

// 第二種方法

var p = {
    name : 'nice',
    age: 29
}
複製代碼

咱們能夠經過兩種方式來訪問對象的屬性

p.name = nice
p['name'] = nice
複製代碼

二、Array類型

在ES 中數組的每一項能夠保存任何類型的數據，也就是說，能夠用數組的第一個位置來保存字符串，第二個位置來保存數值，第三個位置保存對象。另外數組的大小是能夠動態調整的，能夠隨着數據的添加自動增加以容納新的數據。

建立數組的兩種方式

1. 使用Array構造函數

var c = new Array()     // 初始值是  undefined
var b = new Array(20)   // 建立一個包含20個元素的數組
var a = new Array('a', 'b')     // 包含 a b 兩個元素的數組
複製代碼

2. 使用數組字面量表示法

var a = [1,2,3]  // 包含3個數字的數組
var n = []      // 一個空數組
var v = ['a', 'c']  // 兩個字符串的數組
複製代碼

3. 讀取數組的值

a[0]    // 1  方括號中的值就是數組的索引。返回數組對應的值
a[4]    // 若是值超過了數組的長度，則會增長到該索引值加1的長度  
n[2]    // [undefined, undefined]
複製代碼

注意： 數組的length不是制度的，能夠經過設置這個屬性來往數組中增長刪除項。數組的最後一項的索引 永遠是 length -1,所以下一項的位置就是length。另外數組最多能夠包含 4294967295個項，

2.1 轉換方法

在以前的描述中，全部的對象都具備 toLocaleString()、toString() 和 value() 方法，其中調用數組的 toString()和 valueOf() 方法會返回相同的值，即由數組中每一個值的字符串形式拼接而成以逗號分隔的字符串。以下：

var a = ['a', 'b', 'c'];
a.toString()    // a,b,c
a.valueOf()     // a,b,c
複製代碼

數組繼承的 toLocaleString()、toString()、valueOf 方法 在默認狀況下都會以逗號分隔的字符串形式返回數組項。若是使用 ‘join’ 方法，則可使用指定的分隔符來構建這個字符串。它只接受一個參數，用做分隔符的字符串，返回包含全部數組項的字符串。以下

var c = ['a', 'b', 'c']
c.join(',')     // a,b,c
c.join('/')     // a/b/c
複製代碼

注意： 數組中的某一項的值是null 或者 undefined，那麼該值在join()、toLocaleString()、toString()、valueOf()方法返回的字符串中以空表示

2.2 棧方法

在 ES 中 爲數組也提供了一個讓數組的行爲相似於其餘數據結構的方法，就是說數組能夠表現的像棧同樣呢，能夠限制插入和刪除的數據結構。 棧的特性就是 後進先出 ，最新添加的項最先被刪除。棧中項的插入 和 移除只發生在棧的頂部。ES 爲數組提供了 pop() 和 push() 方法

push() 是插入項，每次添加在數組的末尾，能夠插入任意參數

let a = [1,2]
a.push(3)   // [1,2,3]

pop() 刪除數組的最後一項

a.pop() //  [1,2]
複製代碼

2.3 隊列方法

棧數據結構是遵循 先進後出 ，而隊列數據結構的訪問規則 是 先進先出。隊列的末端添加項，從列表的前端移除項。因爲 push() 是想數組末端添加項的方法，若是要獲取數組的首端項， 則 須要 shift() 方法。同時還有 unshift() 方法，在數組的最前端添加。

let a = [1,2]
a.shift()   //  1   a => [2]

a.unshift(3)    // a => [3,2]
複製代碼

2.4 重排序方法

數組中能夠用 reverse() 和 sort() 對數組進行排序，其中 reverse() 是對數組反轉。sort() 默認是對數組升序排列，可是也能夠由條件進行控制。

let a = [1,2,3,4]
a.reverse() // a => [4,3,2,1]

let a = [1,3,5,2,7]
a.sort()    // a => [1,2,3,5,7]
複製代碼

2.5 操做方法

ES 爲數組提供了不少方法， concat() 是基於當前數組建立一個新數組。

規則：

1. 默認建立當前數組的副本，而後將接受到的參數添加到這個副本的末尾，返回新建的數組
2. 沒有傳遞參數，就複製當前的數組並返回
3. 傳遞了一個或多個數組，則將這些數組的每一項添加到結果數組中。若是傳遞的值不是數組，則會將值添加到數組末尾

slice() 基於當前數組中的一個或多個項建立新數組。接受 一到兩個參數，即返回數組的開始和結束位置。若是隻有一個參數，則返回的是起始位置到數組結束位置的全部值。它不會影響原數組。另外若是是兩個參數，它返回的是第一個值到最後一個值前一個之間的值。

let a = [1,2,3,4,5,6,7,8]

a.slice(2,4)    // [3, 4]
複製代碼

splice() 用來 刪除、插入、替換數組的值。

1. 刪除 能夠刪除任意數量的項，只須要指定2個參數，要刪除的第一個位置 和 要刪除的數量。 splice(0,2) 刪除數組的前兩個
2. 插入 能夠向指定位置插入任意數量的項，須要提供3個參數。 起始位置、0、要插入的項。splice(2,0,'a') 從數組的 第二個項插入 'a'
3. 替換 能夠向指定位置插入任意數量的項，同時刪除任意數量的項。須要三個參數：起始位置、要刪除的項數、要插入的任意數量。插入的數量沒必要與刪除的項數相等。

3. Date 類型

建立一個日期對象 var now = new Date() 能夠 經過 Date.parse() 和 Date.UTC() 來獲取特定的日期和時間對象

Date.parse() 接受一個表示日期的字符串參數。
Date.UTC() 返回表示日期的毫秒數
複製代碼

3.1 繼承的方法

跟其餘類型同樣，Date類型也重寫了 toLocaleString()、toString() 和 valueOf()方法。在不一樣瀏覽器，不一樣時區，toLocalString() 返回值不一樣。

3.2 日期的格式方式

Date類型爲日期格式化爲字符串提供了以下方法：

• toDateString() 以特定於實現的格式顯示星期幾、月、日和年
• toTimeString() 以特定於實現的格式顯示時、分、秒和時區
• toLocaleDateString() 以特定於地區的格式顯示星期幾、月、日和年
• toLocaleTimeString() 以特定於實現的格式顯示時、分、秒
• toUTCString() 以特定於實現的格式完整的UTC時間

4. RegExp類型

經過RegExp 類型支持正則表達式

g 表示全局模式，即模式被應用於全部字符串，而非發現的第一個匹配項時當即中止

i 表示不區分大小寫模式，即在肯定匹配項時忽略模式與字符串的大小寫

m 表示多行模式，即在到達一行文本末尾時還會繼續查找下一行中是否存在與模式匹配的項

5. Function類型

每個函數都是Function類型的實例，並且都與其餘引用類型同樣具備屬性和方法。因爲函數是對象，所以函數名實際上也時一個指向函數對象的指針，不會與某個函數綁定，函數一般是使用函數聲明語法定義的。以下：

function a (b,c){
    return b + c
}

// 函數表達式聲明

var s  = function(a,b){
    return a + b
}
複製代碼

5.1 沒有重載

若是命名兩個相同 function 那麼後一個將會覆蓋前一個

function a(b) {
    retrun b + 100
}

function a(b){
    return b + 200
}

a(100)  // 300
複製代碼

5.2 函數表達式和函數聲明

在執行環境中加載數據的時候，對於函數表達式和函數聲明，解析器優先讀取函數聲明，並使其在執行任何代碼以前可用，至於函數表達式，則必須等到解析器執行到它所在的代碼行，纔會真正的被執行。

5.3 做爲值的函數

由於ES 中的函數名自己就是變量，因此函數也能夠做爲值來使用，也就是說，不只能夠像傳遞參數同樣把一個函數 傳遞給另一個函數，並且能夠將一個函數做爲另一個函數的結果返回。

5.4 函數內部屬性

在函數內部，有兩個特殊的對象：arguments 和 this。其中，arguments 是一個類數組對象，包含着傳入函數中的全部參數，雖然 arguments 的主要用途是保存函數參數，可是這個對象還有一個名叫 callee 的屬性，該屬性是一個指針，指向擁有這個 arguments對象的函數。

this 引用的是函數據以執行操做的對象，或者說 this 是函數在執行時所處做用域，若是是全局 this 指向 window

注意： 函數的名字僅僅是一個包含指針的變量而已。

5.4 函數屬性和方法

ES 中函數是對象，所以函數也有屬性和方法，每一個函數都包含兩個屬性：length 和 prototype。其中length 表示 函數但願接收的命名參數的個數。

prototype 是保存它們全部實例方法的真正所在，換句話說，諸如 toString() 和 valueOf() 等方法實際上保存在prototype名下。只不過經過各自對象的實例訪問。

每一個函數都包含兩個非繼承而來的方法： apply() 和 call()。這兩個方法的用途都是特定的做用域中調用函數，實際上等於設置函數內 this 對象的值。

apply()

接受兩個參數：一個是其運行函數的做用域，另外一個是參數數組。
其中第二個參數能夠是 Array 的實例也能夠是 arguments對象。 

call()

和 apply() 的做用相同，只是接受參數的方式不一樣，第一個參數同
apply(), 第二個參數是一個參數列表而不是數組。
複製代碼

6. 基本包裝類型

爲了便於操做基本類型值，ES 還提供了3個特殊的引用類型： Boolean、Number 和 String。

6.1 Boolean 類型

Boolean 類型是布爾值對應的引用類型。要建立Boolean對象，能夠像下面這樣調用Boolean構造函數並傳入 true 或 false 值。

let a = new Boolean(true)
複製代碼

注意： 基本類型與引用類型的布爾值還有兩個區別，首先，typeof操做符對基本類型返回「boolean」,而對引用類型返回「object」。其次，因爲Boolean對象是Boolean類型的實例，因此使用 instanceof操做符 測試 Boolean 對象會返回 true，而測試基本類型的布爾值則返回 false。

6.2 Number 類型

Number 是數字值對應的引用類型。要建立Number對象，能夠在調用Number構造函數是向其中傳遞相應的數值。以下：

let n = new Number(10)
複製代碼

Number 提供了 toFixed() 方法，來格式化爲字符串

在使用 typeof操做符測試基本類型數值時，始終返回 number ，而在測試 Number 對象時，則返回 object。Number 對象是 Number 類型的實例。而基本類型的數值則不是。

6.3 String 類型

String 類型是字符串的對象包裝類型，以下：

let s = new String('zifuchuan')
複製代碼

1. 字符方法

charAt() // 接收一個參數，基於0的字符位置。以單字符串的形式返回給定位置的哪一個字符。

let s = 'abc'

a.charAt(1) // a

charCodeAt()    // 也是接受一個參數，可是返回的是字符串的編碼

a.charCodeAt()  // 97
複製代碼

2. 字符串操做方法

concat()    // 接受任意字符串，將字符串進行拼接
slice()     // 截取字符串 從第一個參數 到第二個參數結束，如沒有第二個參數則到最後一位
substring() // 同上
substr()    // 同上
複製代碼

3. 字符串的位置方法

indexOf()   // 都是從第一個字符串中搜索給定的子字符串
lastIndexOf()
複製代碼

4. 字符串大小寫轉換

toLocaleUpperCase()     // 轉爲大寫
toUpperCase()   //  同上
toLocaleLowerCase()     // 轉爲小寫
toLowerCase()   // 同上
複製代碼

5. 字符串的模式匹配方法

match() // 接受一個參數，要麼爲正則表達式，要麼爲RegExp 對象。
複製代碼

6. localeCompare() 方法

比較兩個字符串，返回以下：
    
    - 若是字符串在字母表中應該排在字符串參數以前，則返回負數
    - 若是字符串等於字符串參數，返回0，
    - 若是字符串在字母表中排在字符串參數以後，返回一個正數。
複製代碼

7. 內置對象

不依賴於宿主環境的對象，這些對象在ES程序執行以前就已經存在了。即沒必要顯式地實例化內置對象。

7.1 Global對象

不屬於任何其餘對象的屬性和方法，最終都是它的屬性和方法。沒有全局變量或全局函數，全部在全局做用域中定義的屬性和函數，都是Global對象的屬性。

7.2 Math對象

ES中爲了保存數學公式和信息提供了一個公共位置，即Math對象。

8. 總結

• 引用類型與傳統面向對象程序設計中的類類似，但實現不一樣
• Object 是一個基礎類型，其餘全部類型都從Object繼承了基本的行爲。
• Array 類型是一組值的有序列表，同時還提供了操做和轉換這些值的功能
• Date 類型提供了有關日期和時間信息，包括當前日期和時間以及相關的計算功能
• RegExp 類型是ES 支持正則表達式的一個接口，提供了基本的和一些高級的正則表達式功能。
• 函數其實是 Function 類型的實例，所以函數也是對象，而這一點正是 Javascript 最有特點的地方。因爲函數也是對象，全部函數也擁有方法。
• 每一個包裝類型都映射到同名的基本類型
• 在讀取模式下訪問基本類型值時，就會建立對應的基本包裝類型的一個對象，從而方便了數據操做。
• 操做基本類型值的語句一經執行完畢，就會當即銷燬新建立的包裝類型
• 在全部代碼執行以前，做用域中就已經存在兩個內置對象 Global 和 Math.

歡迎關注 公衆號【小夭同窗】

重學js系列

重學js之JavaScript簡介

重學 JS 之在 HTML 中使用 JavaScript

重學js之JavaScript基本概念（上）=> 數據類型

重學js之JavaScript基本概念（中）=> 操做符

重學js之JavaScript基本概念（下）=> 運算符

重學js之JavaScript變量、做用域和內存問題

ES6入門系列

ES6入門之let、cont

ES6入門之變量的解構賦值

ES6入門之字符串的擴展

ES6入門之正則的擴展

ES6入門之數值的擴展

ES6入門之函數的擴展

ES6入門之數組的擴展

ES6入門之對象的擴展

ES6入門之Symbol

Git教程

前端Git基礎教程