跟我學習javascript的undefined與null
當討論JavaScript中的原始數(shù)據(jù)類型時,大多數(shù)人都知道從String、Number到Boolean的基本知識。這些原始類型相當簡單,行為符合常識。但是,本文將更多關注獨特的原始數(shù)據(jù)類型Null和Undefined,是什么讓它們?nèi)绱讼嗨?,卻又似是而非。
一、理解null和undefined
在JavaScript中,null是字面量同時也是語言中的關鍵字,用來表示無法識別的對象值。換句話說,這用來表示“無值(no value)”,但你可以決定什么時候得到期望值。
雖然相似,undefined實際上代表了不存在的值(non-existence of a value),也即你有東西丟失了。兩者都是完全不可變的,沒有屬性和方法,也不能給其屬性賦值。事實上, 當你試圖訪問或定義null 與 undefined的一個屬性將會引發(fā)一個類型錯誤(TypeError)。
沒有值代表的布爾值是false,這意味著他們在條件上下文中會被被計算為false,如if語句。使用相等操作符(= =)比較這兩個值和其他false值,他們并不等于除了自己:
null == 0; // false undefined == ""; // false null == false; // false undefined == false; // false null == undefined; // true
盡管如此,和其他相似之處,但null和undefined并不是等價的。每個作為其獨特的類型的唯一成員,undefined是Undefined類型和null是Object類型。使用全等操作符(===)比較這兩個值,這要求類型和值都相等,下面證明這一點:
null === undefined; //false typeof null; //"object" typeof undefined; //"undefined"
上面說明:null 這是一個對象,但是為空。而且 null 是 JavaScript 保留關鍵字。
另外null 參與數(shù)值運算時其值會自動轉(zhuǎn)換為 0 ,因此,下列表達式計算后會得到正確的數(shù)值:
123 + null; //123 123 * null; //0
undefined是全局對象(window)的一個特殊屬性,其值是未定義的。但 typeof undefined 返回 ‘undefined' 。
雖然undefined是有特殊含義的,但它確實是一個屬性,而且是全局對象(window)的屬性。請看下面的代碼:
alert('undefined' in window);//輸出:true
var anObj = {};
alert('undefined' in anObj); //輸出:false
從中可以看出,undefined是window對象的一個屬性,但卻不是anObj對象的一個屬性。
注意:
- 盡管undefined是有特殊含義的屬性,但卻不是JavaScript的保留關鍵字。 undefined參與任何數(shù)值計算時,其結果一定是NaN。 隨便說一下,NaN是全局對象(window)的另一個特殊屬性,Infinity也是。這些特殊屬性都不是JavaScript的保留關鍵字!
- 驗證一個值或者一個對象為null時,需要用“===” 來判定,若只用“==”,則無法判定是null 還是 undefined.
二、產(chǎn)生Undefined情況
有許多的方法產(chǎn)生一個undefined值的代碼。它通常遇到當試圖訪問一個不存在的值時。在這種情況下,在JavaScript這種動態(tài)的弱類型語言中,只會默認返回一個undefined值,而不是上升為一個錯誤。
1、任何聲明變量時沒有提供一個初始值,都會有一個為undefined的默認值:
var foo; // 默認值為 undefined
2、當試圖訪問一個不存在的對象屬性或數(shù)組項時,返回一個undefined值:
var array = [1, 2, 3]; var foo = array.foo; // foo 屬性不存在, 返回 undefined var item = array[5]; // 數(shù)組中沒有索引為5的項,返回 undefined
3、如果省略了函數(shù)的返回語句, 或者return語句未帶任何參數(shù)返回undefined:
var value = (function(){
})(); // 返回 undefined
var value1 = (function(){
return;
})(); // 返回 undefined
4、調(diào)用函數(shù)時,應該提供的參數(shù)沒有提供,該參數(shù)等于undefined
function f(x){
console.log(x)
}
f(); // undefined
最后,undefined是一個預定義的全局變量(不像null關鍵字)初始化為undefined值:
'undefined' in window; // true
ECMAScript 5中,這個變量是只讀的,以前并非如此。
三、null的用例
null的用例是使他與眾不同的主要方面,因為不像undefined,null被認為是更有用。這正是為什么typeof操作符作用于null值 時返回“object”。最初的理由是,現(xiàn)在仍然是,通常用作一個空引用一個空對象的預期,就像一個占位符。typeof的這種行為已經(jīng)被確認為一個錯 誤,雖然提出了修正,出于后兼容的目的,這一點已經(jīng)保持不變。
一般來說,如果你需要給一個變量或?qū)傩灾付ㄒ粋€不變值,將它傳遞給一個函數(shù),或者從一個函數(shù)返回null,null幾乎總是最好的選擇。簡而言之,JavaScript使用undefined并且程序員應該使用null。
null的另一個可行的用例,也被認為是良好的實踐是一個顯式指定變量為無效(object= null)當一個引用不再是必需的。通過分配null值,有效地清除引用,并假設對象沒有引用其他代碼,指定垃圾收集,確?;厥諆?nèi)存。
四、提高undefined性能
當我們在程序中使用undefined值時,實際上使用的是window對象的undefined屬性。 同樣,當我們定義一個變量但未賦予其初始值,例如:
var aValue;
這時,JavaScript在所謂的預編譯時會將其初始值設置為對window.undefined屬性的引用, 于是,當我們將一個變量或值與undefined比較時,實際上是與window對象的undefined屬性比較。這個比較過程中,JavaScript會搜索window對象名叫‘undefined'的屬性,然后再比較兩個操作數(shù)的引用指針是否相同。
由于window對象的屬性值是非常多的,在每一次與undefined的比較中,搜索window對象的undefined屬性都會花費時 間。在需要頻繁與undefined進行比較的函數(shù)中,這可能會是一個性能問題點。因此,在這種情況下,我們可以自行定義一個局部的undefined變 量,來加快對undefined的比較速度。例如:
function anyFunc() {
var undefined;
//自定義局部undefined變量
if(x == undefined)
//作用域上的引用比較
while(y != undefined)
//作用域上的引用比較
};
其中,定義undefined局部變量時,其初始值會是對window.undefined屬性值的引用。新定義的局部undefined變 量存在與該函數(shù)的作用域上。在隨后的比較操作中,JavaScript代碼的書寫方式?jīng)]有任何的改變,但比較速度卻很快。因為作用域上的變量數(shù)量會遠遠少 于window對象的屬性,搜索變量的速度會極大提高。
這就是許多前端JS框架為什么常常要自己定義一個局部undefined變量的原因!
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助。
相關文章
JavaScript實現(xiàn)網(wǎng)頁版貪吃蛇游戲
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁版貪吃蛇游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-07-07
javascript實現(xiàn)多級聯(lián)動下拉菜單的方法
這篇文章主要介紹了javascript實現(xiàn)多級聯(lián)動下拉菜單的方法,通過javascript自定義函數(shù)實現(xiàn)對多級聯(lián)動下拉菜單的操作,是非常實用的技巧,需要的朋友可以參考下2015-02-02
在Html中使用Requirejs進行模塊化開發(fā)實例詳解
在前端模塊化的時候,不僅僅是js需要進行模塊化管理,html有時候也需要模塊化管理。這里就介紹下如何通過requirejs,實現(xiàn)html代碼的模塊化開發(fā)2016-04-04
JS+CSS實現(xiàn)高亮關鍵詞(不侵入DOM)的方式
這篇文章主要為大家詳細介紹了JS+CSS實現(xiàn)高亮關鍵詞(不侵入DOM)的方式,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
JavaScript實現(xiàn)檢查頁面上的廣告是否被AdBlock屏蔽了的方法
這篇文章主要介紹了JavaScript實現(xiàn)檢查頁面上的廣告是否被AdBlock屏蔽了的方法,其實就是利用JS檢測div的名稱和樣式名稱實現(xiàn),需要的朋友可以參考下2014-11-11
全面解析Bootstrap表單使用方法(表單控件狀態(tài))
這篇文章全面解析了Bootstrap表單的使用方法,本文重點介紹Bootstrap表單控件狀態(tài)的三種情況,感興趣的小伙伴們可以參考一下2015-11-11

