淺析JavaScript基本類型與引用類型

2019-11-20 15:03:54

字體：大中小

來源：轉載

供稿：網友

對于 JavaScript 類型，可以簡單地概括為：相對于強類型語言來說，它是弱（松散）類型的語言；有基本類型和引用類型，他們是區別是一個有固定空間存在于棧內存中，一個沒有固定空間保存在堆內存中并且在棧內存中保存了一個指向實現位置的指針。

市面上很多書都有不小的篇幅在講。這篇文章會講幾個方面，這些方面可能會需要你對 JavaScript 已經有了一些簡單的了解，特別是 JavaScript 的類型。如果還不一解，可以隨手拿起一本關于 JavaScript 的書翻翻，再來看本文。

一、基本類型與引用類型

1.基本類型：Undefined / Null / Boolean / Number / String
2.引用類型：Object / Array / Function / Date / RegExp / Error / Map / Set …

為什么引用類型沒有枚舉完呢，因為這里面你了解這么多就夠了，至少在我講的這篇中這些已經足夠。其他的可能很少會用到，甚至像 Map 、Set 這樣的也不是所有瀏覽器都支持。

二、JavaScript 類型的判斷

在 JavaScript 有兩個 operator 可以用以判斷類型。他們是 typeof 和 instanceof，不過圈子很小，它們混的可不是那么好，是出了名的不靠譜。少數情況也是對的，很多情況下是不靠譜的。看看就知道了：

復制代碼代碼如下:

// 靠譜的時候：
typeof 'sofish' // string
new String('sofish') instanceof String // true

// 不靠譜的時候：
typeof [] // object
typeof null // object
'sofish' instanceof String // false

呃～可能很多初學的 JavaScript 程序員會因此爆粗口。還大部分人在需要用 JS 的時候已經有了 jQuery 等這樣的庫，他們都做了封裝，讓你可以方便地檢測類型。當然，事實上要檢測也不麻煩，因為那句「在 JavaScript 中，一切都是對象」，當然像很多文檔中說到的，undefined 其實和 NaN, Infinity 都只是一個全局屬性。你大概知道就可以了。但「對象」可以幫到我們：

復制代碼代碼如下:

/* 檢測對象類型
 * @param: obj {JavaScript Object}
 * @param: type {String} 以大寫開頭的 JS 類型名
 * @return: {Boolean}
 */
function is(obj, type)  {
  return Object.prototype.toString.call(obj).slice(8, -1) === type;
}

這樣的話，我們就可以利用 is 這個函數來幫我們搞定類型判斷了，并且這個簡單的函數有很好的兼容性，可以用到你的項目中去。情況如：

復制代碼代碼如下:

is('sofish', 'String') // true
is(null, 'Null') // true
is(new Set(), 'Set') // true

三、JavaScript 類型的轉換

在 JavaScript 中，變量（屬性）的類型是可以改變的。最常看到的是 String 與 Number 之間的轉換。如何把 1 + '2' 變成 12 呢？這里面有必要理解一下 + 號 operator，它是一個數學運算符，同時也是 JavaScript 中的字符串連字符。所以新手會經常會看到一個有趣的現象，當使用 + 號的時候有時計算出來的不是想要的，而用 - 號卻總能得到「正確」的答案。

復制代碼代碼如下:

+ '2' // '12'
+ (+'2') // 3
- '2' // -1

這里面其實就是因為 + 的雙重角色導致的。在上面的代碼中，可以注意到第二條表達式在 String 前面運用了一個 + 號，強制把它的類轉換為 Number。而對于 JavaScript 的類型轉換理解，大多數情況下，只要理解 + 具有雙重角色就可以了。其他的可以理解類，類似都是可以用賦值/重載來修改的，甚至包括 Error：

復制代碼代碼如下:

var err = new Error();
console.log(err instanceof Error); // true

err = 'sofish';
console.log(err); // 'sofish'

四、JavaScript 引用類型

這一點是本文的一個難點。相于基本類型，引用可以為其添加屬性和方法；引用類似的值是一個引用，把一個引用類型的值賦給一個變量，他們所指向的是同一存儲在堆內存中的值。變量（屬性）可以重載，但復制會是一件很有趣的事情，后面我們會詳細來說。

1. 添加屬性和方法

下面的代碼我們將會看到，假設我們對一個基本類似賦值，它并不會報錯，但在獲取的時候卻是失效的：

復制代碼代碼如下:

var arr = [1,2,3];
arr.hello = 'world';
console.log(arr.hello); // 'world'

var str = 'sofish';
str.hello = 'world';
console.log(str.hello); // undefined

2. 引用類型值的操作

由于引用類型存儲在棧內存中的是一個引用，那么當我們指向的同一個原始的值，對值的操作將會影響所有引用；這里有一個例是，重新賦值（并非對值的直接操作）會重新創建一個對象，并不會改變原始值。比如：

復制代碼代碼如下:

var arr = [1,2,3], sofish = arr;
sofish.push('hello world');
console.log(arr); // [1, 2, 3, 'hello world']

// 非相同類型
sofish = ['not a fish']; // 當 sofish 類似改變時，不會改變原始值
console.log(arr);// [1, 2, 3, 'hello world']

3. 引用類型值的復制

對原始值的操作會影響所有引用，而這不一定是我們想要的，有時候我們需要復制一個全新的對象，操作的時候不影響其他引用。而一般情況也，像 Date / Function / RegExp … 都很少有具體的操作，主要是像 Array 和 Object 會有添加項、屬性等操作。所以我們主要需要理解的是如何復制 Array 和 Object 對象。

3.1 數組的復制

在 Array 對象中，存在 slice 方法返回一個截取的數組，在 ES5 中 filter 等也返回一個新的數組，那么我們可能利用這個方法來進行復制。

復制代碼代碼如下:

var arr = [1, 2, 3];
var sofish = arr.slice();

// 對新的數組進行操作并不會影響到原始數組
sofish.push('hello world');
console.log(arr); // [1, 2, 3]

3.2 對象的復制

在 Array 的復制中我們使用的是 slice 方法，實際上對于 Array 和 Object 中都可以利用 for ... in 循環來進行遍歷并賦值來進行復制。

復制代碼代碼如下:

var obj = { name: 'sofish' }, sofish = {}, p;
for (p in obj) sofish[p] = obj[p];

// 對新的對象操作并不會影響原始值
sofish.say = function() {};
console.log(obj); // { name: 'sofish' }

3.3 Shadow / Deep Copy

像上面的操作，就是我們常說的淺拷貝（Shadow Copy）。不過在 Array 和 Object 都可以有多層（維），像這樣的拷貝只考慮到最上面一層的值，在可能存在的值中的 Array 和 Object 都還是指向了原始對象。比如：

復制代碼代碼如下:

var arr = [1, { bio: 'not a fish' } ], sofish = [], p;
for(p in arr) {
sofish[p] = arr[p];
}

// 對 `sofish` 中包含的對象 `cat` 的操作會影響原始值
sofish[1].bio = 'hackable';
console.log(arr);// [1, cat: { bio: 'hackable' } ]

那么如何做呢？來一個 copy() 函數解決這個問題：

復制代碼代碼如下:

/* 復制對象
 * @param: obj {JavaScript Object} 原始對象
 * @param: isDeep {Boolean} 是否為深拷貝
 * @return: {JavaScript Object} 返回一個新的對象
 */
function copy(obj, isDeep) {
  var ret = obj.slice ? [] : {}, p, prop;
  // 配合 is 函數使用
  if(!isDeep && is(obj, 'Array')) return obj.slice();
  for(p in obj) {
    if(!obj.hasOwnProperty(p)) continue;
    prop = obj[p];
    ret[p] = (is(prop, 'Object') || is(prop, 'Array')) ? 
      copy(prop, isDeep) : prop;
  }
  return ret;
}

這樣，我們就可以通過 copy(obj, isDeep) 函數來復制一個 Array 或者 Object 。可以測試一下：

復制代碼代碼如下:

var arr = [1, {bio: 'not a fish'}];
var sofish = copy(arr);

// 淺拷貝對于第一層的操作不影響原始值，但影響第二層
sofish.push('cat');
console.log(arr); // [1, {bio: 'not a fish'}]
sofish[1].bio = 'hello world';
console.log(arr) // [1, {bio: 'hello world'}]

// 深拷貝則不會影響原始值
sofish = copy(arr, 1);
sofish[1].bio = 'foo or bar';
console.log(arr); // [1, {bio: 'hello world'}]

到此。你基本上要了解的關于類型的比較難的點，應該是都基本了解了。當然，復制是最麻煩的一個點，除了經常需要操作的 Array 和 Object 來說，還有 Date / Function / RegExp 的復制。

上一篇：用html5 js實現點擊一個按鈕達到瀏覽器全屏效果

下一篇：最短的IE判斷var ie=!-[1,]分析