建站
咨詢
售后
建站咨詢
新聞中心
本文主要介紹怪異的Javascript，毋庸置疑，它絕對有怪異的一面。當軟件開發(fā)者開始使用世界上使用最廣泛的語言編寫代碼時，他們會在這個過 程中發(fā)現(xiàn)很多有趣的“特性”。即便是老練的Javascript開發(fā)者也可以在本文找到一些有趣的新陷阱，請留意這些陷阱，當然也可以盡情享受由這些陷阱 帶來的“樂趣”!
網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、重慶小程序開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了中方免費建站歡迎大家使用！
函數(shù)和操作符
雙等號
==操作符比較時會進行類型的強制轉換，這意味著它可以比較兩個不同類型的對象，在執(zhí)行比較之前它將會嘗試把這兩個對象轉換成同一個類型，舉一個例子：
- "1" == 1 //true
然而，這樣往往會誤導我們，而且我們也不需要這樣子來比較。在上面的例子中，我們完全可以先將字符串轉換成數(shù)字型，然后利用對類型敏感的三重等號(===)來進行比較，如：
- Number("1") === 1; //true
或者，更好的是，確保你放在首位的操作數(shù)的類型是正確的。
由于雙等號具有強制類型轉換的行為，所以它會打破一般的傳遞性規(guī)則，這點有點嚇人，請看下面的列子：
- "" == 0 //true - 空字符串會被強制轉換為數(shù)字0.
- 0 == "0" //true - 數(shù)字0會被強制轉換成字符串"0"
- "" == "0" //false - 兩操作數(shù)都是字符串所以不執(zhí)行強制轉換
如果使用三重等號，上面的三個比較都將返回false。
parseInt不把10作為數(shù)字基數(shù)
如果你忽略parseInt的第二個參數(shù)，那么數(shù)字的基數(shù)將由下面的規(guī)則所決定：
◆ 默認基數(shù)為10，即按10進制解析
◆ 如果數(shù)字以0x開頭，那么基數(shù)為16，即按16進制解析
◆ 如果數(shù)字以0開頭，那么基數(shù)為8，即按8進制解析
一個常見的錯誤是我們讓用戶輸入以0開頭的數(shù)字，這時候它就按8進制的方式去解析了，于是我們就看到了如下的效果：
- parseInt("8"); //8
- parseInt("08"); //0
因此，我們很多時候都會指定parseInt的第二個參數(shù)，如下所示：
- parseInt("8", 10); //8
- parseInt("08", 10); //8
ECMAScript5方面的說明：ECMAScript已不再支持8進制的解析假設，另外，如果忽略parseInt的第二個參數(shù)將會引起JSLint的警告。
字符串替換
字符串替換函數(shù)僅僅會替換第一個匹配項，并不能替換你所期望的全部匹配項。如下代碼：
- "bob".replace("b", "x"); // "xob"
- "bob".replace(/b/, "x"); // "xob" (使用了正則表達式)
如果要替換所有的匹配項，我們可以使用正則表達式，并為他它添加全局修飾符，如下代碼：
- "bob".replace(/b/g, "x"); // "xox"
- "bob".replace(new RegExp("b", "g"), "x"); // "xox" (alternate explicit RegExp)
全局修飾符確保了替換函數(shù)找到第一個匹配項后不會停止對下一個匹配項的替換。
“+"操作符會執(zhí)行相加操作和字符串連接操作
php作為另一種弱類型語言，可以使用”.“操作符對字符串進行連接。Javascript卻不是這樣的 - 所以當操作數(shù)是字符串的時候”a+b“通常是執(zhí)行連接操作。如果你想執(zhí)行數(shù)字相加那你就要引起注意了，因為輸入的內容可能是字符串類型的，所以你在執(zhí)行相 加操作前需要先將其轉換成數(shù)字類型，代碼如下：
- 1 + document.getElementById("inputElem").value; // 連接操作
- 1 + Number(document.getElementById("inputElem").value); // 相加操作
需要注意的是，相減操作會嘗試將操作數(shù)轉換成數(shù)字類型，代碼如下：
- "3" - "1"; // 2
盡管有時候你想用減法將字符串從另一個字符串中減掉，但這時候往往會產生一些邏輯錯誤。
很多時候我們用數(shù)字和空串相加來實現(xiàn)數(shù)字轉換成字符串的操作，代碼如下：
- 3 + ""; // "3"
但是這樣做并不好，所以我們可以用String(3)來取代上面的方法。
typeof
typeof這會返回一個javascript基本類型的實例的類型。Array實際上不是基本類型，所以typeof Array對象將返回Object，代碼如下：
- typeof {} === "object" //true
- typeof "" === "string" //true
- typeof [] === "array"; //false
當你對自己的對象的實例使用這個操作符時將會得到相同的結果(typeof = "object")。
另外說明一點，”typeof null“將返回”object“，這個有點詭異。
instanceof
instanceof返回指定對象是否是由某個類構造的實例，這個對我們檢查指定對象是否是自定義類型之一很有幫助，但是，如果你是用文本語法創(chuàng)建的內置類型那可能會得出錯誤的結果，代碼如下：
- "hello" instanceof String; //false
- new String("hello") instanceof String; //true
由于Array實際上不是內置類型(只是偽裝成內置類型 - 因此對它使用typeof不能得到預期的結果)，但是使用instanceof就能得到預期效果了，代碼如下所示：
- ["item1", "item2"] instanceof Array; //true
- new Array("item1", "item2") instanceof Array; //true
唉，不爽!總的來說，如果你想測試Boolean, String, Number, 或者Function的類型，你可以使用typeof，對于其他的任何類型，你可以使用instanceof測試。
哦，還有一點，在一個function中，有一個預定義變量叫“arguments”，它以一個array的形式傳遞給function。然而，它并不是真正的array，它只是一個類似array的對象，帶有長度屬性并且屬性值從0-length。非常奇怪...你可以用下面的小伎倆將它轉換成真正的數(shù)組：
- var args = Array.prototype.slice.call(arguments, 0);
這個對由getElementsByTagName返回的NodeList對象也是一樣的 - 它們都可以用以上的代碼轉換成合適的數(shù)組。
eval
eval 可以將字符串以javascript代碼的形式來解析執(zhí)行，但是一般來說我們不建議這么做。因為eval非常慢 - 當javascript被加載到瀏覽器中時，它會被編譯成本地代碼;然而執(zhí)行的過程中每次遇到eval表達式，編譯引擎都將重新啟動執(zhí)行編譯，這樣做的代 價太大了。而且這樣做也丑陋無比，有很多eval被濫用的例子。另外，在eval中的代碼會在當前范圍內執(zhí)行，因此它可以修改局部變量，以及在你的范圍內 添加一些讓你意想不到的東西。
JSON 轉換是我們經常要做的;通常我們使用“var obj = eval(jsonText);”來進行轉換。然而現(xiàn)在幾乎所有的瀏覽器都支持本地JSON對象，你可以使用“var obj = JSON.parse(jsonText);”來替代前面的代碼。相反你也可以用“JSON.stringify”將JSON對象轉換成字符串。更妙的 是，你可以使用“jQuery.parseJSON”來完成上述的工作。
setTimeout和setInterval函數(shù)的第一個參數(shù)可以用字符串作為函數(shù)體來解析執(zhí)行，當然，我們也不建議這樣做，我們可以用實際的函數(shù)來替代。
最后，F(xiàn)unction的構造函數(shù)和eval非常像，唯一不同的是，F(xiàn)unction構造函數(shù)是在全局范圍內執(zhí)行的。
with
with表達式將為你提供訪問對象屬性的速記方式，但我們是否應該使用它，仍然存在矛盾的觀點。Douglas Crockford不太喜歡它。John Resig在他的書中有找了很多with的巧妙用法，但是他也承認這將會影響性能并且會產生一點混亂。來看看我們分離出來的with代碼塊，他不能準確地告訴我們現(xiàn)在正在執(zhí)行什么，代碼如下所示：
- with (obj) {
- bob = "mmm";
- eric = 123;
- }
我是否剛剛修改了一個叫bob的局部變量?或者我是否設置了obj.bob?如果obj.bob已經被定義，那么它將會被重置為“mmm”。否則，如果有 另一個bob在這個范圍中，那么他將會被改變。否則，全局變量bob會被設置。最后，下面的寫法可以非常明確地表達你的意思：
- obj.bob = "mmm";
- obj.eric = 123;
ECMAScript5說明：ES5嚴格的來說已經不支持with表達式。
#p#
類型和構造函數(shù)
使用“new”關鍵字構造內置類型
Javascript中有Object, Array, Boolean, Number, String, 和Function這些類型，他們各自都有各自的文字語法，所以就不需要顯式構造函數(shù)了。
| 顯式構造(不建議) | 文字語法(推薦) |
| var a = new Object(); a.greet = "hello"; |
var a = { greet: "hello" }; |
| var b = new Boolean(true); | var b = true; |
| var c = new Array("one", "two"); | var c = ["one", "two"]; |
| var d = new String("hello"); | var d = "hello" |
| var e = new Function("greeting", "alert(greeting);"); | var e = function(greeting) { alert(greeting); }; |
然而，如果你使用new關鍵字來構造上面其中的一種類型，你實際上將會得到一個類型為Object并且繼承自你要構造的類型的原型的對象(Function類型除外)。所以盡管你用new關鍵字構造了一個Number類型，它也將是一個Object類型，如下代碼：
- typeof new Number(123); // "object"
- typeof Number(123); // "number"
- typeof 123; // "number"
上面的第三項是文本語法，為了避免沖突，我們應該使用這種方法來構造上面的這些類型。
使用“new”關鍵字來構造任何東西
如果你自寫構造函數(shù)并且忘記了new關鍵字，那么悲劇就發(fā)生了：
- var Car = function(colour) {
- this.colour = colour;
- };
- var aCar = new Car("blue");
- console.log(aCar.colour); // "blue"
- var bCar = Car("blue");
- console.log(bCar.colour); // error
- console.log(window.colour); //"blue"
使用new關鍵字調用函數(shù)會創(chuàng)建一個新的對象，然后調用新對象上下文中的函數(shù)，最后再返回該對象。相反的，如果不使用new關鍵在調用函數(shù)，那它將會變成一個全局對象。
偶然忘記使用new關鍵字意味著很多可選擇的對象構造模式已經出現(xiàn)可以完全刪除使用這個關鍵字的需求的情況，盡管這超出了本文的范圍，但我還是建議你去進一步閱讀。
沒有Integer類型
數(shù)值計算是相對緩慢的，因為沒有Integer類型。只有Number類型 - Number是IEEE標準中雙精度浮點運算(64位)類型。這就意味著Number會引起下面的精度舍入錯誤：
- 0.1 + 0.2 === 0.3 //false
因為integers和floats沒有區(qū)別，不像C#和JAVA下面代碼是true：
- 0.0 === 0; //true
最后是一個關于Number的疑問，我們該如何實現(xiàn)下面的問題：
- a === b; //true
- 1/a === 1/b; //false
答案是按照Number的規(guī)范是允許出現(xiàn)+0和-0的，+0等于-0，但是正無窮大不等于負無窮大，代碼如下：
- var a = 0 * 1; // 這個結果為0
- var b = 0 * -1; // 這個結果為-0 (你也可以直接"b=-0",但是你為何要這樣做?)
- a === b; //true: 0等于-0
- 1/a === 1/b; //false: 正無窮大不等于負無窮大
作用域
沒有塊作用域
因為你可能已經注意到上一個觀點，javascript中沒有塊作用域的概念，只有函數(shù)作用域?？梢栽囋囅旅娴拇a：
- for(var i=0; i<10; i++) {
- console.log(i);
- }
- var i;
- console.log(i); // 10
當i被定義在for循環(huán)中，退出循環(huán)后它人被保留在這個作用域內，所以最后調用console.log輸出了10。這里有一個JSLint警告來讓你避免這個問題：強制將所有的變量定義在函數(shù)的開頭。 我們有可能通過寫一個立即執(zhí)行的function來創(chuàng)建一個作用域：
- (function (){
- for(var i=0; i<10; i++) {
- console.log(i);
- }
- }());
- var i;
- console.log(i); // undefined
當你在內部函數(shù)之前聲明一個變量，然后在函數(shù)里重聲明這個變量，那將會出現(xiàn)一個奇怪的問題，示例代碼如下：
- var x = 3;
- (function (){
- console.log(x + 2); // 5
- x = 0; //No var declaration
- }());
但是，如果你在內部函數(shù)中重新聲明x變量，會出現(xiàn)一個奇怪的問題：
- var x = 3;
- (function (){
- console.log(x + 2); //NaN - x is not defined
- var x = 0; //var declaration
- }());
這是因為在函數(shù)中x變量被重新定義了，這說明了翻譯程序將var表達式移動到了函數(shù)頂部了，最終就變成這樣執(zhí)行了：
- var x = 3;
- (function (){
- var x;
- console.log(x + 2); //NaN - x is not defined
- x = 0;
- }());
這個實在是太有意義了!
全局變量
Javascript 有一個全局作用域，在為你的代碼創(chuàng)建命名空間時一定要小心謹慎。全局變量會給你的應用增加一些性能問題，因為當你訪問它們時，運行時不得不通過每一個作用 域來建立知道找到它們?yōu)橹?。他們會因你的有意或者無意而被訪問或者修改，這將導致另外一個更加嚴重的問題 - 跨站點腳本攻擊。如果一個不懷好意的家伙在你的頁面上找出了如何執(zhí)行那些代碼的方法，那么他們就可以通過修改全局變量非常容易地擾亂你的應用。缺乏經驗的 開發(fā)者在無意中會不斷的將變量添加到全局作用域中，通過本文，將會告訴大家這樣會發(fā)生什么意外的事情。
我曾經看到過下面的代碼，它將嘗試聲明兩個值相等的局部變量：
- var a = b = 3;
這樣非常正確的得到了a=3和b=3，但是a在局部作用域中而b在全局作用域中，”b=3“將會被先執(zhí)行，全局操作的結果，3，再被分配給局部變量a。
下面的代碼聲明了兩個值為3的變量，這樣能達到預期的效果：
- var a = 3,
- b = a;
“this”和內部函數(shù)
“this“關鍵字通常指當前正在執(zhí)行的函數(shù)所在的對象，然而，如果函數(shù)并沒有在對象上被調用，比如在內部函數(shù)中，”this“就被設置為全局對象(window)，如下代碼：
- var obj = {
- doSomething: function () {
- var a = "bob";
- console.log(this); // 當前執(zhí)行的對象
- (function () {
- console.log(this); // window - "this" is reset
- console.log(a); // "bob" - still in scope
- }());
- }
- };
- obj.doSomething();
#p#
雜項
數(shù)據(jù)不存在：”null“和”undefined“
有兩種對象狀態(tài)來表明數(shù)據(jù)不存在：null和undefined。這會讓那些從其他編程語言比如C#轉過來的程序員變得相當混亂。也許你會期望下面的代碼返回true：
- var a;
- a === null; //false
- a === undefined; //true
”a“實際上是undefined的(盡管你用雙等號==來與null比較會得出true的結果，但這只是表面上看起來正確的另一個錯誤)。
如果你想檢查一個變量是否真的存在值，那你不能用雙等號==去判斷，要用下面的方法：
- if(a !== null && a !== undefined) {
- ...
- }
”哈“，你也許會說，既然null和undefined都是false，那么你可以這樣去做：
- if(a) {
- ...
- }
當然，0是false，空字符串也是。那么如果這其中一個是a的正確的值的話，你就要用前者了。那種比較短小的比較方式，適合于比較objects, arrays, 和booleans類型。
重定義undefined
非常正確，你可以重定義undefined，因為它不是一個保留字：
- undefined = "surprise!";
但是，你要通過給undefined變量分配一個值或者使用”void“操作符來取回值(否則這是相當沒用的)。
- undefined = void 0;
這就是為什么jquery腳本庫的第一行要這樣寫了：
- (function ( window, undefined ) {
- ... // jQuery library!
- }(window));
這個函數(shù)被調用時是傳入一個參數(shù)的，同時確保了第二個參數(shù)”undefined“實際上是undefined的。
順便說一下，你不能重定義null - 但是你可以重定義NaN，Infinity和帶構造函數(shù)的內置類型。可以這樣嘗試一下：
- Array = function (){ alert("hello!"); }
- var a = new Array();
當然，你可以在任何地方用文字語法聲明Array。
可選的分號
Javascript代碼中分號是可選的，所以初學者寫代碼就簡單多了。但是很不幸的是如果忽略了分號并不會給任何人帶來方便。結果是當解釋器遇到錯誤時，必須追溯并嘗試去猜測因為哪些分號漏寫導致的問題。
這里有一個經典的例子：
- return
- {
- a: "hello"
- };
上面的代碼并不會返回一個對象，而是返回了undefined - 但是也沒有錯誤拋出。其實是因為分號自動加到了return語句后面，其他的代碼都是非常正確的，但是就是什么都不執(zhí)行，這就證明了在 javascript中，左花括號應該緊跟這一行而不該換行，這不只是一個編程風格的問題。下面的代碼才會正確返回一個屬性為a的對象：
- return {
- a: "hello"
- };
NaN
NaN的類型是...Number
- typeof NaN === "number" //true
另外NaN和任何東西比較都是false：
- NaN === NaN; // false
因為NaN之間是不能比較的，唯一判斷一個數(shù)字是否為NaN的方法是調用isNaN方法。
從另一個方面可以說明，我們也可以用函數(shù)isFinite，當其中一個操作數(shù)為NaN或者InFinity時返回false。
arguments對象
在一個函數(shù)中，我們可以引用arguments對象來遍歷傳入的參數(shù)列表，第一個比較怪異的地方是這個對象并不是Array，而是一個類似 Array的對象(有一個length屬性，其值在0-length-1之間)。為了將其轉換成array，我們可以array的splice函數(shù)來創(chuàng)建 其對應的array數(shù)組：
- (function(){
- console.log(arguments instanceof Array); // false
- var argsArray = Array.prototype.slice.call(arguments);
- console.log(argsArray instanceof Array); // true
- }());
第二個比較怪異的地方是當一個函數(shù)的簽名中有顯式arguments參數(shù)時，它們是可以被重新分配的并且arguments對象也會被改變。這就表明了arguments對象指向了變量本身。你不能利用arguments對象來給出它們的初始值：
- (function(a){
- alert(arguments[0]); //1
- a = 2;
- alert(arguments[0]); //2
- }(1));
結束本文!
這樣我就總結完了這些javascript陷阱。我肯定還會有更多這樣的陷阱，期待大家更多的意見和點評。
PS - 我真的很喜歡Javascript。
原文：http://www.codeproject.com/KB/scripting/javascript-gotchas.aspx
譯文：http://www.cnblogs.com/sxwgf/archive/2011/11/14/javascript-gotchas.html
譯者：王國峰
新聞標題：JavaScript中的陷阱大集合
本文來源：http://m.5511xx.com/article/cccppod.html
