本篇適合javascript新手或者學(xué)了前端一段時(shí)間，對(duì)js概念不清晰的同學(xué)~~。

學(xué)習(xí)目的

本文針對(duì)javascript基礎(chǔ)薄弱的同學(xué)，可以加深對(duì)javascript的理解。

本文將講述以下幾點(diǎn)對(duì)于初學(xué)者開(kāi)說(shuō)javascript（有的是大部分語(yǔ)言都有的）的坑

講解內(nèi)容如下：

1. 連等

2. i++

3. 包裝對(duì)象

4. 引用類(lèi)型

5. && 與 ||

講解部分

1. 連等

小試牛刀

連等是常見(jiàn)的表達(dá)式，但是并不是所有情況都適合連等，連等只適用于字面量并不適用于引用類(lèi)型。

// 字面量連等得到想要的結(jié)果
var a,b;
a = b = 2;
a // 2
b // 2
// 引用類(lèi)型連等不可預(yù)測(cè)
var arr1, arr2;
arr1 = arr2 = []
arr1[0] = 10
arr2[0] // 10
//引用類(lèi)型連等使得兩個(gè)引用指向一個(gè)對(duì)象，操作其中一個(gè)，兩個(gè)值都變

以上代碼是常見(jiàn)的連等，有時(shí)候我們需要兩個(gè)變量同賦值為一個(gè)值，我們就這樣來(lái)操作，但是，如果是引用類(lèi)型可不能連等賦值哦。

此外，連等賦值會(huì)有一個(gè)很大的漏洞，就是會(huì)將變量泄露到全局中去，上面代碼我們沒(méi)有將其泄露，但看下面代碼：

function fn (num) {
 var a = b = num;
 a // num
 b // num
}
fn(10)
a // 報(bào)錯(cuò)
b // 10
// 我們并不沒(méi)有定義全局變量b

可以看到，我們執(zhí)行了fn函數(shù)后，全局作用域中出現(xiàn)了b變量，這是為什么?看 var a = b = num這句話，這句話可以分成兩句來(lái)看

var a
a = b = num
//只聲明了a

我們其實(shí)只聲明了a變量，連等的b并沒(méi)有聲明，由此可以知道，b被掛在了全局的window對(duì)象上，造成了變量泄露到了全局。

初出茅廬

上面只是簡(jiǎn)單的例子，接下來(lái)我們看一個(gè)復(fù)雜點(diǎn)的例子

var a = {x: 1}
var b = a
a.x = a = {y: 1}
a.x // undefined
b.x // {y: 1}

這個(gè)例子是在一個(gè)測(cè)試題中看到的，乍一看，好像不明覺(jué)厲，但是一點(diǎn)都不難理解。

1. a 和 b是引用了類(lèi)型，同指向了一個(gè)對(duì)象 {x: 1}

2. a.x 引用了原對(duì)象的x屬性， a 則為一個(gè)引用變量

3. a  = {y: 1}  只是將a這個(gè)引用變量的指針指向了另一個(gè)對(duì)象{y: 1}

4. a.x = a，前者還是代表著原來(lái)的對(duì)象的x屬性，也就是b引用的對(duì)象的x屬性

5. 賦值完畢。

可能你還沒(méi)有理解，不要急，下面我們將解剖javascript引擎讓你懂的明明白白

庖丁解牛

引擎的工作原理： 引擎在解析javascript表達(dá)式時(shí)，會(huì)進(jìn)行LHS查詢(xún), RHS查詢(xún)（詳見(jiàn)《你不知道的javascript》），我將它們理解為L(zhǎng)HS（賦值）,RHS（查找）。

下面，就上面例子，我們來(lái)演示一下引擎的工作流程

var a = {x: 1}
// 引擎：我將要對(duì)a變量LHS（賦值），內(nèi)容是{x: 1}
// 作用域： 剛聲明了a變量，給你。
var b = a
// 引擎： 我將要對(duì)a變量RHS（查找）
// 作用域： 你剛剛給它LHS了，給你吧
// 引擎： 我將要對(duì)b變量LHS（賦值），內(nèi)容為a變量指向的對(duì)象
// 作用域：剛聲明了b變量，給你。
a.x = a = {y: 1}
// 引擎：我將要對(duì)a進(jìn)行LHS(賦值)，內(nèi)容是另一個(gè)對(duì)象{y：1}
// 作用域：可以，給你，但好像還有其他命令，先不要賦值。
// 引擎： 是的，下一步我還需要對(duì)a.x 進(jìn)行LHS（賦值），內(nèi)容是將要改變的a變量
// 作用域： 可以，a變量指向的對(duì)象有x屬性，不過(guò)馬上a就改變了，不過(guò)沒(méi)關(guān)系，b變量也指向那個(gè)對(duì)象，賦值完后，你可以用b變量引用舊對(duì)象。
// 引擎：了解了，我先把a(bǔ)變量賦值為一個(gè)新的對(duì)象，然后把原來(lái)的a變量指向的對(duì)象的x屬性賦值為 新a。
a.x // undefined
// 引擎： 我需要拿到a變量指向的對(duì)象的x屬性
// 作用域： 你剛剛改變了a的指向，現(xiàn)在的a指向的對(duì)象已經(jīng)沒(méi)有x屬性了
b.x // {y: 1}
// 引擎： 我需要拿到b變量指向的對(duì)象的x屬性
// 作用域： 你是想拿到你舊對(duì)象的x屬性吧，給你，不過(guò)已經(jīng)被你在之前改變了值，現(xiàn)在b.x的值就是a指向的新對(duì)象的值。

以上是我的理解，沒(méi)有權(quán)威認(rèn)證。想詳細(xì)了解執(zhí)行過(guò)程，請(qǐng)參考《你不知道的javascript》，如果本節(jié)有誤，請(qǐng)指出。

2. ++操作符

大家最很常用 ++ 操作符，其實(shí)也沒(méi)什么很大奇特之處，但是對(duì)于新手入門(mén)的你是否真正了解他。

var a = 1;
var b = a++
a // 2
b // 1
var c = 1;
var d = ++ c;
c // 2
d // 2

前++和后++，一個(gè)是返回表達(dá)式自增后一個(gè)是返回表達(dá)式自增前的值。我們可以把兩個(gè)進(jìn)行分解，看一下過(guò)程。

b = a++
// 等價(jià)于 ...
b = a
a = a + 1
//.........................
b = ++ a
// 等價(jià)于 ...
a = a + 1
b = a

只是一個(gè)運(yùn)算順序問(wèn)題，這個(gè)可能好理解，但是也有一個(gè)坑，如下。

前幾天一個(gè)人問(wèn)： 1++ 等于幾？答： 2

估計(jì)很多人第一反應(yīng)就是2，但是這大錯(cuò)特錯(cuò)！那為什么不等于2呢，其實(shí) 1++是報(bào)錯(cuò)了，并不是合法的表達(dá)式，原因如下：

1 ++
// 等價(jià)于
1 = 1 + 1
// 引擎對(duì) 1 進(jìn)行LHS（賦值），作用域發(fā)現(xiàn)他是非法變量，所以會(huì)報(bào)錯(cuò) 左值無(wú)效。

3. 包裝對(duì)象

我們?cè)谟米址@取長(zhǎng)度、使用方法截取等行為時(shí)，你有沒(méi)有想過(guò)： 字面值只是個(gè)值，為什么他會(huì)有方法屬性，不是應(yīng)該對(duì)象才有的嗎？的確是對(duì)象才有的，但是在執(zhí)行表達(dá)式時(shí)，產(chǎn)生了包裝對(duì)象。也許你看過(guò)了此知識(shí)點(diǎn)，可以跳過(guò)。

var str = 'hello'
str.length // 5
str.aaa = 5
str.aaa // undefined

我們定義一個(gè)str字符串，獲取長(zhǎng)度為5，但是我們自己加一個(gè)屬性aaa缺獲取不到，這需要用包裝對(duì)象的聲明周期來(lái)解答：包裝對(duì)象的聲明周期只存在于一個(gè)表達(dá)式內(nèi)

var str = 'hello'
str.length
// 等價(jià)于
new String(str).length
str.aaa = 5
//等價(jià)于
new String(str).aaa = 5
str.aaa
// 等價(jià)于
new String(str).aaa

也就是說(shuō)，每一次用到str屬性時(shí)，都是先包裝成String對(duì)象，操作完后，對(duì)象釋放，可見(jiàn)，以上兩次str.aaa是不同的對(duì)象，所以第二次獲取aaa屬性當(dāng)然沒(méi)有了。不了解可以百度一下js包裝對(duì)象，有詳細(xì)的解答。

4. 引用類(lèi)型

大部分語(yǔ)言都有引用類(lèi)型，其實(shí)就是對(duì)象變量。c語(yǔ)言中，我們將引用類(lèi)型理解為指針，這個(gè)指針是動(dòng)態(tài)指向一塊內(nèi)存，通過(guò)代碼的變化，指針的指向會(huì)隨之改變。js也一樣。

在我們書(shū)寫(xiě)代碼中，一定要記住引用類(lèi)型變量和字面值變量的 區(qū)別，他們分別有不同的用處。

var global = new Object()
function setColor (obj) {
 obj.color = 'blue'
 obj = new Object()
 obj.color = 'red'
}
setColor(global)
global.color // blue

這是《javascript高級(jí)程序設(shè)計(jì)》里面的一個(gè)例子，我們傳遞一個(gè)對(duì)象global到setColor函數(shù)里，在內(nèi)部進(jìn)行了如上操作，我們打印出global.color是blue，為什么不是red？這里就是引用類(lèi)型的結(jié)果。

1. global變量是引用類(lèi)型，他指向一個(gè)對(duì)象,

2. 傳遞到setColor函數(shù)中，obj就引用了global指向的對(duì)象（下面稱(chēng)為globalObj）

3. 給globalObj賦值一個(gè)color屬性為blue字符串，這時(shí)global.color是blue了

4. 將obj指向另一個(gè)新對(duì)象localObj，使得obj與global斷開(kāi)連接。

5. 將localObj.color賦值為‘red'

可以看出，我們并沒(méi)有對(duì)global對(duì)象的color進(jìn)行'red'賦值，'red'賦值給了另一個(gè)對(duì)象的color屬性。

結(jié)論：引用類(lèi)型傳遞是將兩個(gè)變量指向同一個(gè)對(duì)象，而字面量的傳遞僅僅是值的賦值傳遞。我們可以將引用類(lèi)型傳遞到函數(shù)進(jìn)行改變，不可以在函數(shù)內(nèi)改變傳遞進(jìn)來(lái)的字面值。

5. && 與 ||

兩者的基本運(yùn)用相信大家都了解，大部分用來(lái)if判斷，如：

var a = 2;
var b = false
if (a && b) {

 alert('best')
}
if (a || b) {
 alret('good')  // 運(yùn)行
}

他們的用法不局限于判斷 左右兩邊的 && 和 || 關(guān)系，還可以用來(lái)提供代碼的質(zhì)量

var obj = {}
if (obj.info.user === 'xu') { // terrible
 // ..
}
if (obj.info && obj.info.user === 'xu' ) { // good
 // ... 
}

如果僅僅判斷obj.info.user 會(huì)報(bào)錯(cuò)造成程序終止，但是下面那樣判斷就大使得代碼健壯，不會(huì)那么容易崩潰。

重點(diǎn)： && 和 || 并不會(huì)返回true和false，他會(huì)返回終止此表達(dá)式的那個(gè)變量值。

true && 6 // 6
NaN && false // NaN
'0' || 6 // '0'
false || true // true
false || 0 && 1 // 0
false || 1 && 0 // 0

&&和||， &&優(yōu)先級(jí)大于||。

&&操作符，如果左邊為假，返回左邊值，否則，始終返回右邊值

||操作符，如果左邊為真，返回左邊值， 否則，始終返回右邊值。

結(jié)尾

javascript基礎(chǔ)本章簡(jiǎn)單的介紹在這里，內(nèi)容并不全面，還請(qǐng)多多見(jiàn)諒。如有錯(cuò)誤，請(qǐng)指出。。。。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論