JavaScript中的坑

內容：關於JavaScript中的一些蛋疼的問題以及面試筆試中常見的一些坑爹套路總結

此部份內容持續總結完善中、、、

 

 

 

1.undefined和null的區別

• null： Null類型，表明空值，表明一個空對象指針，使用typeof運算獲得object，因此能夠認爲它是一個特殊的對象值
• undefined： Undefined類型，當一個聲明瞭一個變量未初始化時，獲得的就是undefined，可是typeof一個未聲明的變量獲得的也是undefined

 

  null和undefined的不一樣之處:

• null是javascript的關鍵字，能夠認爲是對象類型，它是一個空對象指針，和其它語言同樣都是表明空值
• undefined是javascript獨有的，是一個預約義的全局變量，沒有返回值的函數返回爲undefined，沒有實參的形參也是undefined
• undefined是訪問一個未初始化的變量時返回的值而null是訪問一個還沒有存在的對象時返回的值。所以可把undefined看做是空的變量而null看做是空的對象
• 在定義一個想保存對象的變量時，就可讓該變量先保存null值，這樣既能體現null是一個空指針對象，也能更好的區分null和undefined
• 在聲明一個變量時應該儘可能去賦值，這樣確保typeof一個變量名爲undefined的狀況下這個變量是未聲明的

 

 

2.坑爹的this

JavaScript中的this，是包含它的函數做爲方法被調用時所屬的對象

 1 var o = {
 2     foo: 1,
 3     bar: function(){
 4         return this.foo
 5     }
 6 }
 7 
 8 o.bar()
 9 // 1
10 
11 var a = o.bar
12 a()
13 // undefined

以上代碼兩種輸出結果是由this的動態做用域致使的，第一次輸出時裏面的this是對象o，第二次輸出時裏面的this是對象window(全局對象)

固然可使用bind方法綁定做用域：

 1 var o = {
 2     foo: 1,
 3     bar: function(){
 4         return this.foo
 5     }
 6 }
 7 
 8 o.bar()
 9 // 1
10 
11 var a = o.bar
12 a()
13 // undefined
14 
15 var b = o.bar.bind(o)
16 b()
17 // 1
18 o.foo = 12
19 b()
20 // 12

 

 

3.bind apply call

(1)介紹

在JavaScript中，call、apply和bind是Function對象自帶的三個方法，這三個方法的主要做用是改變函數中的this指向

bind apply call方法的共同點和區別：

• bind apply call三者都是用來改變函數的this對象的指向的
• bind apply call三者第一個參數都是this要指向的對象，也就是想指定的上下文
• bind apply call三者均可以利用後續參數傳參
• bind 是返回對應函數，便於稍後調用；apply 、call 則是當即調用 

 

(2)bind

bind方法會建立一個新函數，稱爲綁定函數，當調用這個綁定函數時，綁定函數會以建立它時傳入 bind方法的第一個參數做爲 this，傳入 bind方法的第二個以及之後的參數加上綁定函數運行時自己的參數按照順序做爲原函數的參數來調用原函數

注意：bind方法的返回值是函數

 1 // bind()最簡單的用法是建立一個函數，使這個函數不論怎麼調用都有一樣的this值
 2 // 常見的錯誤: 將方法從對象中拿出來賦值給變量而後調用，並但願this指向原來的對象 可是實際上此時this指向全局對象window
 3 // 這樣若是不作特殊處理，通常會丟失原來的對象
 4 // 可是使用bind()方法可以很漂亮的解決這個問題：
 5 
 6 this.num = 9; 
 7 var module = {
 8   num: 81,
 9   getNum: function() { return this.num; }
10 };
11  
12 module.getNum(); // 81
13  
14 var getNum = module.getNum;
15 getNum(); // 9, 由於在這個例子中，"this"指向全局對象
16  
17 // 建立一個'this'綁定到module的函數
18 var boundGetNum = getNum.bind(module);
19 boundGetNum(); // 81

 

 

(3)apply和call

apply方法：

語法：apply([thisObj[,argArray]])

定義：應用某一對象的一個方法，用另外一個對象替換當前對象，注意apply方法第二個參數必須是數組或arguments對象

 

call方法：

語法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])

定義：調用一個對象的一個方法，以另外一個對象替換當前對象。

說明： call 方法能夠用來代替另外一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象

 

call 和 apply的區別：
對於 apply、call 兩者而言，做用徹底同樣，只是接受參數的方式不太同樣。call 須要把參數按順序傳遞進去，而 apply 則是把參數放在數組裏。

既然二者功能同樣，那該用哪一個呢？在JavaScript 中，某個函數的參數數量是不固定的，所以要說適用條件的話，當你的參數是明確知道數量時用 call ；而不肯定的時候用 apply，而後把參數 push 進數組傳遞進去。當參數數量不肯定時，函數內部也能夠經過 arguments 這個數組來遍歷全部的參數

 

call和apply使用實例：

 1 // apply 作了兩件事情
 2 // 1是綁定 this
 3 // 2 是把數組參數解開傳給函數
 4 // console.log.apply(console, arguments)
 5 // 調用 log 函數, this 是 cosnole
 6 // arguments 是一個數組, 可是做爲參數 傳遞給 log 函數
 7 
 8 // call 和 apply 如出一轍幾乎
 9 // 區別只在於傳遞參數的方式
10 console.log.apply(console, [1, 2, 3, 4])
11 console.log.call(console, 1, 2, 3, 4)