文章出處

題目

題目一:

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:添加必要的注釋


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()