你真的已經搞懂JavaScript了嗎？

靜逸發表於2015-05-10
JavaScript

題目

題目一：

if (!("a" in window)) {
var a = 1;
}
alert(a);

 

題目二：

var a = 1,
b = function a(x) {
x && a(--x);
};
alert(a);

 

題目三：

function a(x) {
return x * 2;
}
var a;
alert(a);

 

題目四：

function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);

 

題目五：

function a() {
alert(this);
}
a.call(null);

 

請不要藉助任何幫助工具，心算答案。答案在下面。
.
.
.
.
.

答案：

題目1

if (!("a" in window)) {
var a = 1;
}
alert(a);

 

程式碼含義：如果window不包含屬性a，就宣告一個變數a，然後賦值為1。
你可能認為alert出來的結果是1，然後實際結果是“undefined”。要了解為什麼，需要知道JavaScript裡的3個概念。
首先，所有的全域性變數都是window的屬性，語句 var a = 1;等價於window.a = 1; 你可以用如下方式來檢測全域性變數是否宣告：
"變數名稱" in window
第二，所有的變數宣告都在範圍作用域的頂部，看一下相似的例子：
alert("a" in window);
var a;
此時，儘管宣告是在alert之後，alert彈出的依然是true，這是因為JavaScript引擎首先會掃墓所有的變數宣告，然後將這些變數宣告移動到頂部，最終的程式碼效果是這樣的：
var a;
alert("a" in window);
這樣看起來就很容易解釋為什麼alert結果是true了。
第三，你需要理解該題目的意思是，變數宣告被提前了，但變數賦值沒有，因為這行程式碼包括了變數宣告和變數賦值。
你可以將語句拆分為如下程式碼：
var a; //宣告
a = 1; //初始化賦值
當變數宣告和賦值在一起用的時候，JavaScript引擎會自動將它分為兩部以便將變數宣告提前，不將賦值的步驟提前是因為他有可能影響程式碼執行出不可預期的結果。
所以，知道了這些概念以後，重新回頭看一下題目的程式碼，其實就等價於：
var a;
if (!("a" in window)) {
a = 1;
}
alert(a);

 

這樣，題目的意思就非常清楚了：首先宣告a，然後判斷a是否在存在，如果不存在就賦值為1，很明顯a永遠在window裡存在，這個賦值語句永遠不會執行，所以結果是undefined。
提前這個詞語顯得有點迷惑了，你可以理解為：預編譯。

題目2

var a = 1,
b = function a(x) {
x && a(--x);
};
alert(a);

 

這個題目看起來比實際複雜，alert的結果是1；這裡依然有3個重要的概念需要我們知道。
首先，在題目1裡我們知道了變數宣告在進入執行上下文就完成了；第二個概念就是函式宣告也是提前的，所有的函式宣告都在執行程式碼之前都已經完成了宣告，和變
量宣告一樣。澄清一下，函式宣告是如下這樣的程式碼：
function functionName(arg1, arg2){
//函式體
}
如下不是函式，而是函式表示式，相當於變數賦值：
var functionName = function(arg1, arg2){
//函式體
};
澄清一下，函式表示式沒有提前，就相當於平時的變數賦值。
第三需要知道的是，函式宣告會覆蓋變數宣告，但不會覆蓋變數賦值，為了解釋這個，我們來看一個例子：
function value(){
return 1;
}
var value;
alert(typeof value); //"function"

 

儘快變數宣告在下面定義，但是變數value依然是function，也就是說這種情況下，函式宣告的優先順序高於變數宣告的優先順序，但如果該變數value賦值了，那結果就完全不一樣了：
function value(){
return 1;
}
var value = 1;
alert(typeof value); //"number"

 

該value賦值以後，變數賦值初始化就覆蓋了函式宣告。
重 新回到題目，這個函式其實是一個有名函式表示式，函式表示式不像函式宣告一樣可以覆蓋變數宣告，但你可以注意到，變數b是包含了該函式表示式，而該函式表 達式的名字是a；不同的瀏覽器對a這個名詞處理有點不一樣，在IE裡，會將a認為函式宣告，所以它被變數初始化覆蓋了，就是說如果呼叫a(–x)的話就會 出錯，而其它瀏覽器在允許在函式內部呼叫a(–x)，因為這時候a在函式外面依然是數字。基本上，IE裡呼叫b(2)的時候會出錯，但其它瀏覽器則返回 undefined。
理解上述內容之後，該題目換成一個更準確和更容易理解的程式碼應該像這樣：
var a = 1,
b = function(x) {
x && b(--x);
};
alert(a);

 

這樣的話，就很清晰地知道為什麼alert的總是1了。

題目3

function a() {
return 1 ;
}
var a;
alert(a);

 

這個題目比較簡單：即函式宣告和變數宣告的關係和影響，遇到同名的函式宣告，不會重新定義

題目4

function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);

 

關於這個題目，ECMAsCRIPT 262-3的規範有解釋的。
活動物件是在進入函式上下文時刻被建立的，它通過函式的arguments屬性初始化。arguments屬性的值是Arguments物件.
關於 Arguments物件的具體定義，看這裡：ECMAScript arguments 物件

題目5

function a() {
alert(this);
}
a.call(null);

 

這個題目可以說是最簡單的，也是最詭異的！關於這個題目，我們先來了解2個概念。
這個問題主要考察 Javascript 的 this 關鍵字，具體看這裡：
關於Javascript語言中this關鍵字的用法www.2cto.com
關 於 a.call(null); 根據ECMAScript262規範規定：如果第一個引數傳入的物件呼叫者是null或者undefined的話，call方法將把全域性物件（也就是 window）作為this的值。所以，不管你什麼時候傳入null，其this都是全域性物件window，所以該題目可以理解成如下程式碼：
function a() {
alert(this);
}
a.call(window);

 

所以彈出的結果是[object Window]就很容易理解了。
—————
總結：
這5個題目雖然貌似有點偏，但實際上考察的依然是基本概念，只有熟知了這些基本概念才能寫出高質量程式碼。

怎樣讓自己的js更加完善

1：樣式與javascript分離

2：1、迴圈語句中length屬性可以用變數儲存。2、為事件處理器建立重用的函式。

3：使用配置物件存放程式碼中的硬編碼，如使用到的文字標籤或自定義的屬性名。有利於後續的維護。

4：為變數和函式起有含義的名字

5：新增必要的註釋

相關文章