2013年9月8日 星期日 | By: 雞米

[JavaScript] 前端跨網域存取問題 (xhr cross-domain request is not allowed)

XMLHttpRequest cannot load ... Origin ... is not allowed by Access-Control-Allow-Origin

這個問題常發生在前端程式嘗試以 AJAX (XMLHttpRequest) 方式存取跨網域資源時,因為 Security 的考量,造成 request 發送失敗的情況。
2013年5月22日 星期三 | By: 雞米

[JavaScript] 忍之道解謎(四) - Constructor Invocation

Q. 呼叫 a.bar 的結果是?

這題同樣是考 "Constructor Invocation" 的概念 (詳細可參照此文章),當 function object 與 new 聯用時,會建立一個此 function type 的物件並與其 prototype 產生連結,所以當 a 物件被產生出來時其 this 指向一個新建立出來的物件並非 window,所以當存取 this.foo 時,因為 a 這個 bar type 物件並沒有該屬性,因此答案是 undefined。
2013年5月19日 星期日 | By: 雞米

[JavaScript] JSDC 2013 白板題 - this

今年 JSDC 比去年相較之下與會的人變多了,各種前端技術的社群( Node, Angular, Front-end Developer) 不斷冒出來,反映有愈來愈多人想投入這領域,真心希望前端設計師在台灣可以愈來愈受重視!前端魂阿~

以上都是題外話,今日午茶時間,在攤位附近的白板上有出了幾個 JS 的題目,旁邊寫了"可以跟 David Shariff 討論",所以我想應該是 David 出的吧? 因為解的人實在太多了,所以只有看到最前面那一題,題目是:


這題如果沒有理解錯的話,是問如果呼叫了 boo 這個 method 時 x 等於多少?這題考的是 this 的觀念,對於熟悉 OO 的人來說 this 並不陌生,但有別於 classical 程式語言,JavaScript 的 this 是根據 invocation pattern 來決定的,因為 foo 是一個 object,因此呼叫其 boo 函式時,屬於 method invocation - this 會跟呼叫該 method 的物件綁定,因此回傳 this.x 值就是 foo 的 x 屬性 20。


2013年5月15日 星期三 | By: 雞米

[JavaScript] 忍之道解謎(三) - Constructor Invocation Pattern

Q. typeof b = ?

JavaScript 是種 prototypal inheritance的語言,有別於目前主流的 classical 語言,它的繼承是以 prototype 的概念來實現。new Constructor(args...){ .... } 這個敘述對於物件導向語言並不陌生,它代表建立一個類別物件的實體,JS 雖然沒有類別的概念,但它仍然有 new 這個陳述式:
new Constructor([arguments]) - 用來建立一個自定義物件的實體或是一個有定義 Constructor 的內建物件,Constructor 為 function object ,代表產生出來的物件類型。
2013年5月14日 星期二 | By: 雞米

[JavaScript] 忍之道解謎(二) - Array addition



Q. 相加結果為?


這個題目屬於典型的 JS quirk,因為JavaScript 是弱型別(weak type)的語言,所以JavaScript 在進行運算時,只會處理 Number, String 的運算,其它類型的資料會被自動轉換為上述兩種型態之一再進行運算,如果無法處理即會丟出 Type Error。

JavaScript 型態自動轉換的方法 ( ToPrimitive() )


JavaScript 會依下列步驟轉換其數值型態 ( Date 物件 2、3 步驟對調):

[JavaScript] 忍之道解謎(一) - function Scope



Q: 請問alert訊息是?

題目中的foo, boo function為兩個global function,site 則是一個global variable 預設值為"jsdc",當程式依序呼叫foo, boo兩個函式後,alert出來的site變數值為多少?

JavaScript 的 function scope


Scope 是程式語言用來管理變數的生命週期與可視範圍(Visibility),有了這項機制可以避免命名的衝突以及記憶體自動管理。JS 提供了function scope 機制,這意昧著function 裡面所宣告的變數僅限函式內使用,超出此範圍即失去其效用,function執行階段在取用這些變數成員時,是透過Scope chain 去搜尋並取用。