js6类和对象

Posted 2020-08-13

[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操作符（可省略）创建对象实例。