首页 > 代码库 > js6类和对象

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类和对象