調皮的Javascript

最近開始接觸前端的東西。不可或缺的是Javascript這門語言。今天遇到了一些比較神奇的事情。表明這門語言要用好并不是那么的容易。

1. 自動添加分號

javascript 的分號并不是必須的,不過忽略的話會發生一些比較有趣的事情。
我在火狐的Firebug里面編寫下列代碼:

var x = 3;
var y = 4;
x
++
y
console.log(x);
console.log(y);

上面代碼會被解析成** x; ++y;** 最后打印結果為 3, 5。javascript的解析器貌似會比較人性化地判斷哪些地方需要斷句才能夠讓例子跑起來。(注意是跑起來,不一定是正確地跑起來), 再看下面這個例子:

function pulsOne(x) {
    return x + 1;
}
y = plusOne
(12+22) + 100.toString()

最后結果很奇怪的,代碼會被解析成 y = plusOne(12 + 22) + 100.toString(),結果為35100。但是并不是所有的東西都會跟下一行拼接,比如有些關鍵字:

function f(x) {
    return
    x
}

a = f(33)

這個時候我們都期望是33但是結果卻是 undefined。表明它遇到意外了。遇到return之后就自動斷句了。同類的會自動斷句的還有continue, break

所以我覺得沒什么事還是老老實實得加上分號吧,對于代碼可讀性十分重要。

2. 小心黑魔法

我們寫代碼總是不可避免的需要去排序。我在node交互環境下對數組[1,12,23,4,5]進行排序

 > [1,12,23,4,5].sort()
 [ 1, 12, 23, 4, 5 ]

上面得出的結果很明顯不是我們想要的。它這里進行了類型轉換。都把我們需要比較的值轉換成對應的字符串初始值(toString()處理)然后再進行比較了,所以有了這個坑爹的結果。要解決這個問題。我們需要傳入比較函數。

> [1,12,23,4,5].sort(function(a, b) {return a > b})
[ 1, 4, 5, 12, 23 ]

這個就是我們想要的結果了。如果我們設定比較函數的話,通過里面的小于號,會對我們需要比較的對象做valueOf()的初始值的轉換。就能得到我們想要的結果了。

3. 隱藏的對象包裝

var s = "test";
s.len = 4;
var t = s.len;

由上面等式得出的t的結果是undefined,這很讓人費解。這里有個javascript的特性叫做包裝對象。當字符串s被賦值后進行了s.len = 4的操作。這個時候會將字符串值調用new String(s)來創建一個臨時的字符串對象,賦值成功后就會將其銷毀。這叫做包裝對象。。。。。所以當我們給t賦值的時候對象已經被銷毀了。換句話說s.len已經不存在了。所以t的值是undefined

那我們現在來做一個實驗。包裝過的字符串跟沒有包裝過的字符串是否相同?

> s2 = new String("I Love Ruby")
[String: 'I Love Ruby']
> s1 = "I Love Ruby"
'I Love Ruby'
> s1 == s2
true
> s1 === s2
false

很明顯,他們的原始值(通過toString或者valueOf處理),然而他們本質上(通過===可以對他們的類型加以判斷)是不同的。

4. 函數作用域

函數作用域問題一直是比較頭疼的事情。舉一個權威指南里面一個比較經典的例子。它表明javascript的局部變量作用域是函數級別的。并且會有一種看起來聲明提前的現象。

var scope = "global"
function f() {
    console.log(scope);
    var scope = "local";
    console.log(scope);
}

我在node里面運行函數f得到的結果是

> f()
undefined
local

神奇吧,首先打印的scope并不是我們期望的global,因為在函數f的作用域里面全局變量被函數內部變量覆蓋了。先會引用局部定義的同名變量。所以上面的例子的表現就是如下面這堆代碼:

var scope = "global"
function f() {
    var scope;
    console.log(scope);
    scope = "local";
    console.log(scope);
}

相當與我們把聲明提前了。然后在后面再對聲明的變量進行賦值。這也是Javascript里面比較特殊的地方吧。

以上都是我今天接觸Javascript后發現的一些比較奇怪的事情。《Javascript權威指南》這本書有比較詳細的說明,我只是抽取一些我覺得比較特殊的東西來總結一下。希望于我于大家來說都有好處吧。后期會繼續跟進相關的話題。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,270評論 0 4
  • FreeCodeCamp - Basic JavaScript 寫在前面: 我曾經在進谷前刷過這一套題,不過當時只...
    付林恒閱讀 16,521評論 5 28
  • 第三章 影像店的男人 “喂,有人在嗎?”有人問著,李木子正墊著腳尖翻看著書架的書,她扭頭看過去,一個棕色微卷頭發,...
    云朵默閱讀 243評論 0 0
  • SDK管理利器——sdkman 項目使用java的開發者一定會為新配環境變量而頭大,sdkman很好的解決了系統s...
    帷幄庸者閱讀 3,977評論 0 6
  • 荒草滿地的繁華, 像那西邊升起的艷陽 草木叢生的凄涼, 是泡在不羈中的你。 要把荒草點著, 戲耍艷陽在烽火中 要丟...
    我和我的故事閱讀 186評論 0 0