Skip to content

Commit 229707f

Browse files
committed
Merge pull request BonsaiDen#226 from appleboy/patch
some translatation for chinese
2 parents 806c322 + bd50de2 commit 229707f

File tree

6 files changed

+113
-101
lines changed

6 files changed

+113
-101
lines changed

doc/zhtw/function/closures.md

Lines changed: 85 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,85 @@
1-
## Closures 和 References
2-
3-
JavaScript 有一個很重要的特徵就是 **closures**
4-
因為有 Closures,所以作用域 **永遠** 能夠去訪問作用區間外面的變數。
5-
[函數區間](#function.scopes) 是JavaScript 中唯一擁有自生作用域的結構,因此 Closures 的創立需要依賴函數
6-
7-
### 模仿私有變數
8-
9-
function Counter(start) {
10-
var count = start;
11-
return {
12-
increment: function() {
13-
count++;
14-
},
15-
16-
get: function() {
17-
return count;
18-
}
19-
}
20-
}
21-
22-
var foo = Counter(4);
23-
foo.increment();
24-
foo.get(); // 5
25-
26-
這裡,`Counter` 返回兩個 Closures,函數 `increment` 還有 `get`。這兩個函數都維持著對外部作用域 `Counter` 的引用,因此總可以訪問作用域的變數 `count`
27-
28-
29-
### 為什麼不可以在外部訪問私有變數
30-
31-
因為 Javascript **不可以** 對作用域進行引用或賦值。因此外部的地方沒有辦法訪問 `count` 變數。
32-
唯一的途徑就是經過那兩個 Closures
33-
34-
var foo = new Counter(4);
35-
foo.hack = function() {
36-
count = 1337;
37-
};
38-
39-
在上面的例子中 `count` **不會** 改變到 `Counter` 裡面的 `count` 的值。因為 `foo.hack` 沒有在 **那個** 作用域內被宣告。它只有會覆蓋或者建立在一個 **全域** 的變數 `count`
40-
41-
### 在循環內的 Closures
42-
43-
一個常見的錯誤就是在 Closures 中使用迴圈,假設我們要使用每次迴圈中所使用的進入變數
44-
45-
for(var i = 0; i < 10; i++) {
46-
setTimeout(function() {
47-
console.log(i);
48-
}, 1000);
49-
}
50-
51-
在上面的例子中它 **不會** 輸出數字從 `0``9`,但只會出現數字 `10` 十次。
52-
`console.log` 被呼叫的時候,這個 *匿名* 函數中保持一個 **參考** 到 i ,此時 `for`迴圈已經結束, `i` 的值被修改成了 `10`
53-
為了要達到想要的結果,需要在每次創造 **副本** 來儲存 `i` 的變數。
54-
55-
### 避免引用錯誤
56-
57-
為了要有達到正確的效果,最好是把它包在一個
58-
[匿名函數](#function.scopes).
59-
60-
for(var i = 0; i < 10; i++) {
61-
(function(e) {
62-
setTimeout(function() {
63-
console.log(e);
64-
}, 1000);
65-
})(i);
66-
}
67-
68-
匿名外部的函數被呼叫,並把 `i` 作為它第一個參數,此時函數內 `e` 變數就擁有了一個 `i` 的拷貝。
69-
當傳遞給 `setTimeout` 這個匿名函數執行時,它就擁有了對 `e` 的引用,而這個值 **不會** 被循環改變。
70-
另外有一個方法也可以完成這樣的工作,那就是在匿名函數中返回一個函數,這和上面的程式碼有同樣的效果。
71-
72-
for(var i = 0; i < 10; i++) {
73-
setTimeout((function(e) {
74-
return function() {
75-
console.log(e);
76-
}
77-
})(i), 1000)
78-
}
79-
1+
## Closures 和 References
2+
3+
JavaScript 有一個很重要的特徵就是 **closures**
4+
因為有 Closures,所以作用域 **永遠** 能夠去訪問作用區間外面的變數。
5+
[函數區間](#function.scopes) 是JavaScript 中唯一擁有自生作用域的結構,因此 Closures 的創立需要依賴函數
6+
7+
### 模仿私有變數
8+
9+
function Counter(start) {
10+
var count = start;
11+
return {
12+
increment: function() {
13+
count++;
14+
},
15+
16+
get: function() {
17+
return count;
18+
}
19+
}
20+
}
21+
22+
var foo = Counter(4);
23+
foo.increment();
24+
foo.get(); // 5
25+
26+
這裡,`Counter` 返回兩個 Closures,函數 `increment` 還有 `get`。這兩個函數都維持著對外部作用域 `Counter` 的引用,因此總可以訪問作用域的變數 `count`
27+
28+
29+
### 為什麼不可以在外部訪問私有變數
30+
31+
因為 Javascript **不可以** 對作用域進行引用或賦值。因此外部的地方沒有辦法訪問 `count` 變數。
32+
唯一的途徑就是經過那兩個 Closures
33+
34+
var foo = new Counter(4);
35+
foo.hack = function() {
36+
count = 1337;
37+
};
38+
39+
在上面的例子中 `count` **不會** 改變到 `Counter` 裡面的 `count` 的值。因為 `foo.hack` 沒有在 **那個** 作用域內被宣告。它只有會覆蓋或者建立在一個 **全域** 的變數 `count`
40+
41+
### 在循環內的 Closures
42+
43+
一個常見的錯誤就是在 Closures 中使用迴圈,假設我們要使用每次迴圈中所使用的進入變數
44+
45+
for(var i = 0; i < 10; i++) {
46+
setTimeout(function() {
47+
console.log(i);
48+
}, 1000);
49+
}
50+
51+
在上面的例子中它 **不會** 輸出數字從 `0``9`,但只會出現數字 `10` 十次。
52+
`console.log` 被呼叫的時候,這個 *匿名* 函數中保持一個 **參考** 到 i ,此時 `for`迴圈已經結束, `i` 的值被修改成了 `10`
53+
為了要達到想要的結果,需要在每次創造 **副本** 來儲存 `i` 的變數。
54+
55+
### 避免引用錯誤
56+
57+
為了要有達到正確的效果,最好是把它包在一個
58+
[匿名函數](#function.scopes).
59+
60+
for(var i = 0; i < 10; i++) {
61+
(function(e) {
62+
setTimeout(function() {
63+
console.log(e);
64+
}, 1000);
65+
})(i);
66+
}
67+
68+
匿名外部的函數被呼叫,並把 `i` 作為它第一個參數,此時函數內 `e` 變數就擁有了一個 `i` 的拷貝。
69+
當傳遞給 `setTimeout` 這個匿名函數執行時,它就擁有了對 `e` 的引用,而這個值 **不會** 被循環改變。
70+
另外有一個方法也可以完成這樣的工作,那就是在匿名函數中返回一個函數,這和上面的程式碼有同樣的效果。
71+
72+
for(var i = 0; i < 10; i++) {
73+
setTimeout((function(e) {
74+
return function() {
75+
console.log(e);
76+
}
77+
})(i), 1000)
78+
}
79+
80+
另外也可以透過 `.bind` 完成此工作,它可以將 `this` 及參數傳入函數內,行為就如同上面程式碼一樣。
81+
82+
for(var i = 0; i < 10; i++) {
83+
setTimeout(console.log.bind(console, i), 1000);
84+
}
85+

doc/zhtw/index.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"title": "JavaScript 庭院",
2+
"title": "JavaScript Garden",
33
"langTitle": "JavaScript Garden 繁體中文翻譯",
44
"description": "JavaScript 語言中古怪用法及缺點的文件總集",
55
"sections": [

doc/zhtw/intro/index.md

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
## 簡介
22

3-
JavaScript 庭院 是一個不斷更新的文件,最主要是要去了解一些 Javascript 比較古怪的部份。
3+
JavaScript Garden 是一個不斷更新的文件,最主要是要去了解一些 Javascript 比較古怪的部份。
44
給一些意見來防止遇到一些常見的錯誤和一些難以發現的問題,以及性能問題和不好的習慣。
55
初學者也可以藉此去了解 Javascript 這項語言的特性。
66

7-
JavaScript 庭院**不是** 要教導你 Javascript 的語言。
7+
JavaScript Garden**不是** 要教導你 Javascript 的語言。
88
如果要能夠理解這篇文章的內容,你需要事先學習 JavaScript 的基礎知識。
99
在 Mozilla 開發者網路中有一系列非常棒的學習[guide][1]
1010

1111

1212
## 作者
1313

1414
這個使用手冊是來自於 [Stack Overflow][2] 的使用者, [Ivo Wetzel][3]
15-
(寫作) 和 [Zhang Yi Jiang][4] (設計).
15+
(寫作) 和 [Zhang Yi Jiang][4] (設計)。
16+
17+
目前為 [Tim Ruffles](http://truffles.me.uk) 維護此專案。
1618

1719
## 貢獻者
1820

@@ -22,15 +24,17 @@ JavaScript 庭院 並 **不是** 要教導你 Javascript 的語言。
2224

2325
- [紀力榮][29]
2426
- [張仲威][30]
27+
- [Bo-Yi Wu][31]
2528

26-
## 存在
29+
## 存放空間
2730

28-
JavaScript 庭院 存在於 GitHub, 但是 [Cramer Development][7] 讓我們有一個存放地 [JavaScriptGarden.info][8].
31+
JavaScript Garden 目前存放於 GitHub但是 [Cramer Development][7] 讓我們有另一個存放位置在 [JavaScriptGarden.info][8]
2932

3033
## 許可
3134

32-
JavaScript 庭院是在 [MIT license][9] 許可協議下發佈,並存在於
33-
[GitHub][10]. 如果你有發現錯誤或是打字上的錯誤 [新增一個任務][11] 或者發一個請求。 你也可以在 StackOverflow 的 [JavaScript room][12] 上面找到我們。
35+
JavaScript Garden 是在 [MIT license][9] 許可協議下發佈,並存在於
36+
[GitHub][10],如果你有發現錯誤或是打字上的錯誤 [新增一個任務][11] 或者發一個請求。
37+
你也可以在 StackOverflow 的 [JavaScript room][12] 上面找到我們。
3438

3539
[1]: https://developer.mozilla.org/en/JavaScript/Guide
3640
[2]: http://stackoverflow.com/
@@ -44,5 +48,6 @@ JavaScript 庭院是在 [MIT license][9] 許可協議下發佈,並存在於
4448
[10]: https://github.com/BonsaiDen/JavaScript-Garden
4549
[11]: https://github.com/BonsaiDen/JavaScript-Garden/issues
4650
[12]: http://chat.stackoverflow.com/rooms/17/javascript
47-
[29]: http://github.com/chilijung
48-
[30]: http://github.com/wwwy3y3
51+
[29]: https://github.com/chilijung
52+
[30]: https://github.com/wwwy3y3
53+
[31]: https://github.com/appleboy

doc/zhtw/object/forinloop.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
就像其他的 `in` 操作符一樣, `for in` 循環也進入所有在物件中的屬性
44

5-
> **注意: ** `for in` 迴圈 **不會** 進入那些 `enumerable` 屬性是 `false`,舉例來說, 陣列中 `length` 的屬性
6-
5+
> **注意: ** `for in` 迴圈 **不會** 進入那些 `enumerable` 屬性是 `false`,舉例來說,陣列中 `length` 的屬性
6+
77
// 修改 Object.prototype
88
Object.prototype.bar = 1;
99

@@ -34,7 +34,7 @@
3434

3535
### 總結
3636

37-
推薦 **總是** 使用 `hasOwnProperty`。不要對程式碼的環境做任何假設,不要假設原生的對象是否被擴張
37+
推薦 **總是** 使用 `hasOwnProperty`。不要對程式碼的環境做任何假設,不要假設原生的對象是否被擴張
3838

3939
[1]: http://www.prototypejs.org/
4040

doc/zhtw/object/hasownproperty.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## `hasOwnProperty`
1+
## `hasOwnProperty`
22

33
為了判斷一個物件是否包含 *自定義* 屬性而 *不是* [原形](#object.prototype)上的屬性,我們需要使用繼承 `Object.prototype``hasOwnProperty` 方法。
44

@@ -8,9 +8,9 @@
88
`hasOwnProperty` 是 JavaScript 中唯一一個處理屬性但是 **** 找原型鏈的函式。
99

1010
// 修改 Object.prototype
11-
Object.prototype.bar = 1;
11+
Object.prototype.bar = 1;
1212
var foo = {goo: undefined};
13-
13+
1414
foo.bar; // 1
1515
'bar' in foo; // true
1616

@@ -35,6 +35,8 @@ JavaScript **不會** 保護 `hasOwnProperty`被占用,因此如果碰到存
3535
// 使用其他對象的 hasOwnProperty,並將其上下設置為 foo
3636
({}).hasOwnProperty.call(foo, 'bar'); // true
3737

38+
// 也可以透過原生 Object prototype 的 hasOwnProperty 函數來達成目的
39+
Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
3840

3941
### 結論
4042

doc/zhtw/object/prototype.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## Prototype
2-
3-
JavaScript 不包含原本繼承的模型。然而它使用的是*原型*模型*
2+
3+
JavaScript 不包含原本繼承的模型。然而它使用的是*原型*模型。
44

55
然而常常有人提及 JavaScript 的缺點,就是基於原本繼承模型比類繼承更強大。
66
現實傳統的類繼承模型是很簡單。但是在 JavaScript 中實現元繼承則要困難很多。
@@ -28,11 +28,11 @@ JavaScript 不包含原本繼承的模型。然而它使用的是*原型*模型*
2828
// 修正 Bar.prototype.constructor 為 Bar 本身
2929
Bar.prototype.constructor = Bar;
3030

31-
var test = new Bar() // 開啟一個新的實例
31+
var test = new Bar(); // 開啟一個新的實例
3232

3333
// 原型鏈
3434
test [instance of Bar]
35-
Bar.prototype [instance of Foo]
35+
Bar.prototype [instance of Foo]
3636
{ foo: 'Hello World' }
3737
Foo.prototype
3838
{ method: ... }
@@ -80,9 +80,8 @@ JavaScript 不包含原本繼承的模型。然而它使用的是*原型*模型*
8080

8181
在寫複雜的程式碼的時候,要 **充分理解** 所有程式繼承的屬性還有原型鏈。
8282
還要堤防原型鏈過長帶來的性能問題,並知道如何通過縮短原型鏈來提高性能。
83-
絕對 **不要使用** native prototype` 除非是為了和新的 JavaScript 引擎作兼容。
83+
絕對 **不要使用** `native prototype` 除非是為了和新的 JavaScript 引擎作兼容。
8484

8585
[1]: http://en.wikipedia.org/wiki/Monkey_patch
8686
[2]: http://prototypejs.org/
8787
[3]: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach
88-

0 commit comments

Comments
 (0)