javascript基礎知識講解，javascript基礎知識

javascript基礎知識講解，javascript基礎知識

本篇適合javascript新手或者學了前端一段時間，對js概念不清晰的同學~~。

學習目的

本文針對javascript基礎薄弱的同學，可以加深對javascript的理解。

本文將講述以下幾點對於初學者開說javascript（有的是大部分語言都有的）的坑

講解內容如下：

1. 連等

2. i++

3. 封裝對象

4. 參考型別

5. && 與 ||

講解部分

1. 連等

小試牛刀

連等是常見的運算式，但是並不是所有情況都適合連等，連等只適用於字面量並不適用於參考型別。

// 字面量連等得到想要的結果var a,b;a = b = 2;a // 2b // 2// 參考型別連等不可預測var arr1, arr2;arr1 = arr2 = []arr1[0] = 10arr2[0] // 10//參考型別連等使得兩個引用指向一個對象，操作其中一個，兩個值都變

以上代碼是常見的連等，有時候我們需要兩個變數同賦值為一個值，我們就這樣來操作，但是，如果是參考型別可不能連等賦值哦。

此外，連等賦值會有一個很大的漏洞，就是會將變數泄露到全域中去，上面代碼我們沒有將其泄露，但看下面代碼：

function fn (num) { var a = b = num; a // num b // num}fn(10)a // 報錯b // 10// 我們並不沒有定義全域變數b

可以看到，我們執行了fn函數後，全域範圍中出現了b變數，這是為什麼?看 var a = b = num這句話，這句話可以分成兩句來看

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

我們其實只聲明了a變數，連等的b並沒有聲明，由此可以知道，b被掛在了全域的window對象上，造成了變數泄露到了全域。

初出茅廬

上面只是簡單的例子，接下來我們看一個複雜點的例子

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

這個例子是在一個測試題中看到的，乍一看，好像不明覺厲，但是一點都不難理解。

1. a 和 b是引用了類型，同指向了一個對象 {x: 1}

2. a.x 引用了原對象的x屬性， a 則為一個引用變數

3. a  = {y: 1}  只是將a這個引用變數的指標指向了另一個對象{y: 1}

4. a.x = a，前者還是代表著原來的對象的x屬性，也就是b引用的對象的x屬性

5. 賦值完畢。

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

庖丁解牛

引擎的工作原理： 引擎在解析javascript運算式時，會進行LHS查詢, RHS查詢（詳見《你不知道的javascript》），我將它們理解為LHS（賦值）,RHS（尋找）。

下面，就上面例子，我們來示範一下引擎的工作流程

var a = {x: 1}// 引擎：我將要對a變數LHS（賦值），內容是{x: 1}// 範圍： 剛聲明了a變數，給你。var b = a// 引擎： 我將要對a變數RHS（尋找）// 範圍： 你剛剛給它LHS了，給你吧// 引擎： 我將要對b變數LHS（賦值），內容為a變數指向的對象// 範圍：剛聲明了b變數，給你。a.x = a = {y: 1}// 引擎：我將要對a進行LHS(賦值)，內容是另一個對象{y：1}// 範圍：可以，給你，但好像還有其他命令，先不要賦值。// 引擎： 是的，下一步我還需要對a.x 進行LHS（賦值），內容是將要改變的a變數// 範圍： 可以，a變數指向的對象有x屬性，不過馬上a就改變了，不過沒關係，b變數也指向那個對象，賦值完後，你可以用b變數引用舊對象。// 引擎：瞭解了，我先把a變數賦值為一個新的對象，然後把原來的a變數指向的對象的x屬性賦值為 新a。a.x // undefined// 引擎： 我需要拿到a變數指向的對象的x屬性// 範圍： 你剛剛改變了a的指向，現在的a指向的對象已經沒有x屬性了b.x // {y: 1}// 引擎： 我需要拿到b變數指向的對象的x屬性// 範圍： 你是想拿到你舊對象的x屬性吧，給你，不過已經被你在之前改變了值，現在b.x的值就是a指向的新對象的值。

以上是我的理解，沒有權威認證。想詳細瞭解執行過程，請參考《你不知道的javascript》，如果本節有誤，請指出。

2. ++操作符

大家最很常用 ++ 操作符，其實也沒什麼很大奇特之處，但是對於新手入門的你是否真正瞭解他。

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

前++和後++，一個是返回運算式自增後一個是返回運算式自增前的值。我們可以把兩個進行分解，看一下過程。

b = a++// 等價於 ...b = aa = a + 1//.........................b = ++ a// 等價於 ...a = a + 1b = a

只是一個運算順序問題，這個可能好理解，但是也有一個坑，如下。

前幾天一個人問： 1++ 等於幾？答： 2

估計很多人第一反應就是2，但是這大錯特錯！那為什麼不等於2呢，其實 1++是報錯了，並不是合法的運算式，原因如下：

1 ++// 等價於1 = 1 + 1// 引擎對 1 進行LHS（賦值），範圍發現他是非法變數，所以會報錯 左值無效。

3. 封裝對象

我們在用字串擷取長度、使用方法截取等行為時，你有沒有想過： 字面值只是個值，為什麼他會有方法屬性，不是應該對象才有的嗎？的確是對象才有的，但是在執行運算式時，產生了封裝對象。也許你看過了此知識點，可以跳過。

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

我們定義一個str字串，擷取長度為5，但是我們自己加一個屬性aaa缺擷取不到，這需要用封裝對象的聲明周期來解答：封裝對象的聲明周期只存在於一個運算式內

var str = 'hello'str.length// 等價於new String(str).lengthstr.aaa = 5//等價於new String(str).aaa = 5str.aaa// 等價於new String(str).aaa

也就是說，每一次用到str屬性時，都是先封裝成String對象，操作完後，對象釋放，可見，以上兩次str.aaa是不同的對象，所以第二次擷取aaa屬性當然沒有了。不瞭解可以百度一下js封裝對象，有詳細的解答。

4. 參考型別

大部分語言都有參考型別，其實就是物件變數。c語言中，我們將參考型別理解為指標，這個指標是動態指向一塊記憶體，通過代碼的變化，指標的指向會隨之改變。js也一樣。

在我們書寫代碼中，一定要記住參考型別變數和字面值變數的 區別，他們分別有不同的用處。

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

這是《javascript進階程式設計》裡面的一個例子，我們傳遞一個對象global到setColor函數裡，在內部進行了如上操作，我們列印出global.color是blue，為什麼不是red？這裡就是參考型別的結果。

1. global變數是參考型別，他指向一個對象,

2. 傳遞到setColor函數中，obj就引用了global指向的對象（下面稱為globalObj）

3. 給globalObj賦值一個color屬性為blue字串，這時global.color是blue了

4. 將obj指向另一個新對象localObj，使得obj與global中斷連線。

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

可以看出，我們並沒有對global對象的color進行'red'賦值，'red'賦值給了另一個對象的color屬性。

結論：參考型別傳遞是將兩個變數指向同一個對象，而字面量的傳遞僅僅是值的賦值傳遞。我們可以將參考型別傳遞到函數進行改變，不可以在函數內改變傳遞進來的字面值。

5. && 與 ||

兩者的基本運用相信大家都瞭解，大部分用來if判斷，如：

var a = 2;var b = falseif (a && b) { alert('best')}if (a || b) { alret('good')  // 運行}

他們的用法不局限於判斷 左右兩邊的 && 和 || 關係，還可以用來提供代碼的品質

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

如果僅僅判斷obj.info.user 會報錯造成程式終止，但是下面那樣判斷就大使得代碼健壯，不會那麼容易崩潰。

重點： && 和 || 並不會返回true和false，他會返回終止此運算式的那個變數值。

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

&&和||， &&優先順序大於||。

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

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

結尾

javascript基礎本章簡單的介紹在這裡，內容並不全面，還請多多見諒。如有錯誤，請指出。。。。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的協助，同時也希望多多支援幫客之家！