淺析JavaScript基本類型與引用類型
對于 JavaScript 類型，可以簡單地概括為：相對于強類型語言來說，它是弱（松散）類型的語言；有基本類型和引用類型，他們是區(qū)別是一個有固定空間存在于棧內(nèi)存中，一個沒有固定空間保存在堆內(nèi)存中并且在棧內(nèi)存中保存了一個指向?qū)崿F(xiàn)位置的指針。
市面上很多書都有不小的篇幅在講。這篇文章會講幾個方面，這些方面可能會需要你對 JavaScript 已經(jīng)有了一些簡單的了解，特別是 JavaScript 的類型。如果還不一解，可以隨手拿起一本關于 JavaScript 的書翻翻，再來看本文。
一、基本類型與引用類型
1.基本類型：Undefined / Null / Boolean / Number / String
2.引用類型：Object / Array / Function / Date / RegExp / Error / Map / Set …
為什么引用類型沒有枚舉完呢，因為這里面你了解這么多就夠了，至少在我講的這篇中這些已經(jīng)足夠。其他的可能很少會用到，甚至像 Map 、Set 這樣的也不是所有瀏覽器都支持。
二、JavaScript 類型的判斷
在 JavaScript 有兩個 operator 可以用以判斷類型。他們是 typeof 和 instanceof，不過圈子很小，它們混的可不是那么好，是出了名的不靠譜。少數(shù)情況也是對的，很多情況下是不靠譜的?？纯淳椭懒耍?/P>
// 靠譜的時候：
typeof 'sofish' // string
new String('sofish') instanceof String // true
// 不靠譜的時候：
typeof [] // object
typeof null // object
'sofish' instanceof String // false
呃～ 可能很多初學的 JavaScript 程序員會因此爆粗口。還大部分人在需要用 JS 的時候已經(jīng)有了 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 這個函數(shù)來幫我們搞定類型判斷了，并且這個簡單的函數(shù)有很好的兼容性，可以用到你的項目中去。情況如：
is('sofish', 'String') // true
is(null, 'Null') // true
is(new Set(), 'Set') // true
三、JavaScript 類型的轉(zhuǎn)換
在 JavaScript 中，變量（屬性）的類型是可以改變的。最常看到的是 String 與 Number 之間的轉(zhuǎn)換。如何把 1 + '2' 變成 12 呢？這里面有必要理解一下 + 號 operator，它是一個數(shù)學運算符，同時也是 JavaScript 中的字符串連字符。所以新手會經(jīng)常會看到一個有趣的現(xiàn)象，當使用 + 號的時候有時計算出來的不是想要的，而用 - 號卻總能得到「正確」的答案。
1 + '2' // '12'
1 + (+'2') // 3
1 - '2' // -1
這里面其實就是因為 + 的雙重角色導致的。在上面的代碼中，可以注意到第二條表達式在 String 前面運用了一個 + 號，強制把它的類轉(zhuǎn)換為 Number。而對于 JavaScript 的類型轉(zhuǎn)換理解，大多數(shù)情況下，只要理解 + 具有雙重角色就可以了。其他的可以理解類，類似都是可以用賦值/重載來修改的，甚至包括 Error：
var err = new Error();
console.log(err instanceof Error); // true
err = 'sofish';
console.log(err); // 'sofish'
四、JavaScript 引用類型
這一點是本文的一個難點。相于基本類型，引用可以為其添加屬性和方法；引用類似的值是一個引用，把一個引用類型的值賦給一個變量，他們所指向的是同一存儲在堆內(nèi)存中的值。變量（屬性）可以重載，但復制會是一件很有趣的事情，后面我們會詳細來說。
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. 引用類型值的操作
由于引用類型存儲在棧內(nèi)存中的是一個引用，那么當我們指向的同一個原始的值，對值的操作將會影響所有引用；這里有一個例是，重新賦值（并非對值的直接操作）會重新創(chuàng)建一個對象，并不會改變原始值。比如：
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 數(shù)組的復制
在 Array 對象中，存在 slice 方法返回一個截取的數(shù)組，在 ES5 中 filter 等也返回一個新的數(shù)組，那么我們可能利用這個方法來進行復制。
var arr = [1, 2, 3];
var sofish = arr.slice();
// 對新的數(shù)組進行操作并不會影響到原始數(shù)組
sofish.push('hello world');
console.log(arr); // [1, 2, 3]
3.2 對象的復制
在 Array 的復制中我們使用的是 slice 方法，實際上對于 Array 和 Object 中都可以利用 for ... in 循環(huán)來進行遍歷并賦值來進行復制。
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() 函數(shù)解決這個問題：
/* 復制對象
* @param: obj {JavaScript Object} 原始對象
* @param: isDeep {Boolean} 是否為深拷貝
* @return: {JavaScript Object} 返回一個新的對象
*/
function copy(obj, isDeep) {
var ret = obj.slice ? [] : {}, p, prop;
// 配合 is 函數(shù)使用
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) 函數(shù)來復制一個 Array 或者 Object ?？梢詼y試一下：
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'}]
到此。你基本上要了解的關于類型的比較難的點，應該是都基本了解了。當然，復制是最麻煩的一個點，除了經(jīng)常需要操作的 Array 和 Object 來說，還有 Date / Function / RegExp 的復制。
相關文章
本篇文章中，小編為大家介紹關于JS管理作用域的問題，有需要的朋友可以關注一下2013-04-04
這篇文章主要介紹了javascript self對象使用詳解的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了JavaScript的跨瀏覽器事件處理,以全瀏覽器兼容為大致目標,需要的朋友可以參考下2015-08-08
這篇文章主要詳細介紹了javascript操作符"!~"，最基本也最容易忽略的東西，混了幾年連基本都沒了，被人問到得貽笑大方。2015-02-02
javascript創(chuàng)建和存儲cookie示例
javascript創(chuàng)建和存儲cookie,cookie是存儲于訪問者的計算機中的變量,下面看一下使用示例吧2014-01-01
淺談checkbox的一些操作(實戰(zhàn)經(jīng)驗)
checkbox看起來很簡單，有時很頭疼，有什么難的，下面就為大家介紹下checkbox的一些操作，不了解的朋友不要錯過2013-11-11
JavaScript中的call方法和apply方法使用對比
這篇文章主要介紹了JavaScript中的call方法和apply方法使用對比,需要的朋友可以參考下2015-08-08
本文詳細講解了Javascript的作用域、作用域鏈以及閉包，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
到目前為止各瀏覽器的HTML標準或是JS標準都還未統(tǒng)一,但作為一個開發(fā)人員，還是有需要了解JS在瀏覽器中的差異2013-08-08
這篇文章主要介紹了用JavaScript實現(xiàn)頁面重定向功能的教程,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06