1
- ## Constructors
1
+ ## 建構函式
2
2
3
- Constructors in JavaScript are yet again different from many other languages. Any
4
- function call that is preceded by the ` new ` keyword acts as a constructor.
5
-
6
- Inside the constructor - the called function - the value of ` this ` refers to a
7
- newly created object. The [ prototype] ( #object.prototype ) of this ** new**
8
- object is set to the ` prototype ` of the function object that was invoked as the
9
- constructor.
3
+ JavaScript 中的建構函式和其他語言中的建構函式是不同的。
4
+ 用 ` new ` 的關鍵字方式調用的函式都被認為是建構函式。
5
+ 在建構函式內部 - 被呼叫的函式 - ` this ` 指向一個新建立的 ` object ` 。[ prototype] ( #object.prototype ) 這是一個新的物件一個被指向函式的 ` prototype ` 的建構函式。
10
6
11
7
If the function that was called has no explicit ` return ` statement, then it
12
8
implicitly returns the value of ` this ` - the new object.
9
+ 如果被使用的函式沒有明顯的呼叫 ` return ` 的表達式,它會回傳一個隱性的 ` this ` 的新物件。
13
10
14
11
function Foo() {
15
12
this.bla = 1;
@@ -21,16 +18,13 @@ implicitly returns the value of `this` - the new object.
21
18
22
19
var test = new Foo();
23
20
24
- The above calls ` Foo ` as constructor and sets the ` prototype ` of the newly
25
- created object to ` Foo.prototype ` .
26
-
27
- In case of an explicit ` return ` statement, the function returns the value
28
- specified by that statement, but ** only** if the return value is an ` Object ` .
21
+ 在上面的例子中 ` Foo ` 建立一個建構函式,並設立一個 ` prototype ` 來創建一個新的物件叫 ` Foo.prototype ` 。
22
+ 這個情況下它顯示的 ` return ` 一個表達式,但他 ** 只** 返回一個 ` Object ` 。
29
23
30
24
function Bar() {
31
25
return 2;
32
26
}
33
- new Bar(); // a new object
27
+ new Bar(); // 返回一個新物件
34
28
35
29
function Test() {
36
30
this.value = 2;
@@ -39,23 +33,20 @@ specified by that statement, but **only** if the return value is an `Object`.
39
33
foo: 1
40
34
};
41
35
}
42
- new Test(); // the returned object
36
+ new Test(); // 回傳物件
43
37
44
- When the ` new ` keyword is omitted, the function will ** not ** return a new object.
38
+ 如果 ` new ` 的關鍵字被忽略,函式就 ** 不會 ** 回傳一個新的物件。
45
39
46
40
function Foo() {
47
- this.bla = 1; // gets set on the global object
41
+ this.bla = 1; // 獲取一個全域的參數
48
42
}
49
43
Foo(); // undefined
50
44
51
- While the above example might still appear to work in some cases, due to the
52
- workings of [ ` this ` ] ( #function.this ) in JavaScript, it will use the
53
- * global object* as the value of ` this ` .
45
+ 雖然上面有些情況也能正常運行,但是由於 JavaScript 中 [ ` this ` ] ( #funciton.this ) 的工作原理,這裡的 ` this ` 指向 * 全域對象* 。
54
46
55
- ### Factories
47
+ ### 工廠模式
56
48
57
- In order to be able to omit the ` new ` keyword, the constructor function has to
58
- explicitly return a value.
49
+ 為了不使用 ` new ` 關鍵字,建構函式必須顯性的返回一個值。
59
50
60
51
function Bar() {
61
52
var value = 1;
@@ -72,25 +63,17 @@ explicitly return a value.
72
63
new Bar();
73
64
Bar();
74
65
75
- Both calls to ` Bar ` return the same thing, a newly create object that
76
- has a property called ` method ` , which is a
77
- [ Closure] ( #function.closures ) .
78
-
79
- It should also be noted that the call ` new Bar() ` does ** not** affect the
80
- prototype of the returned object. While the prototype will be set on the newly
81
- created object, ` Bar ` never returns that new object.
82
-
83
- In the above example, there is no functional difference between using and
84
- not using the ` new ` keyword.
66
+ 上面兩個呼叫 ` Bar ` 的方法回傳的值都一樣,一個新創建的擁有 ` method ` 屬性被返回,這裡創建了一個 [ Closure] ( #function.closures ) .
85
67
68
+ 還有注意, ` new Bar() ` 並 ** 不會** 改變返回物件的原型。
69
+ 因為建構函式的原型會指向剛剛創立的新物件,而在這裡的 ` Bar ` 沒有把這個新物件返回。
70
+ 在上面的例子中,使用或者不使用 ` new ` 關鍵字沒有什麼功能性的區別
86
71
87
- ### Creating New Objects via Factories
88
72
89
- It is often recommended to ** not** use ` new ` because forgetting its use may
90
- lead to bugs.
73
+ ### 通過工廠模式創建的新對象
91
74
92
- In order to create a new object, one should rather use a factory and construct a
93
- new object inside of that factory.
75
+ 常聽到建議 ** 不要 ** 使用 ` new ` ,因為如果忘記如何使用它會造成錯誤。
76
+ 為了創建一個新的物件,我們可以用工廠方法,來創造一個新的物件在那個方法中。
94
77
95
78
function Foo() {
96
79
var obj = {};
@@ -107,22 +90,14 @@ new object inside of that factory.
107
90
return obj;
108
91
}
109
92
110
- While the above is robust against a missing ` new ` keyword and certainly makes
111
- the use of [ private variables] ( #function.closures ) easier, it comes with some
112
- downsides.
93
+ 雖然上面的方式比起 ` new ` 的調用方式更不容易出錯,並且可以充分的使用 [ 私有變數] ( #function.closures ) 所帶來的便利,但是還是有一些不好的地方
113
94
114
- 1 . It uses more memory since the created objects do ** not** share the methods
115
- on a prototype.
116
- 2 . In order to inherit, the factory needs to copy all the methods from another
117
- object or put that object on the prototype of the new object.
118
- 3 . Dropping the prototype chain just because of a left out ` new ` keyword
119
- is contrary to the spirit of the language.
120
95
121
- ### In Conclusion
96
+ 1 . 會占用更多的記憶體,因為創建的物件 ** 沒有** 辦法放在在同一個原型上。
97
+ 2 . 為了要用繼承的方式,工廠方法需要複製所有的屬性或是把一個物件作為新的物件的原型。
98
+ 3 . 放棄原型鏈僅僅是因為防止遺漏 ` new ` 所帶來的問題,這與語言本身的思想鄉違背。
122
99
123
- While omitting the ` new ` keyword might lead to bugs, it is certainly ** not** a
124
- reason to drop the use of prototypes altogether. In the end it comes down to
125
- which solution is better suited for the needs of the application. It is
126
- especially important to choose a specific style of object creation and use it
127
- ** consistently** .
100
+ ### 結語
128
101
102
+ 雖然遺漏 ` new ` 關鍵字可能會導致問題,但這並 ** 不是** 放棄只用原型的藉口。
103
+ 最終使用哪種方式取決於應用程式的需求,選擇一種程式語言風格並堅持下去才是最重要的。
0 commit comments