js6類和對象

標籤：

[javascript] view plain copy 

1. // 第一種：對象  
2. var person = {};// 或者var obj = new Object();  
3. person.name = "king";  
4. person.age = 20;  
5. person.Introduce = function () {  
6.     alert("My name is " + this.name + ". My age is " + this.age);  
7. };  
8. person.Introduce();  
9.   
10. // 第二種：json格式的對象  
11. var person = {  
12.     name: "king",  
13.     age: 20,  
14.     Introduce: function () {   
15.         alert("My name is " + this.name + ". My age is " + this.age);   
16.     }  
17. };  
18. person.Introduce();   
19. alert(person.name);// king  
20.   
21. // 第三種（1）：類，類似於預設建構函式  
22. var Person = function () {  
23.     this.name = "king";  
24.     this.age = 20;  
25.     this.Introduce = function () {  
26.         alert("My name is " + this.name + ". My age is " + this.age);  
27.     };  
28. };  
29. var person = new Person();// 或者var person = Person();  
30. person.Introduce();  
31. alert(person.name);// 輸出：king  
32. alert(person["name"]);// 也可以使用json的訪問方式，說明使用function定義類與第二種是等效的  
33. alert(person.age);// 輸出：20  
34.   
35. // 第三種（2）：區別僅在於第一行的聲明  
36. function Person () {  
37.     this.name = "king";  
38.     this.age = 20;  
39.     this.Introduce = function () {  
40.         alert("My name is " + this.name + ". My age is " + this.age);  
41.     };  
42. };  
43. var person = new Person();  
44. person.Introduce();  
45. alert(person.name);// 輸出：king  
46. alert(person.age);// 輸出：20  
47.   
48. // 第四種（1）：可定製的類，類似建構函式  
49. var Person = function (name, age) {  
50.     this.name = name;  
51.     this.age = age;  
52.     this.Introduce = function () {  
53.         alert("My name is " + this.name + ". My age is " + this.age);  
54.     };  
55. };  
56. var person = new Person("king", 20);  
57. person.Introduce();  
58. alert(person.name);// 輸出：king  
59. alert(person.age);// 輸出：20  
60.   
61. // 第四種（2）：  
62. function Person (name, age) {  
63.     this.name = name;  
64.     this.age = age;  
65.     this.Introduce = function () {  
66.         alert("My name is " + this.name + ". My age is " + this.age);  
67.     };  
68. };  
69. var person = new Person("king", 20);  
70. person.Introduce();  
71. alert(person.name);// 輸出：king  
72. alert(person.age);// 輸出：20  
73.   
74. // 第五種：變數的封裝，將其改為私人。採用了閉包。  
75. // 在function中用this引用當前對象，通過對屬性的賦值來聲明屬性。即this定義的為公有  
76. // 如果用var聲明變數，則該變數為局部變數，只允許在類定義中調用。即var定義的為私人，不用var則為全域  
77. var Person = function (name, age) {  
78.     var name = name;  
79.     var age = age;  
80.     this.GetName = function () {  
81.         return name;  
82.     }  
83.     this.GetAge = function () {  
84.         return age;  
85.     }  
86.     this.Introduce = function () {  
87.         alert("My name is " + name + ". My age is " + age);  
88.     };  
89. };  
90. var person = new Person("king", 20);  
91. alert(person["name"]);// undefined  
92. alert(person.GetName());// king  
93.   
94. // 第五種（2）：可參考第三種（2）和第四種（2）  
95.   
96. // 第六種（1）：在函數體中建立一個對象（使用第二種），聲明其屬性再返回  
97. function Person() {  
98.     var obj =  
99.     {  
100.         ‘age‘:20,  
101.         ‘name‘:‘king‘  
102.     };  
103.     return obj;  
104. }  
105. var person = new Person();  
106. alert(person.age);// 輸出：20  
107. alert(person.name);// 輸出：king  
108.   
109. // 第六種（2）：函數體內建立對象時使用第一種方法  
110. function Person() {  
111.     var obj = new Object();  
112.     obj.age = 20;  
113.     obj.name = ‘king‘;  
114.     return obj;  
115. }  
116. var person = new Person();  
117. alert(person.age);// 輸出：20  
118. alert(person.name);// 輸出：king  

小結：上述第一種、第二種方法為直接建立一個對象字面量。第二種到第六種方法相當於提供了類，使用new操作符（可省略）建立對象執行個體。

js6類和對象