Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

finished the part in Array & some in function section

  • Loading branch information...
commit 151456f3bed2db1a99d7e197f3cecdb946acd519 1 parent 33a89e7
@chilijung chilijung authored
Showing with 2,072 additions and 188 deletions.
  1. +1 −0  .gitignore
  2. +0 −70 doc/zh(Trandition)/core/undefined.md
  3. +0 −118 doc/zh(Trandition)/function/arguments.md
  4. 0  doc/{zh(Trandition) → zh-TW}/array/constructor.md
  5. 0  doc/{zh(Trandition) → zh-TW}/array/general.md
  6. 0  doc/{zh(Trandition) → zh-TW}/core/delete.md
  7. 0  doc/{zh(Trandition) → zh-TW}/core/eval.md
  8. 0  doc/{zh(Trandition) → zh-TW}/core/semicolon.md
  9. +55 −0 doc/zh-TW/core/undefined.md
  10. +103 −0 doc/zh-TW/function/arguments.md
  11. 0  doc/{zh(Trandition) → zh-TW}/function/closures.md
  12. 0  doc/{zh(Trandition) → zh-TW}/function/constructors.md
  13. 0  doc/{zh(Trandition) → zh-TW}/function/general.md
  14. 0  doc/{zh(Trandition) → zh-TW}/function/scopes.md
  15. 0  doc/{zh(Trandition) → zh-TW}/function/this.md
  16. 0  doc/{zh(Trandition) → zh-TW}/index.json
  17. 0  doc/{zh(Trandition) → zh-TW}/intro/index.md
  18. 0  doc/{zh(Trandition) → zh-TW}/object/forinloop.md
  19. 0  doc/{zh(Trandition) → zh-TW}/object/general.md
  20. 0  doc/{zh(Trandition) → zh-TW}/object/hasownproperty.md
  21. 0  doc/{zh(Trandition) → zh-TW}/object/prototype.md
  22. 0  doc/{zh(Trandition) → zh-TW}/other/timeouts.md
  23. 0  doc/{zh(Trandition) → zh-TW}/types/casting.md
  24. 0  doc/{zh(Trandition) → zh-TW}/types/equality.md
  25. 0  doc/{zh(Trandition) → zh-TW}/types/instanceof.md
  26. 0  doc/{zh(Trandition) → zh-TW}/types/typeof.md
  27. +1,913 −0 site/zh-TW/index.html
View
1  .gitignore
@@ -15,3 +15,4 @@
/site/es
*.md~
*.src.md
+*.DS_store
View
70 doc/zh(Trandition)/core/undefined.md
@@ -1,70 +0,0 @@
-## `undefined``null`
-
-JavaScript 中有兩個表示空值的方式, `null``undefined``undefined`式比較常用的一種。
-
-### `undefined` 的值
-
-`undefined` 是一個值為 `undefined` 的類型。
-
-語言中也定義了一個全域變數,它的值為 `undefined`,這個變數的被稱作 `undefined`
-這個變數 **不是** 一個常數,也不是一個關鍵字。這表示它的值可以被輕易的覆蓋。
-
-> **ES5 提示: ** `undefined` 在 ECMAScript 5 裡 **不再是** *可寫*
-> 但是它的名稱還是可以被隱藏,比如說定義一個函數為 `undefined`
-
-這裡有一些例子會回傳 `undefined` 的值:
-
- - Accessing the (unmodified) global variable `undefined`.
- - Accessing a declared *but not* yet initialized variable.
- - Implicit returns of functions due to missing `return` statements.
- - `return` statements that do not explicitly return anything.
- - Lookups of non-existent properties.
- - Function parameters that do not have any explicit value passed.
- - Anything that has been set to the value of `undefined`.
- - Any expression in the form of `void(expression)`
-
-### Handling Changes to the Value of `undefined`
-
-Since the global variable `undefined` only holds a copy of the actual *value* of
-`undefined`, assigning a new value to it does **not** change the value of the
-*type* `undefined`.
-
-Still, in order to compare something against the value of `undefined`, it is
-necessary to retrieve the value of `undefined` first.
-
-To protect code against a possible overwritten `undefined` variable, a common
-technique used is to add an additional parameter to an [anonymous
-wrapper](#function.scopes) that gets no argument passed to it.
-
- var undefined = 123;
- (function(something, foo, undefined) {
- // undefined in the local scope does
- // now again refer to the value `undefined`
-
- })('Hello World', 42);
-
-Another way to achieve the same effect would be to use a declaration inside the
-wrapper.
-
- var undefined = 123;
- (function(something, foo) {
- var undefined;
- ...
-
- })('Hello World', 42);
-
-The only difference here is that this version results in 4 more bytes being
-used in case it is minified, and there is no other `var` statement inside the
-anonymous wrapper.
-
-### Uses of `null`
-
-While `undefined` in the context of the JavaScript language is mostly used in
-the sense of a traditional *null*, the actual `null` (both a literal and a type)
-is more or less just another data type.
-
-It is used in some JavaScript internals (like declaring the end of the
-prototype chain by setting `Foo.prototype = null`), but in almost all cases, it
-can be replaced by `undefined`.
-
-
View
118 doc/zh(Trandition)/function/arguments.md
@@ -1,118 +0,0 @@
-## The `arguments` Object
-
-Every function scope in JavaScript can access the special variable `arguments`.
-This variable holds a list of all the arguments that were passed to the function.
-
-> **Note:** In case `arguments` has already been defined inside the function's
-> scope either via a `var` statement or being the name of a formal parameter,
-> the `arguments` object will not be created.
-
-The `arguments` object is **not** an `Array`. While it has some of the
-semantics of an array - namely the `length` property - it does not inherit from
-`Array.prototype` and is in fact an `Object`.
-
-Due to this, it is **not** possible to use standard array methods like `push`,
-`pop` or `slice` on `arguments`. While iteration with a plain `for` loop works
-just fine, it is necessary to convert it to a real `Array` in order to use the
-standard `Array` methods on it.
-
-### Converting to an Array
-
-The code below will return a new `Array` containing all the elements of the
-`arguments` object.
-
- Array.prototype.slice.call(arguments);
-
-Because this conversion is **slow**, it is **not recommended** to use it in
-performance-critical sections of code.
-
-### Passing Arguments
-
-The following is the recommended way of passing arguments from one function to
-another.
-
- function foo() {
- bar.apply(null, arguments);
- }
- function bar(a, b, c) {
- // do stuff here
- }
-
-Another trick is to use both `call` and `apply` together to create fast, unbound
-wrappers.
-
- function Foo() {}
-
- Foo.prototype.method = function(a, b, c) {
- console.log(this, a, b, c);
- };
-
- // Create an unbound version of "method"
- // It takes the parameters: this, arg1, arg2...argN
- Foo.method = function() {
-
- // Result: Foo.prototype.method.call(this, arg1, arg2... argN)
- Function.call.apply(Foo.prototype.method, arguments);
- };
-
-
-### Formal Parameters and Arguments Indices
-
-The `arguments` object creates *getter* and *setter* functions for both its
-properties, as well as the function's formal parameters.
-
-As a result, changing the value of a formal parameter will also change the value
-of the corresponding property on the `arguments` object, and the other way around.
-
- function foo(a, b, c) {
- arguments[0] = 2;
- a; // 2
-
- b = 4;
- arguments[1]; // 4
-
- var d = c;
- d = 9;
- c; // 3
- }
- foo(1, 2, 3);
-
-### Performance Myths and Truths
-
-The only time the `arguments` object is not created is where it is declared as
-a name inside of a function or one of its formal parameters. It does not matter
-whether it is used or not.
-
-Both *getters* and *setters* are **always** created; thus, using it has nearly
-no performance impact at all, especially not in real world code where there is
-more than a simple access to the `arguments` object's properties.
-
-> **ES5 Note:** These *getters* and *setters* are not created in strict mode.
-
-However, there is one case which will drastically reduce the performance in
-modern JavaScript engines. That case is the use of `arguments.callee`.
-
- function foo() {
- arguments.callee; // do something with this function object
- arguments.callee.caller; // and the calling function object
- }
-
- function bigLoop() {
- for(var i = 0; i < 100000; i++) {
- foo(); // Would normally be inlined...
- }
- }
-
-In the above code, `foo` can no longer be a subject to [inlining][1] since it
-needs to know about both itself and its caller. This not only defeats possible
-performance gains that would arise from inlining, but it also breaks encapsulation
-because the function may now be dependent on a specific calling context.
-
-Making use of `arguments.callee` or any of its properties is **highly discouraged**.
-
-> **ES5 Note:** In strict mode, `arguments.callee` will throw a `TypeError` since
-> its use has been deprecated.
-
-[1]: http://en.wikipedia.org/wiki/Inlining
-
-
View
0  doc/zh(Trandition)/array/constructor.md → doc/zh-TW/array/constructor.md
File renamed without changes
View
0  doc/zh(Trandition)/array/general.md → doc/zh-TW/array/general.md
File renamed without changes
View
0  doc/zh(Trandition)/core/delete.md → doc/zh-TW/core/delete.md
File renamed without changes
View
0  doc/zh(Trandition)/core/eval.md → doc/zh-TW/core/eval.md
File renamed without changes
View
0  doc/zh(Trandition)/core/semicolon.md → doc/zh-TW/core/semicolon.md
File renamed without changes
View
55 doc/zh-TW/core/undefined.md
@@ -0,0 +1,55 @@
+## `undefined``null`
+
+JavaScript 中有兩個表示空值的方式, `null``undefined``undefined`式比較常用的一種。
+
+### `undefined` 的值
+
+`undefined` 是一個值為 `undefined` 的類型。
+
+語言中也定義了一個全域變數,它的值為 `undefined`,這個變數的被稱作 `undefined`
+這個變數 **不是** 一個常數,也不是一個關鍵字。這表示它的值可以被輕易的覆蓋。
+
+> **ES5 提示: ** `undefined` 在 ECMAScript 5 裡 **不再是** *可寫*
+> 但是它的名稱還是可以被隱藏,比如說定義一個函數為 `undefined`
+
+這裡有一些例子會回傳 `undefined` 的值:
+
+ - 進入尚未修改的全域變數 `undefined`
+ - 進入一個宣告但 **尚未** 初始化的變數。
+ - `return` 表示式中沒有返回任何內容。
+ - 呼叫不存在的屬性。
+ - 函式參數沒有被傳遞數值。
+ - 任何被被設定為 `undefined` 的變數。
+ - 任何表達式中形式為 `void(expression)`
+
+### 處理 `undefined` 值的改變
+
+由於全域變數 `undefined` 只有保存 `undefined` 類型實際值的一個副本,指定了一個新的值並 **不會** 改變 `undefined`類型裡面的值。
+
+為了避免去改變 `undefined` 的值,常用的技巧就是加上一個新的變數到 [匿名包裝器](#function.scopes)。在使用的時候,這個參數不會接受任何的值。
+
+ var undefined = 123;
+ (function(something, foo, undefined) {
+ // undefined 在區域區間內得到了 `undefined` 的值
+
+ })('Hello World', 42);
+
+另外一個可以得到同樣的效果就是在內部宣告一個變數
+
+ var undefined = 123;
+ (function(something, foo) {
+ var undefined;
+ ...
+
+ })('Hello World', 42);
+
+唯一的不同就是在下者會多 4 個多 bytes 用來壓縮檔案,而且函數內野沒有其他需要使用 `var`
+
+### 使用 `null`
+
+JavaScript 中所使用的 `undefined` 類似別的語言中的 *null* , 但實際上在 JavaScript 中的 `null` 算是另外一個類型。
+
+它在 JavaScript 有些可以使用的地方 (例如說宣告一個原型的終結,例如 `Foo.prototype = null` )。
+但是在大部分的時候可以用 `undefined`,來取代。
+
+
View
103 doc/zh-TW/function/arguments.md
@@ -0,0 +1,103 @@
+## `arguments` 物件
+
+所有函數在 JavaScript 中都可以有個特別的參數 `arguments`
+這個變數掌握了一列傳入函數中的參數
+
+> **注意:** 由於 `arguments` 都已經在函數中被定義了
+> 經過 `var` 定義或是用 `arguments` 宣告參數
+> `arguments` 物件都不會被建立
+
+`arguments` 物件 **不是** 一個 `Array`,雖然都有很多 Array 的語法 - 就像是 `length` 屬性 - 但是它沒有繼承來自 `Array.prototype` 事實上它繼承 `object`
+
+由於這些原因,這 **不可能** 用 Array 的一些功能像是 `push``pop`或是 `slice``arguments`
+但是像 `for` 迴圈這些迴圈都是可以用的,如果真的需要使用一些標準的 `Array` 功能可以先把它轉成真的 `Array` 再去使用。
+
+### 轉為 Array
+
+下面的程式可以回傳一個新的 `Array` 包含所有的元素在 `Arguments`的物件中
+
+ Array.prototype.slice.call(arguments);
+
+這種轉化方式比較 **慢** ,不建議使用這種作法如果再追求效率的程式中。
+
+
+### 傳遞參數
+
+下面是建議用這種方式去傳參數到另一個函數
+
+ function foo() {
+ bar.apply(null, arguments);
+ }
+ function bar(a, b, c) {
+ // 在這裡做一些事情
+ }
+
+另一個技巧是用 `call``apply` 放在一起來創造一個更快的解綁定包裝器
+
+ function Foo() {}
+
+ Foo.prototype.method = function(a, b, c) {
+ console.log(this, a, b, c);
+ };
+
+ // Create an unbound version of "method"
+ // 輸入的參數: this, arg1, arg2...argN
+ Foo.method = function() {
+
+ // 結果: Foo.prototype.method.call(this, arg1, arg2... argN)
+ Function.call.apply(Foo.prototype.method, arguments);
+ };
+
+
+### 自動更新
+
+在 `Arguments` 物件創造的 *getter**setter* 的函數方法,可以被視為原本函數的變數。
+
+因此,改變了一個變數會跟著改變它的值而且也間接的改變稻香對應的 `arguments` 的物件,反之亦然。
+
+ function foo(a, b, c) {
+ arguments[0] = 2;
+ a; // 2
+
+ b = 4;
+ arguments[1]; // 4
+
+ var d = c;
+ d = 9;
+ c; // 3
+ }
+ foo(1, 2, 3);
+
+### 性能
+
+`arguments` 總是會被宣告,但除了兩個情況,一個是在一個函式中或是在其中一個參入。而不論他是否有被使用。
+
+*getters**setter* 會永遠被創造。然而,他們對任何性能都沒有影響,除非對它的屬性有多次的訪問
+
+
+> **ES5 提示:** 那些 *getters**setters* 在嚴格的模式像不會被建立
+
+然而會有一種情況來降低 JavaScript 引擎的效能。就是使用 `arguments.callee`
+
+ function foo() {
+ arguments.callee; // 做一些在這個函數物件
+ arguments.callee.caller; // 然後呼叫這個函數物件
+ }
+
+ function bigLoop() {
+ for(var i = 0; i < 100000; i++) {
+ foo(); // 通常會在內聯
+ }
+ }
+
+在上面的程式中, `foo` 不再是一個單存的互聯函數
+因為它需要知道他自己和它的調用者。
+這不僅減低了它的性能,而且還破壞的封裝
+
+**強烈建議不要使用** `arguments.callee` 或是其他它的屬性
+
+> **ES5 Note:** 在嚴格的模式下 `arguments.callee` 會丟出一個 `TypeError`, 因為這種方法已經被廢除了
+
+[1]: http://en.wikipedia.org/wiki/Inlining
+
+
View
0  doc/zh(Trandition)/function/closures.md → doc/zh-TW/function/closures.md
File renamed without changes
View
0  doc/zh(Trandition)/function/constructors.md → doc/zh-TW/function/constructors.md
File renamed without changes
View
0  doc/zh(Trandition)/function/general.md → doc/zh-TW/function/general.md
File renamed without changes
View
0  doc/zh(Trandition)/function/scopes.md → doc/zh-TW/function/scopes.md
File renamed without changes
View
0  doc/zh(Trandition)/function/this.md → doc/zh-TW/function/this.md
File renamed without changes
View
0  doc/zh(Trandition)/index.json → doc/zh-TW/index.json
File renamed without changes
View
0  doc/zh(Trandition)/intro/index.md → doc/zh-TW/intro/index.md
File renamed without changes
View
0  doc/zh(Trandition)/object/forinloop.md → doc/zh-TW/object/forinloop.md
File renamed without changes
View
0  doc/zh(Trandition)/object/general.md → doc/zh-TW/object/general.md
File renamed without changes
View
0  doc/zh(Trandition)/object/hasownproperty.md → doc/zh-TW/object/hasownproperty.md
File renamed without changes
View
0  doc/zh(Trandition)/object/prototype.md → doc/zh-TW/object/prototype.md
File renamed without changes
View
0  doc/zh(Trandition)/other/timeouts.md → doc/zh-TW/other/timeouts.md
File renamed without changes
View
0  doc/zh(Trandition)/types/casting.md → doc/zh-TW/types/casting.md
File renamed without changes
View
0  doc/zh(Trandition)/types/equality.md → doc/zh-TW/types/equality.md
File renamed without changes
View
0  doc/zh(Trandition)/types/instanceof.md → doc/zh-TW/types/instanceof.md
File renamed without changes
View
0  doc/zh(Trandition)/types/typeof.md → doc/zh-TW/types/typeof.md
File renamed without changes
View
1,913 site/zh-TW/index.html
@@ -0,0 +1,1913 @@
+<!DOCTYPE html><html lang="zh-TW"><head><title>JavaScript Garden</title><meta charset="utf-8"><meta name="description" content="A Guide to JavaScript's Quirks and Flaws."><link rel="stylesheet" href="../style/garden.css" media="all"><link rel="stylesheet" href="../style/print.css" media="print"><!--[if lt IE 9]>
+<script src="javascript/html5.js"></script>
+<![endif]-->
+</head><body><!-- Navigation--><nav id="nav_main"><div><ul><li><a href="/JavaScript-Garden/" title="JavaScript Garden in English">en</a></li><li><a href="/JavaScript-Garden/es" title="JavaScript Garden es Español">es</a></li><li><a href="/JavaScript-Garden/fi" title="JavaScript-puutarha suomeksi">fi</a></li><li><a href="/JavaScript-Garden/ja" title="JavaScript Garden in Japanese">ja</a></li><li><a href="/JavaScript-Garden/ko" title="JavaScript Garden">ko</a></li><li><a href="/JavaScript-Garden/pl" title="JavaScript Garden - ogród JavaScript po polsku">pl</a></li><li><a href="/JavaScript-Garden/ru" title="JavaScript Гарден по-русски">ru</a></li><li><a href="/JavaScript-Garden/tr" title="JavaScript Garden Türkçe">tr</a></li><li><a href="/JavaScript-Garden/zh" title="JavaScript Garden 中文翻译">zh</a></li></ul><a id="top" href="#intro" title="Back to top">#top</a><a id="hide_menu" class="tablet">Hide Menu</a></div><ul><li class="nav_intro"><h1><a href="#intro">Intro</a></h1><ul></ul></li><li class="nav_object"><h1><a href="#object">Objects</a></h1><ul><li><a href="#object.general">Object Usage and Properties</a></li><li><a href="#object.prototype">The Prototype</a></li><li><a href="#object.hasownproperty"><code>hasOwnProperty</code></a></li><li><a href="#object.forinloop">The <code>for in</code> Loop</a></li></ul></li><li class="nav_function"><h1><a href="#function">Functions</a></h1><ul><li><a href="#function.general">Function Declarations and Expressions</a></li><li><a href="#function.this">How <code>this</code> Works</a></li><li><a href="#function.closures">Closures and References</a></li><li><a href="#function.arguments"><code>arguments</code> 物件</a></li><li><a href="#function.constructors">Constructors</a></li><li><a href="#function.scopes">Scopes and Namespaces</a></li></ul></li><li class="nav_array"><h1><a href="#array">Arrays</a></h1><ul><li><a href="#array.general">Array 迴圈和屬性</a></li><li><a href="#array.constructor"><code>Array</code> 的建構函式</a></li></ul></li><li class="nav_types"><h1><a href="#types">Types</a></h1><ul><li><a href="#types.equality">Equality and Comparisons</a></li><li><a href="#types.typeof">The <code>typeof</code> Operator</a></li><li><a href="#types.instanceof">The <code>instanceof</code> Operator</a></li><li><a href="#types.casting">Type Casting</a></li></ul></li><li class="nav_core"><h1><a href="#core">Core</a></h1><ul><li><a href="#core.eval">為什麼不要使用 <code>eval</code></a></li><li><a href="#core.undefined"><code>undefined</code> 和 <code>null</code></a></li><li><a href="#core.semicolon">自動插入分號</a></li><li><a href="#core.delete">The <code>delete</code> Operator</a></li></ul></li><li class="nav_other"><h1><a href="#other">Other</a></h1><ul><li><a href="#other.timeouts"><code>setTimeout</code> and <code>setInterval</code></a></li></ul></li></ul></nav><!-- Mobile navigation--><nav id="nav_mobile"><a id="nav_prev_section" href="#">prev section<span class="nav_section_name">section name</span></a><a id="nav_next_section" href="#">next section<span class="nav_section_name">section name</span></a><a id="show_menu">show menu</a></nav><!-- Sections--><section id="intro"><!-- Introduction--><header id="intro.intro"><h1>Intro</h1><div><p><strong>JavaScript Garden</strong> is a growing collection of documentation about the most
+quirky parts of the JavaScript programming language. It gives advice to
+avoid common mistakes and subtle bugs, as well as performance issues and bad
+practices, that non-expert JavaScript programmers may encounter on their
+endeavours into the depths of the language.</p>
+
+<p>JavaScript Garden does <strong>not</strong> aim to teach you JavaScript. Former knowledge
+of the language is strongly recommended in order to understand the topics covered
+in this guide. In order to learn the basics of the language, please head over to
+the excellent <a href="https://developer.mozilla.org/en/JavaScript/Guide">guide</a> on the Mozilla Developer Network.</p>
+
+<h2>The Authors</h2>
+
+<p>This guide is the work of two lovely <a href="http://stackoverflow.com/">Stack Overflow</a> users, <a href="http://stackoverflow.com/users/170224/ivo-wetzel">Ivo Wetzel</a>
+(Writing) and <a href="http://stackoverflow.com/users/313758/yi-jiang">Zhang Yi Jiang</a> (Design).</p>
+
+<h2>Contributors</h2>
+
+<ul>
+<li><a href="https://github.com/caio">Caio Romão</a> (Spelling corrections)</li>
+<li><a href="https://github.com/blixt">Andreas Blixt</a> (Language corrections)</li>
+</ul>
+
+<h2>Hosting</h2>
+
+<p>JavaScript Garden is hosted on GitHub, but <a href="http://cramerdev.com/">Cramer Development</a> supports us
+with a mirror at <a href="http://javascriptgarden.info/">JavaScriptGarden.info</a>.</p>
+
+<h2>License</h2>
+
+<p>JavaScript Garden is published under the <a href="https://github.com/BonsaiDen/JavaScript-Garden/blob/next/LICENSE">MIT license</a> and hosted on
+<a href="https://github.com/BonsaiDen/JavaScript-Garden">GitHub</a>. If you find errors or typos please <a href="https://github.com/BonsaiDen/JavaScript-Garden/issues">file an issue</a> or a pull
+request on the repository. You can also find us in the <a href="http://chat.stackoverflow.com/rooms/17/javascript">JavaScript room</a> on
+Stack Overflow chat.</p></div></header><!-- Articles--></section><section id="object"><!-- Introduction--><header id="object.intro"><h1>Objects</h1></header><!-- Articles--><article id="object.general"><h2>Object Usage and Properties</h2><div><p>Everything in JavaScript acts like an object, with the only two exceptions being
+<a href="#core.undefined"><code>null</code></a> and <a href="#core.undefined"><code>undefined</code></a>.</p>
+
+<pre><code>false.toString(); // &#39;false&#39;
+[1, 2, 3].toString(); // &#39;1,2,3&#39;
+
+function Foo(){}
+Foo.bar = 1;
+Foo.bar; // 1
+</code></pre>
+
+<p>A common misconception is that number literals cannot be used as
+objects. That is because a flaw in JavaScript&#39;s parser tries to parse the <em>dot
+notation</em> on a number as a floating point literal.</p>
+
+<pre><code>2.toString(); // raises SyntaxError
+</code></pre>
+
+<p>There are a couple of workarounds that can be used to make number literals act
+as objects too.</p>
+
+<pre><code>2..toString(); // the second point is correctly recognized
+2 .toString(); // note the space left to the dot
+(2).toString(); // 2 is evaluated first
+</code></pre>
+
+</div><div><h3>Objects as a Data Type</h3>
+
+<p>Objects in JavaScript can also be used as <a href="http://en.wikipedia.org/wiki/Hashmap"><em>Hashmaps</em></a>; they mainly consist
+of named properties mapping to values.</p>
+
+<p>Using an object literal - <code>{}</code> notation - it is possible to create a
+plain object. This new object <a href="#object.prototype">inherits</a> from <code>Object.prototype</code> and
+does not have <a href="#object.hasownproperty">own properties</a> defined.</p>
+
+<pre><code>var foo = {}; // a new empty object
+
+// a new object with a &#39;test&#39; property with value 12
+var bar = {test: 12};
+</code></pre>
+
+</div><div><h3>Accessing Properties</h3>
+
+<p>The properties of an object can be accessed in two ways, via either the dot
+notation or the square bracket notation.</p>
+
+<pre><code>var foo = {name: &#39;kitten&#39;}
+foo.name; // kitten
+foo[&#39;name&#39;]; // kitten
+
+var get = &#39;name&#39;;
+foo[get]; // kitten
+
+foo.1234; // SyntaxError
+foo[&#39;1234&#39;]; // works
+</code></pre>
+
+<p>The notations work almost identically, with the only difference being that the
+square bracket notation allows for dynamic setting of properties and
+the use of property names that would otherwise lead to a syntax error.</p>
+
+</div><div><h3>Deleting Properties</h3>
+
+<p>The only way to remove a property from an object is to use the <code>delete</code>
+operator; setting the property to <code>undefined</code> or <code>null</code> only removes the
+<em>value</em> associated with the property, but not the <em>key</em>.</p>
+
+<pre><code>var obj = {
+ bar: 1,
+ foo: 2,
+ baz: 3
+};
+obj.bar = undefined;
+obj.foo = null;
+delete obj.baz;
+
+for(var i in obj) {
+ if (obj.hasOwnProperty(i)) {
+ console.log(i, &#39;&#39; + obj[i]);
+ }
+}
+</code></pre>
+
+<p>The above outputs both <code>bar undefined</code> and <code>foo null</code> - only <code>baz</code> was
+removed and is therefore missing from the output.</p>
+
+</div><div><h3>Notation of Keys</h3>
+
+<pre><code>var test = {
+ &#39;case&#39;: &#39;I am a keyword, so I must be notated as a string&#39;,
+ delete: &#39;I am a keyword, so me too&#39; // raises SyntaxError
+};
+</code></pre>
+
+<p>Object properties can be both notated as plain characters and as strings. Due to
+another mis-design in JavaScript&#39;s parser, the above will throw
+a <code>SyntaxError</code> prior to ECMAScript 5.</p>
+
+<p>This error arises from the fact that <code>delete</code> is a <em>keyword</em>; therefore, it must be
+notated as a <em>string literal</em> to ensure that it will be correctly interpreted by
+older JavaScript engines.</p></div></article><article id="object.prototype"><h2>The Prototype</h2><div><p>JavaScript does not feature a classical inheritance model; instead, it uses a
+<em>prototypal</em> one. </p>
+
+<p>While this is often considered to be one of JavaScript&#39;s weaknesses, the
+prototypal inheritance model is in fact more powerful than the classic model.
+It is, for example, fairly trivial to build a classic model on top of a
+prototypal model, while the other way around is a far more difficult task.</p>
+
+<p>JavaScript is the only widely used language that features prototypal
+inheritance, so it can take time to adjust to the differences between the two
+models. </p>
+
+<p>The first major difference is that inheritance in JavaScript uses <em>prototype
+chains</em>.</p>
+
+<aside>
+ <p><strong>Note:</strong> Simply using <code>Bar.prototype = Foo.prototype</code> will result in both objects
+ sharing the <strong>same</strong> prototype. Therefore, changes to either object&#39;s prototype
+ will affect the prototype of the other as well, which in most cases is not the
+ desired effect.</p>
+</aside>
+
+<pre><code>function Foo() {
+ this.value = 42;
+}
+Foo.prototype = {
+ method: function() {}
+};
+
+function Bar() {}
+
+// Set Bar&#39;s prototype to a new instance of Foo
+Bar.prototype = new Foo();
+Bar.prototype.foo = &#39;Hello World&#39;;
+
+// Make sure to list Bar as the actual constructor
+Bar.prototype.constructor = Bar;
+
+var test = new Bar() // create a new bar instance
+
+// The resulting prototype chain
+test [instance of Bar]
+ Bar.prototype [instance of Foo]
+ { foo: &#39;Hello World&#39; }
+ Foo.prototype
+ { method: ... }
+ Object.prototype
+ { toString: ... /* etc. */ }
+</code></pre>
+
+<p>In the code above, the object <code>test</code> will inherit from both <code>Bar.prototype</code> and
+<code>Foo.prototype</code>; hence, it will have access to the function <code>method</code> that was
+defined on <code>Foo</code>. It will also have access to the property <code>value</code> of the
+<strong>one</strong> <code>Foo</code> instance that is its prototype. It is important to note that <code>new
+Bar()</code> does <strong>not</strong> create a new <code>Foo</code> instance, but reuses the one assigned to
+its prototype; thus, all <code>Bar</code> instances will share the <strong>same</strong> <code>value</code> property.</p>
+
+<aside>
+ <p><strong>Note:</strong> Do <strong>not</strong> use <code>Bar.prototype = Foo</code>, since it will not point to
+ the prototype of <code>Foo</code> but rather to the function object <code>Foo</code>. So the
+ prototype chain will go over <code>Function.prototype</code> and not <code>Foo.prototype</code>;
+ therefore, <code>method</code> will not be on the prototype chain.</p>
+</aside>
+
+</div><div><h3>Property Lookup</h3>
+
+<p>When accessing the properties of an object, JavaScript will traverse the
+prototype chain <strong>upwards</strong> until it finds a property with the requested name.</p>
+
+<p>If it reaches the top of the chain - namely <code>Object.prototype</code> - and still
+hasn&#39;t found the specified property, it will return the value
+<a href="#core.undefined">undefined</a> instead.</p>
+
+</div><div><h3>The Prototype Property</h3>
+
+<p>While the prototype property is used by the language to build the prototype
+chains, it is still possible to assign <strong>any</strong> given value to it. However,
+primitives will simply get ignored when assigned as a prototype.</p>
+
+<pre><code>function Foo() {}
+Foo.prototype = 1; // no effect
+</code></pre>
+
+<p>Assigning objects, as shown in the example above, will work, and allows for dynamic
+creation of prototype chains.</p>
+
+</div><div><h3>Performance</h3>
+
+<p>The lookup time for properties that are high up on the prototype chain can have
+a negative impact on performance, and this may be significant in code where
+performance is critical. Additionally, trying to access non-existent properties
+will always traverse the full prototype chain. </p>
+
+<p>Also, when <a href="#object.forinloop">iterating</a> over the properties of an object
+<strong>every</strong> property that is on the prototype chain will be enumerated.</p>
+
+</div><div><h3>Extension of Native Prototypes</h3>
+
+<p>One mis-feature that is often used is to extend <code>Object.prototype</code> or one of the
+other built in prototypes.</p>
+
+<p>This technique is called <a href="http://en.wikipedia.org/wiki/Monkey_patch">monkey patching</a> and breaks <em>encapsulation</em>. While
+used by popular frameworks such as <a href="http://prototypejs.org/">Prototype</a>, there is still no good
+reason for cluttering built-in types with additional <em>non-standard</em> functionality.</p>
+
+<p>The <strong>only</strong> good reason for extending a built-in prototype is to backport
+the features of newer JavaScript engines; for example,
+<a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach"><code>Array.forEach</code></a>.</p>
+
+</div><div><h3>In Conclusion</h3>
+
+<p>It is <strong>essential</strong> to understand the prototypal inheritance model before
+writing complex code that makes use of it. Also, be aware of the length of the
+prototype chains in your code and break them up if necessary to avoid possible
+performance problems. Further, the native prototypes should <strong>never</strong> be
+extended unless it is for the sake of compatibility with newer JavaScript
+features.</p></div></article><article id="object.hasownproperty"><h2><code>hasOwnProperty</code></h2><div><p>To check whether an object has a property defined on <em>itself</em> and not somewhere
+on its <a href="#object.prototype">prototype chain</a>, it is necessary to use the
+<code>hasOwnProperty</code> method which all objects inherit from <code>Object.prototype</code>.</p>
+
+<aside>
+ <p><strong>Note:</strong> It is <strong>not</strong> enough to check whether a property is <code>undefined</code>. The
+ property might very well exist, but its value just happens to be set to
+ <code>undefined</code>.</p>
+</aside>
+
+<p><code>hasOwnProperty</code> is the only thing in JavaScript which deals with properties and
+does <strong>not</strong> traverse the prototype chain.</p>
+
+<pre><code>// Poisoning Object.prototype
+Object.prototype.bar = 1;
+var foo = {goo: undefined};
+
+foo.bar; // 1
+&#39;bar&#39; in foo; // true
+
+foo.hasOwnProperty(&#39;bar&#39;); // false
+foo.hasOwnProperty(&#39;goo&#39;); // true
+</code></pre>
+
+<p>Only <code>hasOwnProperty</code> will give the correct and expected result; this is
+essential when iterating over the properties of any object. There is <strong>no</strong> other
+way to exclude properties that are not defined on the object itself, but
+somewhere on its prototype chain. </p>
+
+</div><div><h3><code>hasOwnProperty</code> as a Property</h3>
+
+<p>JavaScript does not protect the property name <code>hasOwnProperty</code>; thus, if the
+possibility exists that an object might have a property with this name, it is
+necessary to use an <em>external</em> <code>hasOwnProperty</code> to get correct results.</p>
+
+<pre><code>var foo = {
+ hasOwnProperty: function() {
+ return false;
+ },
+ bar: &#39;Here be dragons&#39;
+};
+
+foo.hasOwnProperty(&#39;bar&#39;); // always returns false
+
+// Use another Object&#39;s hasOwnProperty and call it with &#39;this&#39; set to foo
+({}).hasOwnProperty.call(foo, &#39;bar&#39;); // true
+
+// It&#39;s also possible to use the hasOwnProperty property from the Object property for this purpose
+Object.prototype.hasOwnProperty.call(obj, &#39;bar&#39;); // true
+</code></pre>
+
+</div><div><h3>In Conclusion</h3>
+
+<p>Using <code>hasOwnProperty</code> is the <strong>only</strong> reliable method to check for the
+existence of a property on an object. It is recommended that <code>hasOwnProperty</code>
+is used in <strong>every</strong> <a href="#object.forinloop"><code>for in</code> loop</a> to avoid errors from
+extended native <a href="#object.prototype">prototypes</a>.</p></div></article><article id="object.forinloop"><h2>The <code>for in</code> Loop</h2><div><p>Just like the <code>in</code> operator, the <code>for in</code> loop traverses the prototype
+chain when iterating over the properties of an object.</p>
+
+<aside>
+ <p><strong>Note:</strong> The <code>for in</code> loop will <strong>not</strong> iterate over any properties that
+ have their <code>enumerable</code> attribute set to <code>false</code>; for example, the <code>length</code>
+ property of an array.</p>
+</aside>
+
+<pre><code>// Poisoning Object.prototype
+Object.prototype.bar = 1;
+
+var foo = {moo: 2};
+for(var i in foo) {
+ console.log(i); // prints both bar and moo
+}
+</code></pre>
+
+<p>Since it is not possible to change the behavior of the <code>for in</code> loop itself, it
+is necessary to filter out the unwanted properties inside the loop body;
+this is done using the <a href="#object.hasownproperty"><code>hasOwnProperty</code></a> method of
+<code>Object.prototype</code>.</p>
+
+<aside>
+ <p><strong>Note:</strong> Since <code>for in</code> always traverses the complete prototype chain, it
+ will get slower with each additional layer of inheritance added to an object.</p>
+</aside>
+
+</div><div><h3>Using <code>hasOwnProperty</code> for Filtering</h3>
+
+<pre><code>// still the foo from above
+for(var i in foo) {
+ if (foo.hasOwnProperty(i)) {
+ console.log(i);
+ }
+}
+</code></pre>
+
+<p>This version is the only correct one to use. Due to the use of <code>hasOwnProperty</code>, it
+will <strong>only</strong> print out <code>moo</code>. When <code>hasOwnProperty</code> is left out, the code is
+prone to errors in cases where the native prototypes - e.g. <code>Object.prototype</code> -
+have been extended.</p>
+
+<p>One widely used framework that extends <code>Object.prototype</code> is <a href="http://www.prototypejs.org/">Prototype</a>.
+When this framework is included, <code>for in</code> loops that do not use
+<code>hasOwnProperty</code> are guaranteed to break.</p>
+
+</div><div><h3>In Conclusion</h3>
+
+<p>It is recommended to <strong>always</strong> use <code>hasOwnProperty</code>. Assumptions should never
+be made about the environment the code is running in, or whether the native
+prototypes have been extended or not.</p></div></article></section><section id="function"><!-- Introduction--><header id="function.intro"><h1>Functions</h1></header><!-- Articles--><article id="function.general"><h2>Function Declarations and Expressions</h2><div><p>Functions in JavaScript are first class objects. That means they can be
+passed around like any other value. One common use of this feature is to pass
+an <em>anonymous function</em> as a callback to another, possibly an asynchronous function.</p>
+
+</div><div><h3>The <code>function</code> Declaration</h3>
+
+<pre><code>function foo() {}
+</code></pre>
+
+<p>The above function gets <a href="#function.scopes">hoisted</a> before the execution of the
+program starts; thus, it is available <em>everywhere</em> in the scope it was
+<em>defined</em>, even if called before the actual definition in the source.</p>
+
+<pre><code>foo(); // Works because foo was created before this code runs
+function foo() {}
+</code></pre>
+
+</div><div><h3>The <code>function</code> Expression</h3>
+
+<pre><code>var foo = function() {};
+</code></pre>
+
+<p>This example assigns the unnamed and <em>anonymous</em> function to the variable <code>foo</code>. </p>
+
+<pre><code>foo; // &#39;undefined&#39;
+foo(); // this raises a TypeError
+var foo = function() {};
+</code></pre>
+
+<p>Due to the fact that <code>var</code> is a declaration that hoists the variable name <code>foo</code>
+before the actual execution of the code starts, <code>foo</code> is already defined when
+the script gets executed.</p>
+
+<p>But since assignments only happen at runtime, the value of <code>foo</code> will default
+to <a href="#core.undefined">undefined</a> before the corresponding code is executed.</p>
+
+</div><div><h3>Named Function Expression</h3>
+
+<p>Another special case is the assignment of named functions.</p>
+
+<pre><code>var foo = function bar() {
+ bar(); // Works
+}
+bar(); // ReferenceError
+</code></pre>
+
+<p>Here, <code>bar</code> is not available in the outer scope, since the function only gets
+assigned to <code>foo</code>; however, inside of <code>bar</code>, it is available. This is due to
+how <a href="#function.scopes">name resolution</a> in JavaScript works, the name of the
+function is <em>always</em> made available in the local scope of the function itself.</p></div></article><article id="function.this"><h2>How <code>this</code> Works</h2><div><p>JavaScript has a different concept of what the special name <code>this</code> refers to
+than most other programming languages. There are exactly <strong>five</strong> different
+ways in which the value of <code>this</code> can be bound in the language.</p>
+
+</div><div><h3>The Global Scope</h3>
+
+<pre><code>this;
+</code></pre>
+
+<p>When using <code>this</code> in global scope, it will simply refer to the <em>global</em> object.</p>
+
+</div><div><h3>Calling a Function</h3>
+
+<pre><code>foo();
+</code></pre>
+
+<p>Here, <code>this</code> will again refer to the <em>global</em> object.</p>
+
+<aside class="es5"><p><strong>ES5 Note:</strong> In strict mode, the global case <strong>no longer</strong> exists.
+ <code>this</code> will instead have the value of <code>undefined</code> in that case.</p>
+</aside>
+
+</div><div><h3>Calling a Method</h3>
+
+<pre><code>test.foo();
+</code></pre>
+
+<p>In this example, <code>this</code> will refer to <code>test</code>.</p>
+
+</div><div><h3>Calling a Constructor</h3>
+
+<pre><code>new foo();
+</code></pre>
+
+<p>A function call that is preceded by the <code>new</code> keyword acts as
+a <a href="#function.constructors">constructor</a>. Inside the function, <code>this</code> will refer
+to a <em>newly created</em> <code>Object</code>.</p>
+
+</div><div><h3>Explicit Setting of <code>this</code></h3>
+
+<pre><code>function foo(a, b, c) {}
+
+var bar = {};
+foo.apply(bar, [1, 2, 3]); // array will expand to the below
+foo.call(bar, 1, 2, 3); // results in a = 1, b = 2, c = 3
+</code></pre>
+
+<p>When using the <code>call</code> or <code>apply</code> methods of <code>Function.prototype</code>, the value of
+<code>this</code> inside the called function gets <strong>explicitly set</strong> to the first argument
+of the corresponding function call.</p>
+
+<p>As a result, in the above example the <em>method case</em> does <strong>not</strong> apply, and <code>this</code>
+inside of <code>foo</code> will be set to <code>bar</code>.</p>
+
+<aside>
+ <p><strong>Note:</strong> <code>this</code> <strong>cannot</strong> be used to refer to the object inside of an <code>Object</code>
+ literal. So <code>var obj = {me: this}</code> will <strong>not</strong> result in <code>me</code> referring to
+ <code>obj</code>, since <code>this</code> only gets bound by one of the five listed cases.</p>
+</aside>
+
+</div><div><h3>Common Pitfalls</h3>
+
+<p>While most of these cases make sense, the first can be considered another
+mis-design of the language because it <strong>never</strong> has any practical use.</p>
+
+<pre><code>Foo.method = function() {
+ function test() {
+ // this is set to the global object
+ }
+ test();
+}
+</code></pre>
+
+<p>A common misconception is that <code>this</code> inside of <code>test</code> refers to <code>Foo</code>; while in
+fact, it <strong>does not</strong>.</p>
+
+<p>In order to gain access to <code>Foo</code> from within <code>test</code>, it is necessary to create a
+local variable inside of <code>method</code> that refers to <code>Foo</code>.</p>
+
+<pre><code>Foo.method = function() {
+ var that = this;
+ function test() {
+ // Use that instead of this here
+ }
+ test();
+}
+</code></pre>
+
+<p><code>that</code> is just a normal variable name, but it is commonly used for the reference to an
+outer <code>this</code>. In combination with <a href="#function.closures">closures</a>, it can also
+be used to pass <code>this</code> values around.</p>
+
+</div><div><h3>Assigning Methods</h3>
+
+<p>Another thing that does <strong>not</strong> work in JavaScript is function aliasing, which is
+<strong>assigning</strong> a method to a variable.</p>
+
+<pre><code>var test = someObject.methodTest;
+test();
+</code></pre>
+
+<p>Due to the first case, <code>test</code> now acts like a plain function call; therefore,
+<code>this</code> inside it will no longer refer to <code>someObject</code>.</p>
+
+<p>While the late binding of <code>this</code> might seem like a bad idea at first, in
+fact, it is what makes <a href="#object.prototype">prototypal inheritance</a> work. </p>
+
+<pre><code>function Foo() {}
+Foo.prototype.method = function() {};
+
+function Bar() {}
+Bar.prototype = Foo.prototype;
+
+new Bar().method();
+</code></pre>
+
+<p>When <code>method</code> gets called on an instance of <code>Bar</code>, <code>this</code> will now refer to that
+very instance. </p></div></article><article id="function.closures"><h2>Closures and References</h2><div><p>One of JavaScript&#39;s most powerful features is the availability of <em>closures</em>.
+With closures, scopes <strong>always</strong> keep access to the outer scope, in which they
+were defined. Since the only scoping that JavaScript has is
+<a href="#function.scopes">function scope</a>, all functions, by default, act as closures.</p>
+
+</div><div><h3>Emulating private variables</h3>
+
+<pre><code>function Counter(start) {
+ var count = start;
+ return {
+ increment: function() {
+ count++;
+ },
+
+ get: function() {
+ return count;
+ }
+ }
+}
+
+var foo = Counter(4);
+foo.increment();
+foo.get(); // 5
+</code></pre>
+
+<p>Here, <code>Counter</code> returns <strong>two</strong> closures: the function <code>increment</code> as well as
+the function <code>get</code>. Both of these functions keep a <strong>reference</strong> to the scope of
+<code>Counter</code> and, therefore, always keep access to the <code>count</code> variable that was
+defined in that scope.</p>
+
+</div><div><h3>Why Private Variables Work</h3>
+
+<p>Since it is not possible to reference or assign scopes in JavaScript, there is
+<strong>no</strong> way of accessing the variable <code>count</code> from the outside. The only way to
+interact with it is via the two closures.</p>
+
+<pre><code>var foo = new Counter(4);
+foo.hack = function() {
+ count = 1337;
+};
+</code></pre>
+
+<p>The above code will <strong>not</strong> change the variable <code>count</code> in the scope of <code>Counter</code>,
+since <code>foo.hack</code> was not defined in <strong>that</strong> scope. It will instead create - or
+override - the <em>global</em> variable <code>count</code>.</p>
+
+</div><div><h3>Closures Inside Loops</h3>
+
+<p>One often made mistake is to use closures inside of loops, as if they were
+copying the value of the loop&#39;s index variable.</p>
+
+<pre><code>for(var i = 0; i &lt; 10; i++) {
+ setTimeout(function() {
+ console.log(i);
+ }, 1000);
+}
+</code></pre>
+
+<p>The above will <strong>not</strong> output the numbers <code>0</code> through <code>9</code>, but will simply print
+the number <code>10</code> ten times.</p>
+
+<p>The <em>anonymous</em> function keeps a <strong>reference</strong> to <code>i</code>. At the time
+<code>console.log</code> gets called, the <code>for loop</code> has already finished, and the value of
+<code>i</code> as been set to <code>10</code>.</p>
+
+<p>In order to get the desired behavior, it is necessary to create a <strong>copy</strong> of
+the value of <code>i</code>.</p>
+
+</div><div><h3>Avoiding the Reference Problem</h3>
+
+<p>In order to copy the value of the loop&#39;s index variable, it is best to use an
+<a href="#function.scopes">anonymous wrapper</a>.</p>
+
+<pre><code>for(var i = 0; i &lt; 10; i++) {
+ (function(e) {
+ setTimeout(function() {
+ console.log(e);
+ }, 1000);
+ })(i);
+}
+</code></pre>
+
+<p>The anonymous outer function gets called immediately with <code>i</code> as its first
+argument and will receive a copy of the <strong>value</strong> of <code>i</code> as its parameter <code>e</code>.</p>
+
+<p>The anonymous function that gets passed to <code>setTimeout</code> now has a reference to
+<code>e</code>, whose value does <strong>not</strong> get changed by the loop.</p>
+
+<p>There is another possible way of achieving this, which is to return a function
+from the anonymous wrapper that will then have the same behavior as the code
+above.</p>
+
+<pre><code>for(var i = 0; i &lt; 10; i++) {
+ setTimeout((function(e) {
+ return function() {
+ console.log(e);
+ }
+ })(i), 1000)
+}
+</code></pre></div></article><article id="function.arguments"><h2><code>arguments</code> 物件</h2><div><p>所有函數在 JavaScript 中都可以有個特別的參數 <code>arguments</code>。
+這個變數掌握了一列傳入函數中的參數</p>
+
+<aside>
+ <p><strong>注意:</strong> 由於 <code>arguments</code> 都已經在函數中被定義了
+ 經過 <code>var</code> 定義或是用 <code>arguments</code> 宣告參數
+ <code>arguments</code> 物件都不會被建立</p>
+</aside>
+
+<p><code>arguments</code> 物件 <strong>不是</strong> 一個 <code>Array</code>,雖然都有很多 Array 的語法 - 就像是 <code>length</code> 屬性 - 但是它沒有繼承來自 <code>Array.prototype</code> 事實上它繼承 <code>object</code>。</p>
+
+<p>由於這些原因,這 <strong>不可能</strong> 用 Array 的一些功能像是 <code>push</code>、<code>pop</code>或是 <code>slice</code> 在 <code>arguments</code>。
+但是像 <code>for</code> 迴圈這些迴圈都是可以用的,如果真的需要使用一些標準的 <code>Array</code> 功能可以先把它轉成真的 <code>Array</code> 再去使用。</p>
+
+</div><div><h3>轉為 Array</h3>
+
+<p>下面的程式可以回傳一個新的 <code>Array</code> 包含所有的元素在 <code>Arguments</code>的物件中</p>
+
+<pre><code>Array.prototype.slice.call(arguments);
+</code></pre>
+
+<p>這種轉化方式比較 <strong>慢</strong> ,不建議使用這種作法如果再追求效率的程式中。</p>
+
+</div><div><h3>傳遞參數</h3>
+
+<p>下面是建議用這種方式去傳參數到另一個函數</p>
+
+<pre><code>function foo() {
+ bar.apply(null, arguments);
+}
+function bar(a, b, c) {
+ // 在這裡做一些事情
+}
+</code></pre>
+
+<p>另一個技巧是用 <code>call</code> 和 <code>apply</code> 放在一起來創造一個更快的解綁定包裝器</p>
+
+<pre><code>function Foo() {}
+
+Foo.prototype.method = function(a, b, c) {
+ console.log(this, a, b, c);
+};
+
+// Create an unbound version of "method"
+// 輸入的參數: this, arg1, arg2...argN
+Foo.method = function() {
+
+ // 結果: Foo.prototype.method.call(this, arg1, arg2... argN)
+ Function.call.apply(Foo.prototype.method, arguments);
+};
+</code></pre>
+
+</div><div><h3>自動更新</h3>
+
+<p>在 <code>Arguments</code> 物件創造的 <em>getter</em> 和 <em>setter</em> 的函數方法,可以被視為原本函數的變數。</p>
+
+<p>因此,改變了一個變數會跟著改變它的值而且也間接的改變稻香對應的 <code>arguments</code> 的物件,反之亦然。</p>
+
+<pre><code>function foo(a, b, c) {
+ arguments[0] = 2;
+ a; // 2
+
+ b = 4;
+ arguments[1]; // 4
+
+ var d = c;
+ d = 9;
+ c; // 3
+}
+foo(1, 2, 3);
+</code></pre>
+
+</div><div><h3>性能</h3>
+
+<p><code>arguments</code> 總是會被宣告,但除了兩個情況,一個是在一個函式中或是在其中一個參入。而不論他是否有被使用。</p>
+
+<p><em>getters</em> 和 <em>setter</em> 會永遠被創造。然而,他們對任何性能都沒有影響,除非對它的屬性有多次的訪問</p>
+
+<aside class="es5"><p><strong>ES5 提示:</strong> 那些 <em>getters</em> 和 <em>setters</em> 在嚴格的模式像不會被建立</p>
+</aside>
+
+<p>然而會有一種情況來降低 JavaScript 引擎的效能。就是使用 <code>arguments.callee</code>。</p>
+
+<pre><code>function foo() {
+ arguments.callee; // 做一些在這個函數物件
+ arguments.callee.caller; // 然後呼叫這個函數物件
+}
+
+function bigLoop() {
+ for(var i = 0; i &lt; 100000; i++) {
+ foo(); // 通常會在內聯
+ }
+}
+</code></pre>
+
+<p>在上面的程式中, <code>foo</code> 不再是一個單存的互聯函數
+因為它需要知道他自己和它的調用者。
+這不僅減低了它的性能,而且還破壞的封裝</p>
+
+<p><strong>強烈建議不要使用</strong> <code>arguments.callee</code> 或是其他它的屬性</p>
+
+<aside class="es5"><p><strong>ES5 Note:</strong> 在嚴格的模式下 <code>arguments.callee</code> 會丟出一個 <code>TypeError</code>, 因為這種方法已經被廢除了</p>
+</aside></div></article><article id="function.constructors"><h2>Constructors</h2><div><p>Constructors in JavaScript are yet again different from many other languages. Any
+function call that is preceded by the <code>new</code> keyword acts as a constructor.</p>
+
+<p>Inside the constructor - the called function - the value of <code>this</code> refers to a
+newly created object. The <a href="#object.prototype">prototype</a> of this <strong>new</strong>
+object is set to the <code>prototype</code> of the function object that was invoked as the
+constructor.</p>
+
+<p>If the function that was called has no explicit <code>return</code> statement, then it
+implicitly returns the value of <code>this</code> - the new object. </p>
+
+<pre><code>function Foo() {
+ this.bla = 1;
+}
+
+Foo.prototype.test = function() {
+ console.log(this.bla);
+};
+
+var test = new Foo();
+</code></pre>
+
+<p>The above calls <code>Foo</code> as constructor and sets the <code>prototype</code> of the newly
+created object to <code>Foo.prototype</code>.</p>
+
+<p>In case of an explicit <code>return</code> statement, the function returns the value
+specified by that statement, but <strong>only</strong> if the return value is an <code>Object</code>.</p>
+
+<pre><code>function Bar() {
+ return 2;
+}
+new Bar(); // a new object
+
+function Test() {
+ this.value = 2;
+
+ return {
+ foo: 1
+ };
+}
+new Test(); // the returned object
+</code></pre>
+
+<p>When the <code>new</code> keyword is omitted, the function will <strong>not</strong> return a new object. </p>
+
+<pre><code>function Foo() {
+ this.bla = 1; // gets set on the global object
+}
+Foo(); // undefined
+</code></pre>
+
+<p>While the above example might still appear to work in some cases, due to the
+workings of <a href="#function.this"><code>this</code></a> in JavaScript, it will use the
+<em>global object</em> as the value of <code>this</code>.</p>
+
+</div><div><h3>Factories</h3>
+
+<p>In order to be able to omit the <code>new</code> keyword, the constructor function has to
+explicitly return a value.</p>
+
+<pre><code>function Bar() {
+ var value = 1;
+ return {
+ method: function() {
+ return value;
+ }
+ }
+}
+Bar.prototype = {
+ foo: function() {}
+};
+
+new Bar();
+Bar();
+</code></pre>
+
+<p>Both calls to <code>Bar</code> return the same thing, a newly create object that
+has a property called <code>method</code>, which is a
+<a href="#function.closures">Closure</a>.</p>
+
+<p>It should also be noted that the call <code>new Bar()</code> does <strong>not</strong> affect the
+prototype of the returned object. While the prototype will be set on the newly
+created object, <code>Bar</code> never returns that new object.</p>
+
+<p>In the above example, there is no functional difference between using and
+not using the <code>new</code> keyword.</p>
+
+</div><div><h3>Creating New Objects via Factories</h3>
+
+<p>It is often recommended to <strong>not</strong> use <code>new</code> because forgetting its use may
+lead to bugs.</p>
+
+<p>In order to create a new object, one should rather use a factory and construct a
+new object inside of that factory.</p>
+
+<pre><code>function Foo() {
+ var obj = {};
+ obj.value = &#39;blub&#39;;
+
+ var private = 2;
+ obj.someMethod = function(value) {
+ this.value = value;
+ }
+
+ obj.getPrivate = function() {
+ return private;
+ }
+ return obj;
+}
+</code></pre>
+
+<p>While the above is robust against a missing <code>new</code> keyword and certainly makes
+the use of <a href="#function.closures">private variables</a> easier, it comes with some
+downsides.</p>
+
+<ol>
+<li>It uses more memory since the created objects do <strong>not</strong> share the methods
+on a prototype.</li>
+<li>In order to inherit, the factory needs to copy all the methods from another
+object or put that object on the prototype of the new object.</li>
+<li>Dropping the prototype chain just because of a left out <code>new</code> keyword
+is contrary to the spirit of the language.</li>
+</ol>
+
+</div><div><h3>In Conclusion</h3>
+
+<p>While omitting the <code>new</code> keyword might lead to bugs, it is certainly <strong>not</strong> a
+reason to drop the use of prototypes altogether. In the end it comes down to
+which solution is better suited for the needs of the application. It is
+especially important to choose a specific style of object creation and use it
+<strong>consistently</strong>.</p></div></article><article id="function.scopes"><h2>Scopes and Namespaces</h2><div><p>Although JavaScript deals fine with the syntax of two matching curly
+braces for blocks, it does <strong>not</strong> support block scope; hence, all that is left
+in the language is <em>function scope</em>.</p>
+
+<pre><code>function test() { // a scope
+ for(var i = 0; i &lt; 10; i++) { // not a scope
+ // count
+ }
+ console.log(i); // 10
+}
+</code></pre>
+
+<aside>
+ <p><strong>Note:</strong> When not used in an assignment, return statement or as a function
+ argument, the <code>{...}</code> notation will get interpreted as a block statement and
+ <strong>not</strong> as an object literal. This, in conjunction with
+ <a href="#core.semicolon">automatic insertion of semicolons</a>, can lead to subtle errors.</p>
+</aside>
+
+<p>There are also no distinct namespaces in JavaScript, which means that everything
+gets defined in one <em>globally shared</em> namespace.</p>
+
+<p>Each time a variable is referenced, JavaScript will traverse upwards through all
+the scopes until it finds it. In the case that it reaches the global scope and
+still has not found the requested name, it will raise a <code>ReferenceError</code>.</p>
+
+</div><div><h3>The Bane of Global Variables</h3>
+
+<pre><code>// script A
+foo = &#39;42&#39;;
+
+// script B
+var foo = &#39;42&#39;
+</code></pre>
+
+<p>The above two scripts do <strong>not</strong> have the same effect. Script A defines a
+variable called <code>foo</code> in the <em>global</em> scope, and script B defines a <code>foo</code> in the
+<em>current</em> scope.</p>
+
+<p>Again, that is <strong>not</strong> at all the <em>same effect</em>: not using <code>var</code> can have major
+implications.</p>
+
+<pre><code>// global scope
+var foo = 42;
+function test() {
+ // local scope
+ foo = 21;
+}
+test();
+foo; // 21
+</code></pre>
+
+<p>Leaving out the <code>var</code> statement inside the function <code>test</code> will override the
+value of <code>foo</code>. While this might not seem like a big deal at first, having
+thousands of lines of JavaScript and not using <code>var</code> will introduce horrible,
+hard-to-track-down bugs.</p>
+
+<pre><code>// global scope
+var items = [/* some list */];
+for(var i = 0; i &lt; 10; i++) {
+ subLoop();
+}
+
+function subLoop() {
+ // scope of subLoop
+ for(i = 0; i &lt; 10; i++) { // missing var statement
+ // do amazing stuff!
+ }
+}
+</code></pre>
+
+<p>The outer loop will terminate after the first call to <code>subLoop</code>, since <code>subLoop</code>
+overwrites the global value of <code>i</code>. Using a <code>var</code> for the second <code>for</code> loop would
+have easily avoided this error. The <code>var</code> statement should <strong>never</strong> be left out
+unless the <em>desired effect</em> is to affect the outer scope.</p>
+
+</div><div><h3>Local Variables</h3>
+
+<p>The only source for local variables in JavaScript are
+<a href="#function.general">function</a> parameters and variables declared via the
+<code>var</code> statement.</p>
+
+<pre><code>// global scope
+var foo = 1;
+var bar = 2;
+var i = 2;
+
+function test(i) {
+ // local scope of the function test
+ i = 5;
+
+ var foo = 3;
+ bar = 4;
+}
+test(10);
+</code></pre>
+
+<p>While <code>foo</code> and <code>i</code> are local variables inside the scope of the function <code>test</code>,
+the assignment of <code>bar</code> will override the global variable with the same name.</p>
+
+</div><div><h3>Hoisting</h3>
+
+<p>JavaScript <strong>hoists</strong> declarations. This means that both <code>var</code> statements and
+<code>function</code> declarations will be moved to the top of their enclosing scope.</p>
+
+<pre><code>bar();
+var bar = function() {};
+var someValue = 42;
+
+test();
+function test(data) {
+ if (false) {
+ goo = 1;
+
+ } else {
+ var goo = 2;
+ }
+ for(var i = 0; i &lt; 100; i++) {
+ var e = data[i];
+ }
+}
+</code></pre>
+
+<p>The above code gets transformed before execution starts. JavaScript moves
+the <code>var</code> statements, as well as <code>function</code> declarations, to the top of the
+nearest surrounding scope.</p>
+
+<pre><code>// var statements got moved here
+var bar, someValue; // default to &#39;undefined&#39;
+
+// the function declaration got moved up too
+function test(data) {
+ var goo, i, e; // missing block scope moves these here
+ if (false) {
+ goo = 1;
+
+ } else {
+ goo = 2;
+ }
+ for(i = 0; i &lt; 100; i++) {
+ e = data[i];
+ }
+}
+
+bar(); // fails with a TypeError since bar is still &#39;undefined&#39;
+someValue = 42; // assignments are not affected by hoisting
+bar = function() {};
+
+test();
+</code></pre>
+
+<p>Missing block scoping will not only move <code>var</code> statements out of loops and
+their bodies, it will also make the results of certain <code>if</code> constructs
+non-intuitive.</p>
+
+<p>In the original code, although the <code>if</code> statement seemed to modify the <em>global
+variable</em> <code>goo</code>, it actually modifies the <em>local variable</em> - after hoisting
+has been applied.</p>
+
+<p>Without knowledge of <em>hoisting</em>, one might suspect the code below would raise a
+<code>ReferenceError</code>.</p>
+
+<pre><code>// check whether SomeImportantThing has been initialized
+if (!SomeImportantThing) {
+ var SomeImportantThing = {};
+}
+</code></pre>
+
+<p>But of course, this works due to the fact that the <code>var</code> statement is being
+moved to the top of the <em>global scope</em>.</p>
+
+<pre><code>var SomeImportantThing;
+
+// other code might initialize SomeImportantThing here, or not
+
+// make sure it&#39;s there
+if (!SomeImportantThing) {
+ SomeImportantThing = {};
+}
+</code></pre>
+
+</div><div><h3>Name Resolution Order</h3>
+
+<p>All scopes in JavaScript, including the <em>global scope</em>, have the special name
+<a href="#function.this"><code>this</code></a>, defined in them, which refers to the <em>current object</em>. </p>
+
+<p>Function scopes also have the name <a href="#function.arguments"><code>arguments</code></a>, defined in
+them, which contains the arguments that were passed to the function.</p>
+
+<p>For example, when trying to access a variable named <code>foo</code> inside the scope of a
+function, JavaScript will look up the name in the following order:</p>
+
+<ol>
+<li>In case there is a <code>var foo</code> statement in the current scope, use that.</li>
+<li>If one of the function parameters is named <code>foo</code>, use that.</li>
+<li>If the function itself is called <code>foo</code>, use that.</li>
+<li>Go to the next outer scope, and start with <strong>#1</strong> again.</li>
+</ol>
+
+<aside>
+ <p><strong>Note:</strong> Having a parameter called <code>arguments</code> will <strong>prevent</strong> the creation
+ of the default <code>arguments</code> object.</p>
+</aside>
+
+</div><div><h3>Namespaces</h3>
+
+<p>A common problem associated with having only one global namespace is the
+likelihood of running into problems where variable names clash. In JavaScript,
+this problem can easily be avoided with the help of <em>anonymous wrappers</em>.</p>
+
+<pre><code>(function() {
+ // a self contained "namespace"
+
+ window.foo = function() {
+ // an exposed closure
+ };
+
+})(); // execute the function immediately
+</code></pre>
+
+<p>Unnamed functions are considered <a href="#function.general">expressions</a>; so in order to
+being callable, they must first be evaluated.</p>
+
+<pre><code>( // evaluate the function inside the parentheses
+function() {}
+) // and return the function object
+() // call the result of the evaluation
+</code></pre>
+
+<p>There are other ways to evaluate and directly call the function expression
+which, while different in syntax, behave the same way.</p>
+
+<pre><code>// A few other styles for directly invoking the
+!function(){}()
++function(){}()
+(function(){}());
+// and so on...
+</code></pre>
+
+</div><div><h3>In Conclusion</h3>
+
+<p>It is recommended to always use an <em>anonymous wrapper</em> to encapsulate code in
+its own namespace. This does not only protect code against name clashes, but it
+also allows for better modularization of programs.</p>
+
+<p>Additionally, the use of global variables is considered <strong>bad practice</strong>. <strong>Any</strong>
+use of them indicates badly written code that is prone to errors and hard to maintain.</p></div></article></section><section id="array"><!-- Introduction--><header id="array.intro"><h1>Arrays</h1></header><!-- Articles--><article id="array.general"><h2>Array 迴圈和屬性</h2><div><p>雖然在 Javascript 中 Array 都是 Objects,但是沒有好的理由要使用他
+在 <a href="#object.forinloop"><code>for in</code></a> 的迴圈中。事實上有很多原因要避免使用 <code>for in</code> 在 Array 之中</p>
+
+<aside>
+ <p><strong>注意:</strong> Javascript Arrays <strong>不是</strong> <em>關連性 Arrays</em>
+ 只有 <a href="#object.general">objects</a> 來管理建值的相對應關係
+ Arrays 是<strong>保持</strong> 順序的,Objects <strong>則沒有</strong></p>
+</aside>
+
+<p>因為 <code>for in</code> 迴圈會列舉所有在原型 Array 上的屬性因為他會使用<a href="#object.hasownproperty"><code>hasOwnProperty</code></a>, 這會使得 Array 比原本的 <code>for</code> 迴圈慢上二十幾倍</p>
+
+</div><div><h3>迴圈</h3>
+
+<p>為了要達到最好的性能所以最好使用 <code>for</code> 迴圈來讀取一個 Array 裡面的數值。</p>
+
+<pre><code>var list = [1, 2, 3, 4, 5, ...... 100000000];
+for(var i = 0, l = list.length; i &lt; l; i++) {
+ console.log(list[i]);
+}
+</code></pre>
+
+<p>在上面的例子中利用 <code>l = list.length</code> 來處理 Array 的長度問題。</p>
+
+<p>雖然 <code>length</code> 屬性是屬於 Array 中其中一個屬性,但是他還使有一定的性能消耗在每次循環的訪問。
+近期 Javascript 使用 <strong>may</strong> 來解決在這上面的效率問題,但是在現在的引擎上還不一定有支援。</p>
+
+<p>實際上,不使用暫存 Array 長度的方式比使用暫存的版本還要慢很多。</p>
+
+</div><div><h3><code>length</code> 的屬性</h3>
+
+<p><code>length</code> 屬性中的 <em>getter</em> 直接回傳在 Array 之中的程度,而 <em>setter</em> 可以用來 <strong>刪除</strong> Array。</p>
+
+<pre><code>var foo = [1, 2, 3, 4, 5, 6];
+foo.length = 3;
+foo; // [1, 2, 3]
+
+foo.length = 6;
+foo.push(4);
+foo; // [1, 2, 3, undefined, undefined, undefined, 4]
+</code></pre>
+
+<p>在上面的例子可以看到,如果給的長度比較小他就會去刪除 Array 中的數值。如果比較大的話,他就會自己增加一些 <code>undefined</code> 的數值進去</p>
+
+</div><div><h3>結語</h3>
+
+<p>為了達到更好的效率,建議使用 <code>for</code> 迴圈還有暫存 <code>length</code> 的屬性。
+而 <code>for in</code> 迴圈則是會讓程式中有更多的錯誤和性能問題。</p></div></article><article id="array.constructor"><h2><code>Array</code> 的建構函式</h2><div><p><code>Array</code> 的建構函式在處理參數上一直有模糊的地帶,所以建議使用 <code>array</code>的字面語法來使用 - <code>[]</code> - 來新增一個的Array</p>
+
+<pre><code>[1, 2, 3]; // 結果: [1, 2, 3]
+new Array(1, 2, 3); // 結果: [1, 2, 3]
+
+[3]; // 結果: [3]
+new Array(3); // 結果: []
+new Array(&#39;3&#39;) // 結果: [&#39;3&#39;]
+</code></pre>
+
+<p>在上面的範例 <code>new Array(3)</code> 當只有一個參數傳入到 <code>Array</code> 的建構函數
+且那個參數事宜個數字,建構函數會回傳空值
+但是 <code>Array</code> 長度的屬性會變成跟那個參數一樣(以此範例來看他回傳的長度為 3)
+<strong>注意</strong> 只有他長度的屬性會被設定,整個 Array裡面的數值都不會初始化</p>
+
+<pre><code>var arr = new Array(3);
+arr[1]; // undefined
+1 in arr; // false, 數值沒有被設定進去
+</code></pre>
+
+<p>被設定用來當做 <code>Array</code> 的長度只有少數情況使用
+先設定 <code>Array</code> 的長度可以用一下的範例來避免使用 <code>for loop</code> 的麻煩</p>
+
+<pre><code>new Array(count + 1).join(stringToRepeat);
+</code></pre>
+
+</div><div><h3>結語</h3>
+
+<p><code>Array</code> 的建構函式需要避免,建議使用字面語法。因為他們比較簡短、也更增加閱讀性</p></div></article></section><section id="types"><!-- Introduction--><header id="types.intro"><h1>Types</h1></header><!-- Articles--><article id="types.equality"><h2>Equality and Comparisons</h2><div><p>JavaScript has two different ways of comparing the values of objects for equality. </p>
+
+</div><div><h3>The Equality Operator</h3>
+
+<p>The equality operator consists of two equal signs: <code>==</code></p>
+
+<p>JavaScript features <em>weak typing</em>. This means that the equality operator
+<strong>coerces</strong> types in order to compare them.</p>
+
+<pre><code>"" == "0" // false
+0 == "" // true
+0 == "0" // true
+false == "false" // false
+false == "0" // true
+false == undefined // false
+false == null // false
+null == undefined // true
+" \t\r\n" == 0 // true
+</code></pre>
+
+<p>The above table shows the results of the type coercion, and it is the main reason
+why the use of <code>==</code> is widely regarded as bad practice. It introduces
+hard-to-track-down bugs due to its complicated conversion rules.</p>
+
+<p>Additionally, there is also a performance impact when type coercion is in play;
+for example, a string has to be converted to a number before it can be compared
+to another number.</p>
+
+</div><div><h3>The Strict Equality Operator</h3>
+
+<p>The strict equality operator consists of <strong>three</strong> equal signs: <code>===</code>.</p>
+
+<p>It works like the normal equality operator, except that strict equality
+operator does <strong>not</strong> perform type coercion between its operands.</p>
+
+<pre><code>"" === "0" // false
+0 === "" // false
+0 === "0" // false
+false === "false" // false
+false === "0" // false
+false === undefined // false
+false === null // false
+null === undefined // false
+" \t\r\n" === 0 // false
+</code></pre>
+
+<p>The above results are a lot clearer and allow for early breakage of code. This
+hardens code to a certain degree and also gives performance improvements in case
+the operands are of different types.</p>
+
+</div><div><h3>Comparing Objects</h3>
+
+<p>While both <code>==</code> and <code>===</code> are called <strong>equality</strong> operators, they behave
+differently when at least one of their operands is an <code>Object</code>.</p>
+
+<pre><code>{} === {}; // false
+new String(&#39;foo&#39;) === &#39;foo&#39;; // false
+new Number(10) === 10; // false
+var foo = {};
+foo === foo; // true
+</code></pre>
+
+<p>Here, both operators compare for <strong>identity</strong> and <strong>not</strong> equality; that is, they
+will compare for the same <strong>instance</strong> of the object, much like <code>is</code> in Python
+and pointer comparison in C.</p>
+
+</div><div><h3>In Conclusion</h3>
+
+<p>It is highly recommended to only use the <strong>strict equality</strong> operator. In cases
+where types need to be coerced, it should be done <a href="#types.casting">explicitly</a>
+and not left to the language&#39;s complicated coercion rules.</p></div></article><article id="types.typeof"><h2>The <code>typeof</code> Operator</h2><div><p>The <code>typeof</code> operator (together with
+<a href="#types.instanceof"><code>instanceof</code></a>) is probably the biggest
+design flaw of JavaScript, as it is almost <strong>completely broken</strong>.</p>
+
+<p>Although <code>instanceof</code> still has limited uses, <code>typeof</code> really has only one
+practical use case, which does <strong>not</strong> happen to be checking the type of an
+object. </p>
+
+<aside>
+ <p><strong>Note:</strong> While <code>typeof</code> can also be called with a function like syntax, i.e.
+ <code>typeof(obj)</code>, this is not a function call. The parentheses behave as normal
+ and the return value will be used as the operand of the <code>typeof</code> operator.
+ There is <strong>no</strong> <code>typeof</code> function.</p>
+</aside>
+
+</div><div><h3>The JavaScript Type Table</h3>
+
+<pre><code>Value Class Type
+-------------------------------------
+"foo" String string
+new String("foo") String object
+1.2 Number number
+new Number(1.2) Number object
+true Boolean boolean
+new Boolean(true) Boolean object
+new Date() Date object
+new Error() Error object
+[1,2,3] Array object
+new Array(1, 2, 3) Array object
+new Function("") Function function
+/abc/g RegExp object (function in Nitro/V8)
+new RegExp("meow") RegExp object (function in Nitro/V8)
+{} Object object
+new Object() Object object
+</code></pre>
+
+<p>In the above table, <em>Type</em> refers to the value that the <code>typeof</code> operator returns.
+As can be clearly seen, this value is anything but consistent.</p>
+
+<p>The <em>Class</em> refers to the value of the internal <code>[[Class]]</code> property of an object.</p>
+
+<aside>
+ <p><strong>From the Specification:</strong> The value of <code>[[Class]]</code> can be one of the
+ following strings. <code>Arguments</code>, <code>Array</code>, <code>Boolean</code>, <code>Date</code>, <code>Error</code>,
+ <code>Function</code>, <code>JSON</code>, <code>Math</code>, <code>Number</code>, <code>Object</code>, <code>RegExp</code>, <code>String</code>.</p>
+</aside>
+
+<p>In order to retrieve the value of <code>[[Class]]</code>, one has to make use of the
+<code>toString</code> method of <code>Object.prototype</code>.</p>
+
+</div><div><h3>The Class of an Object</h3>
+
+<p>The specification gives exactly one way of accessing the <code>[[Class]]</code> value,
+with the use of <code>Object.prototype.toString</code>. </p>
+
+<pre><code>function is(type, obj) {
+ var clas = Object.prototype.toString.call(obj).slice(8, -1);
+ return obj !== undefined &amp;&amp; obj !== null &amp;&amp; clas === type;
+}
+
+is(&#39;String&#39;, &#39;test&#39;); // true
+is(&#39;String&#39;, new String(&#39;test&#39;)); // true
+</code></pre>
+
+<p>In the above example, <code>Object.prototype.toString</code> gets called with the value of
+<a href="#function.this">this</a> being set to the object whose <code>[[Class]]</code> value should be
+retrieved.</p>
+
+<aside class="es5"><p><strong>ES5 Note:</strong> For convenience the return value of <code>Object.prototype.toString</code>
+ for both <code>null</code> and <code>undefined</code> was <strong>changed</strong> from <code>Object</code> to <code>Null</code> and
+ <code>Undefined</code> in ECMAScript 5.</p>
+</aside>
+
+</div><div><h3>Testing for Undefined Variables</h3>
+
+<pre><code>typeof foo !== &#39;undefined&#39;
+</code></pre>
+
+<p>The above will check whether <code>foo</code> was actually declared or not; just
+referencing it would result in a <code>ReferenceError</code>. This is the only thing
+<code>typeof</code> is actually useful for.</p>
+
+</div><div><h3>In Conclusion</h3>
+
+<p>In order to check the type of an object, it is highly recommended to use
+<code>Object.prototype.toString</code> because this is the only reliable way of doing so.
+As shown in the above type table, some return values of <code>typeof</code> are not defined
+in the specification; thus, they can differ between implementations.</p>
+
+<p>Unless checking whether a variable is defined, <code>typeof</code> should be avoided.</p></div></article><article id="types.instanceof"><h2>The <code>instanceof</code> Operator</h2><div><p>The <code>instanceof</code> operator compares the constructors of its two operands. It is
+only useful when comparing custom made objects. Used on built-in types, it is
+nearly as useless as the <a href="#types.typeof">typeof operator</a>.</p>
+
+</div><div><h3>Comparing Custom Objects</h3>
+
+<pre><code>function Foo() {}
+function Bar() {}
+Bar.prototype = new Foo();
+
+new Bar() instanceof Bar; // true
+new Bar() instanceof Foo; // true
+
+// This just sets Bar.prototype to the function object Foo,
+// but not to an actual instance of Foo
+Bar.prototype = Foo;
+new Bar() instanceof Foo; // false
+</code></pre>
+
+</div><div><h3>Using <code>instanceof</code> with Native Types</h3>
+
+<pre><code>new String(&#39;foo&#39;) instanceof String; // true
+new String(&#39;foo&#39;) instanceof Object; // true
+
+&#39;foo&#39; instanceof String; // false
+&#39;foo&#39; instanceof Object; // false
+</code></pre>
+
+<p>One important thing to note here is that <code>instanceof</code> does not work on objects
+that originate from different JavaScript contexts (e.g. different documents
+in a web browser), since their constructors will not be the exact same object.</p>
+
+</div><div><h3>In Conclusion</h3>
+
+<p>The <code>instanceof</code> operator should <strong>only</strong> be used when dealing with custom made
+objects that originate from the same JavaScript context. Just like the
+<a href="#types.typeof"><code>typeof</code></a> operator, every other use of it should be <strong>avoided</strong>.</p></div></article><article id="types.casting"><h2>Type Casting</h2><div><p>JavaScript is a <em>weakly typed</em> language, so it will apply <em>type coercion</em>
+<strong>wherever</strong> possible.</p>
+
+<pre><code>// These are true
+new Number(10) == 10; // Number.toString() is converted
+ // back to a number
+
+10 == &#39;10&#39;; // Strings gets converted to Number
+10 == &#39;+10 &#39;; // More string madness
+10 == &#39;010&#39;; // And more
+isNaN(null) == false; // null converts to 0
+ // which of course is not NaN
+
+// These are false
+10 == 010;
+10 == &#39;-10&#39;;
+</code></pre>
+
+<aside class="es5"><p><strong>ES5 Note:</strong> Number literals that start with a <code>0</code> are interpreted as octal
+ (Base 8). Octal support for these has been <strong>removed</strong> in ECMAScript 5 strict
+ mode.</p>
+</aside>
+
+<p>To avoid the issues above, use of the <a href="#types.equality">strict equal operator</a>
+is <strong>highly</strong> recommended. Although this avoids a lot of common pitfalls, there
+are still many further issues that arise from JavaScript&#39;s weak typing system.</p>
+
+</div><div><h3>Constructors of Built-In Types</h3>
+
+<p>The constructors of the built in types like <code>Number</code> and <code>String</code> behave
+differently when being used with the <code>new</code> keyword and without it.</p>
+
+<pre><code>new Number(10) === 10; // False, Object and Number
+Number(10) === 10; // True, Number and Number
+new Number(10) + 0 === 10; // True, due to implicit conversion
+</code></pre>
+
+<p>Using a built-in type like <code>Number</code> as a constructor will create a new <code>Number</code>
+object, but leaving out the <code>new</code> keyword will make the <code>Number</code> function behave
+like a converter.</p>
+
+<p>In addition, passing literals or non-object values will result in even more
+type coercion.</p>
+
+<p>The best option is to cast to one of the three possible types <strong>explicitly</strong>.</p>
+
+</div><div><h3>Casting to a String</h3>
+
+<pre><code>&#39;&#39; + 10 === &#39;10&#39;; // true
+</code></pre>
+
+<p>By prepending an empty string, a value can easily be cast to a string.</p>
+
+</div><div><h3>Casting to a Number</h3>
+
+<pre><code>+&#39;10&#39; === 10; // true
+</code></pre>
+
+<p>Using the <strong>unary</strong> plus operator, it is possible to cast to a number.</p>
+
+</div><div><h3>Casting to a Boolean</h3>
+
+<p>By using the <strong>not</strong> operator twice, a value can be converted a boolean.</p>
+
+<pre><code>!!&#39;foo&#39;; // true
+!!&#39;&#39;; // false
+!!&#39;0&#39;; // true
+!!&#39;1&#39;; // true
+!!&#39;-1&#39; // true
+!!{}; // true
+!!true; // true
+</code></pre></div></article></section><section id="core"><!-- Introduction--><header id="core.intro"><h1>Core</h1></header><!-- Articles--><article id="core.eval"><h2>為什麼不要使用 <code>eval</code></h2><div><p>因為 <code>eval</code> 函數會在 Javascript 的區域性的區間執行那段程式碼。</p>
+
+<pre><code>var foo = 1;
+function test() {
+ var foo = 2;
+ eval(&#39;foo = 3&#39;);
+ return foo;
+}
+test(); // 3
+foo; // 1
+</code></pre>
+
+<p>但是, <code>eval</code> 只接受直接的呼叫而且那個函數只能叫做 <code>eval</code>,才能在一個區段中執行。</p>
+
+<pre><code>var foo = 1;
+function test() {
+ var foo = 2;
+ var bar = eval;
+ bar(&#39;foo = 3&#39;);
+ return foo;
+}
+test(); // 2
+foo; // 3
+</code></pre>
+
+<p>所有的 <code>eval</code> 都應該去比免試用。有 99.9% 的使用情況都可以 <strong>不必</strong> 使用到而達到同等效果。</p>
+
+</div><div><h3>偽裝的 <code>eval</code></h3>
+
+<p><a href="#other.timeouts">定時函數</a> <code>setTimeout</code> 和 <code>setInterval</code> 都可以接受一個字串當做他們第一個參數。這些字串 <strong>永遠</strong> 都會在全域範圍內執行,因此在這種情況下 <code>eval</code> 沒有被直接的使用。</p>
+
+</div><div><h3>安全上的顧慮</h3>
+
+<p><code>eval</code> 同樣有安全上的問題,因為所有的程式碼都可以被直接執行。
+而他不應去執行一串未知的字串或是來自不幸任的來源。</p>
+
+</div><div><h3>結語</h3>
+
+<p><code>eval</code> 應該永遠不要去只用它,任何的程式在被他執行後都有性能和安全上的考慮。如果有情況需要去使用他,他都不應該列為第一順位的解決方法。</p>
+
+<p>應該有更好的方法能夠去使用,但是最好都不要去使用 <code>eval</code>。</p></div></article><article id="core.undefined"><h2><code>undefined</code> 和 <code>null</code></h2><div><p>JavaScript 中有兩個表示空值的方式, <code>null</code> 和 <code>undefined</code> , <code>undefined</code>式比較常用的一種。</p>
+
+</div><div><h3><code>undefined</code> 的值</h3>
+
+<p><code>undefined</code> 是一個值為 <code>undefined</code> 的類型。</p>
+
+<p>語言中也定義了一個全域變數,它的值為 <code>undefined</code>,這個變數的被稱作 <code>undefined</code> 。
+這個變數 <strong>不是</strong> 一個常數,也不是一個關鍵字。這表示它的值可以被輕易的覆蓋。</p>
+
+<aside class="es5"><p><strong>ES5 提示: <em>* <code>undefined</code> 在 ECMAScript 5 裡 *</em>不再是</strong> <em>可寫</em> 的
+ 但是它的名稱還是可以被隱藏,比如說定義一個函數為 <code>undefined</code>。</p>
+</aside>
+
+<p>這裡有一些例子會回傳 <code>undefined</code> 的值:</p>
+
+<ul>
+<li>進入尚未修改的全域變數 <code>undefined</code>。</li>
+<li>進入一個宣告但 <strong>尚未</strong> 初始化的變數。</li>
+<li><code>return</code> 表示式中沒有返回任何內容。</li>
+<li>呼叫不存在的屬性。</li>
+<li>函式參數沒有被傳遞數值。</li>
+<li>任何被被設定為 <code>undefined</code> 的變數。</li>
+<li>任何表達式中形式為 <code>void(expression)</code></li>
+</ul>
+
+</div><div><h3>處理 <code>undefined</code> 值的改變</h3>
+
+<p>由於全域變數 <code>undefined</code> 只有保存 <code>undefined</code> 類型實際值的一個副本,指定了一個新的值並 <strong>不會</strong> 改變 <code>undefined</code>類型裡面的值。</p>
+
+<p>為了避免去改變 <code>undefined</code> 的值,常用的技巧就是加上一個新的變數到 <a href="#function.scopes">匿名包裝器</a>。在使用的時候,這個參數不會接受任何的值。</p>
+
+<pre><code>var undefined = 123;
+(function(something, foo, undefined) {
+ // undefined 在區域區間內得到了 `undefined` 的值
+
+})(&#39;Hello World&#39;, 42);
+</code></pre>
+
+<p>另外一個可以得到同樣的效果就是在內部宣告一個變數</p>
+
+<pre><code>var undefined = 123;
+(function(something, foo) {
+ var undefined;
+ ...
+
+})(&#39;Hello World&#39;, 42);
+</code></pre>
+
+<p>唯一的不同就是在下者會多 4 個多 bytes 用來壓縮檔案,而且函數內野沒有其他需要使用 <code>var</code></p>
+
+</div><div><h3>使用 <code>null</code></h3>
+
+<p>JavaScript 中所使用的 <code>undefined</code> 類似別的語言中的 <em>null</em> , 但實際上在 JavaScript 中的 <code>null</code> 算是另外一個類型。</p>
+
+<p>它在 JavaScript 有些可以使用的地方 (例如說宣告一個原型的終結,例如 <code>Foo.prototype = null</code> )。
+但是在大部分的時候可以用 <code>undefined</code>,來取代。</p></div></article><article id="core.semicolon"><h2>自動插入分號</h2><div><p>雖然 JavaScript 有 C 語言的語法,但是他不強制一定要加上分號。
+所以分號可以被忽略。</p>
+
+<p>Javascript 並 <strong>不是</strong> 一個不需要分號的語言。實際上,它需要分號來讓程式碼更容易被理解。因此 Javascript 的編譯器中遇到了缺少分號的情形,它會自動的在程式碼中插入分號。</p>
+
+<pre><code>var foo = function() {
+} // 編輯錯誤,因沒分號
+test()
+</code></pre>
+
+<p>這時候編譯器在編輯的時候,會自動的加上分號,然後重新編輯。</p>
+
+<pre><code>var foo = function() {
+}; // 沒有錯誤,編輯繼續
+test()
+</code></pre>
+
+<p>自動的加入分號是被認為 <strong>最大</strong> 的設計缺陷之一,因為它能改變程式碼的行為。</p>
+
+</div><div><h3>工作原理</h3>
+
+<p>下面的程式碼中沒有使用任何的分號,所以編譯器需要去決定在哪些地方加入分號。</p>
+
+<pre><code>(function(window, undefined) {
+ function test(options) {
+ log(&#39;testing!&#39;)
+
+ (options.list || []).forEach(function(i) {
+
+ })
+
+ options.value.test(
+ &#39;long string to pass here&#39;,
+ &#39;and another long string to pass&#39;
+ )
+
+ return
+ {
+ foo: function() {}
+ }
+ }
+ window.test = test
+
+})(window)
+
+(function(window) {
+ window.someLibrary = {}
+
+})(window)
+</code></pre>
+
+<p>下面的程式碼是編譯器 <strong>猜測</strong> 的結果。</p>
+
+<pre><code>(function(window, undefined) {
+ function test(options) {
+
+ // 沒有加入分號,兩行被合併為一行
+ log(&#39;testing!&#39;)(options.list || []).forEach(function(i) {
+
+ }); // &lt;- 插入分號
+
+ options.value.test(
+ &#39;long string to pass here&#39;,
+ &#39;and another long string to pass&#39;
+ ); // &lt;- 插入分號
+
+ return; // &lt;- 插入分號,改變了 return 的表達行為
+ { // 作為另一個程式碼的處理
+
+ // 被當做一個獨立的函數來看
+ foo: function() {}
+ }; // &lt;- 插入分號
+ }
+ window.test = test; // &lt;- 插入分號
+
+// 兩行又被合併
+})(window)(function(window) {
+ window.someLibrary = {}; // &lt;- 插入分號
+
+})(window); //&lt;- 插入分號
+</code></pre>
+
+<aside>
+ <p><strong>注意:</strong> 在這個範例中 Javascript 編譯器沒有正確的處理 <code>return</code> ,因為緊接的換行符號。
+ 雖然這不能算是自動分號插入的錯誤,但是它是非常不樂見的效果。</p>
+</aside>
+
+<p>編譯器在上面的程式碼中改變了原本程式碼的行為。在一些情況下,會做出 <strong>錯誤的行為</strong></p>
+
+</div><div><h3>前置括號</h3>
+
+<p>在這種前置括號的情況下,編譯器 <strong>不會</strong> 自動的插入分號。</p>
+
+<pre><code>log(&#39;testing!&#39;)
+(options.list || []).forEach(function(i) {})
+</code></pre>
+
+<p>上面的程式碼被編譯器轉為只有一行程式</p>
+
+<pre><code>log(&#39;testing!&#39;)(options.list || []).forEach(function(i) {})
+</code></pre>
+
+<p>以上的範例中 <code>log</code> 有 <strong>很大</strong> 的可能 <strong>不是</strong> 回傳一個函數。然而這個情況下會出現 <code>TypeError</code> 的錯誤或是會出現 <code>undefined is not a function</code> .</p>
+
+</div><div><h3>結語</h3>
+
+<p>建議永遠 <strong>不要</strong> 忽略分號。同樣的也建議大括號應在他對應的表達式在同一行。在 <code>if... else...</code>的表達式中也是如此,不應省略大括號。
+這個習慣可以不僅僅是讓你的程式更一致,也可以避免編譯器因為改變程式而出錯。</p></div></article><article id="core.delete"><h2>The <code>delete</code> Operator</h2><div><p>In short, it&#39;s <em>impossible</em> to delete global variables, functions and some other
+stuff in JavaScript which have a <code>DontDelete</code> attribute set.</p>
+
+</div><div><h3>Global code and Function code</h3>
+
+<p>When a variable or a function is defined in a global or a <a href="#function.scopes">function
+scope</a> it is a property of either the Activation object or
+the Global object. Such properties have a set of attributes, one of which is
+<code>DontDelete</code>. Variable and function declarations in global and function code
+always create properties with <code>DontDelete</code>, and therefore cannot be deleted.</p>
+
+<pre><code>// global variable:
+var a = 1; // DontDelete is set
+delete a; // false
+a; // 1
+
+// normal function:
+function f() {} // DontDelete is set
+delete f; // false
+typeof f; // "function"
+
+// reassigning doesn&#39;t help:
+f = 1;
+delete f; // false
+f; // 1
+</code></pre>
+
+</div><div><h3>Explicit properties</h3>
+
+<p>Explicitly set properties can be deleted normally.</p>
+
+<pre><code>// explicitly set property:
+var obj = {x: 1};
+obj.y = 2;
+delete obj.x; // true
+delete obj.y; // true
+obj.x; // undefined
+obj.y; // undefined
+</code></pre>
+
+<p>In the example above, <code>obj.x</code> and <code>obj.y</code> can be deleted because they have no
+<code>DontDelete</code> atribute. That&#39;s why the example below works too.</p>
+
+<pre><code>// this works fine, except for IE:
+var GLOBAL_OBJECT = this;
+GLOBAL_OBJECT.a = 1;
+a === GLOBAL_OBJECT.a; // true - just a global var
+delete GLOBAL_OBJECT.a; // true
+GLOBAL_OBJECT.a; // undefined
+</code></pre>
+
+<p>Here we use a trick to delete <code>a</code>. <a href="#function.this"><code>this</code></a> here refers
+to the Global object and we explicitly declare variable <code>a</code> as its property
+which allows us to delete it.</p>
+
+<p>IE (at least 6-8) has some bugs, so the code above doesn&#39;t work.</p>
+
+</div><div><h3>Function arguments and built-ins</h3>
+
+<p>Functions&#39; normal arguments, <a href="#function.arguments"><code>arguments</code> objects</a>
+and built-in properties also have <code>DontDelete</code> set.</p>
+
+<pre><code>// function arguments and properties:
+(function (x) {
+
+ delete arguments; // false
+ typeof arguments; // "object"
+
+ delete x; // false
+ x; // 1
+
+ function f(){}
+ delete f.length; // false
+ typeof f.length; // "number"
+
+})(1);
+</code></pre>
+
+</div><div><h3>Host objects</h3>
+
+<p>The behaviour of <code>delete</code> operator can be unpredictable for hosted objects. Due
+to the specification, host objects are allowed to implement any kind of behavior. </p>
+
+</div><div><h3>In conclusion</h3>
+
+<p>The <code>delete</code> operator often has unexpected behaviour and can only be safely
+used to delete explicitly set properties on normal objects.</p></div></article></section><section id="other"><!-- Introduction--><header id="other.intro"><h1>Other</h1></header><!-- Articles--><article id="other.timeouts"><h2><code>setTimeout</code> and <code>setInterval</code></h2><div><p>Since JavaScript is asynchronous, it is possible to schedule the execution of a
+function using the <code>setTimeout</code> and <code>setInterval</code> functions.</p>
+
+<aside>
+ <p><strong>Note:</strong> Timeouts are <strong>not</strong> part of the ECMAScript Standard. They are
+ implemented as part of the <a href="http://en.wikipedia.org/wiki/Document_Object_Model" title="Document Object Model">DOM</a>.</p>
+</aside>
+
+<pre><code>function foo() {}
+var id = setTimeout(foo, 1000); // returns a Number &gt; 0
+</code></pre>
+
+<p>When <code>setTimeout</code> is called, it returns the ID of the timeout and schedule
+<code>foo</code> to run <strong>approximately</strong> one thousand milliseconds in the future.
+<code>foo</code> will then be executed <strong>once</strong>.</p>
+
+<p>Depending on the timer resolution of the JavaScript engine running the code, as
+well as the fact that JavaScript is single threaded and other code that gets
+executed might block the thread, it is by <strong>no means</strong> a safe bet that one will
+get the exact delay specified in the <code>setTimeout</code> call.</p>
+
+<p>The function that was passed as the first parameter will get called by the
+<em>global object</em>, which means that <a href="#function.this"><code>this</code></a> inside the called function
+refers to the global object.</p>
+
+<pre><code>function Foo() {
+ this.value = 42;
+ this.method = function() {
+ // this refers to the global object
+ console.log(this.value); // will log undefined
+ };
+ setTimeout(this.method, 500);
+}
+new Foo();
+</code></pre>
+
+<aside>
+ <p><strong>Note:</strong> As <code>setTimeout</code> takes a <strong>function object</strong> as its first parameter, an
+ common mistake is to use <code>setTimeout(foo(), 1000)</code>, which will use the
+ <strong>return value</strong> of the call <code>foo</code> and <strong>not</strong> <code>foo</code>. This is, most of the time,
+ a silent error, since when the function returns <code>undefined</code> <code>setTimeout</code> will
+ <strong>not</strong> raise any error.</p>
+</aside>
+
+</div><div><h3>Stacking Calls with <code>setInterval</code></h3>
+
+<p>While <code>setTimeout</code> only runs the function once, <code>setInterval</code> - as the name
+suggests - will execute the function <strong>every</strong> <code>X</code> milliseconds, but its use is
+discouraged. </p>
+
+<p>When code that is being executed blocks the timeout call, <code>setInterval</code> will
+still issue more calls to the specified function. This can, especially with small
+intervals, result in function calls stacking up.</p>
+
+<pre><code>function foo(){
+ // something that blocks for 1 second
+}
+setInterval(foo, 1000);
+</code></pre>
+
+<p>In the above code, <code>foo</code> will get called once and will then block for one second.</p>
+
+<p>While <code>foo</code> blocks the code, <code>setInterval</code> will still schedule further calls to
+it. Now, when <code>foo</code> has finished, there will already be <strong>ten</strong> further calls to
+it waiting for execution.</p>
+
+</div><div><h3>Dealing with Possible Blocking Code</h3>
+
+<p>The easiest solution, as well as most controllable solution, is to use <code>setTimeout</code> within
+the function itself.</p>
+
+<pre><code>function foo(){
+ // something that blocks for 1 second
+ setTimeout(foo, 1000);
+}
+foo();
+</code></pre>
+
+<p>Not only does this encapsulate the <code>setTimeout</code> call, but it also prevents the
+stacking of calls and gives additional control. <code>foo</code> itself can now decide
+whether it wants to run again or not.</p>
+
+</div><div><h3>Manually Clearing Timeouts</h3>
+
+<p>Clearing timeouts and intervals works by passing the respective ID to
+<code>clearTimeout</code> or <code>clearInterval</code>, depending on which <code>set</code> function was used
+in the first place.</p>
+
+<pre><code>var id = setTimeout(foo, 1000);
+clearTimeout(id);
+</code></pre>
+
+</div><div><h3>Clearing All Timeouts</h3>
+
+<p>As there is no built-in method for clearing all timeouts and/or intervals,
+it is necessary to use brute force in order to achieve this functionality.</p>
+
+<pre><code>// clear "all" timeouts
+for(var i = 1; i &lt; 1000; i++) {
+ clearTimeout(i);
+}
+</code></pre>
+
+<p>But there might still be timeouts that are unaffected by this arbitrary number.
+Another way of doing this is to consider that the ID given to a timeout is
+incremented by one every time you call <code>setTimeout</code>.</p>
+
+<pre><code>// clear "all" timeouts
+var biggestTimeoutId = window.setTimeout(function(){}, 1),
+i;
+for(i = 1; i &lt;= biggestTimeoutId; i++) {
+ clearTimeout(i);
+}
+</code></pre>
+
+<p>Even though this works on all major browsers today, it isn&#39;t specified that
+the IDs should be ordered that way and it may change. Therefore, it is instead
+recommended to keep track of all the timeout IDs, so they can be cleared
+specifically.</p>
+
+</div><div><h3>Hidden Use of <code>eval</code></h3>
+
+<p><code>setTimeout</code> and <code>setInterval</code> can also take a string as their first parameter.
+This feature should <strong>never</strong> be used because it internally makes use of <code>eval</code>.</p>
+
+<aside>
+ <p><strong>Note:</strong> Since the timeout functions are <strong>not</strong> specified by the ECMAScript
+ standard, the exact workings when a string is passed to them might differ in
+ various JavaScript implementations. For example, Microsoft&#39;s JScript uses
+ the <code>Function</code> constructor in place of <code>eval</code>.</p>
+</aside>
+
+<pre><code>function foo() {
+ // will get called
+}
+
+function bar() {
+ function foo() {
+ // never gets called
+ }
+ setTimeout(&#39;foo()&#39;, 1000);
+}
+bar();
+</code></pre>
+
+<p>Since <code>eval</code> is not getting called <a href="#core.eval">directly</a> in this case, the string
+passed to <code>setTimeout</code> will be executed in the <em>global scope</em>; thus, it will
+not use the local variable <code>foo</code> from the scope of <code>bar</code>.</p>
+
+<p>It is further recommended to <strong>not</strong> use a string to pass arguments to the