JavaScript中定义对象的几种方式(JavaScript中没有类的概念,只有对象)

1)基于已有对象扩充其属性和方法

[javascript] view plain copy
 
  1. var object = new Object();  
  2.   
  3. object.name = "kyle";               //添加属性name  
  4. object.sayName = function(name){    //添加方法sayName()  
  5.     this.name = name;  
  6.     alert(this.name);  
  7. }  
  8. object.sayName("jack");  

2)工厂方式创建对象

(a)不带参数的构造方法
[javascript] view plain copy
 
  1. function createObject(){  
  2.     var object = new Object();  
  3.   
  4.     object.username = "kyle";  
  5.     object.age ="22";  
  6.   
  7.     object.get = function(){  
  8.         alert("用户名:"+this.username+"  年龄:"+this.age);  
  9.     }  
  10.     return object;  
  11. }  
  12. var object1 = createObject();  
  13. object1.get();  
(b)带参数的构造方法

不带参数的构造方法有个缺点,对象创建之后再修改初始值,下面采用带参数的构造方法

 

[javascript] view plain copy
 
  1. function createObject(username,age){  
  2.     var object = new Object();  
  3.   
  4.     object.username = username;  
  5.     object.age = age;  
  6.   
  7.     object.get = function(){  
  8.         alert("用户名:"+this.username+"  年龄:"+this.age);  
  9.     }  
  10.     return object;  
  11. }  
  12. var object1 = createObject("kyle","22");  
  13. object1.get();  

 

得到同样的结果,以上两种方法有个共同的缺陷,每创建一个对象,get()方法又被重新定义一次,这样增加了内存的开销,最好是让get()方法被多个对象所共享,可以采用下面的方法。

 

[javascript] view plain copy
 
  1. function get(){  
  2.     alert("用户名:"+this.username+"  年龄:"+this.age);  
  3. }  
  4.   
  5. function createObject(username,age){  
  6.     var object = new Object();  
  7.   
  8.     object.username = username;  
  9.     object.age = age;  
  10.   
  11.     object.get = get;  
  12.     return object;  
  13. }  
  14. var object1 = createObject("kyle","22");  
  15. var object2 = createObject("jack","24");  
  16. object1.get();  
  17. object2.get();  
将get()方法单独定义,object.get = get;指向get()方法,这样可以实现多个对象共享get()方法

 

3)构造函数方式创建对象

(a)不带参数

 

 

[javascript] view plain copy
 
  1. function Person(){  
  2.     //在执行第一行代码之前,js引擎会为我们生成一个对象  
  3.     this.username = "kyle";  
  4.     this.age = "22";  
  5.   
  6.     this.getInfo = function(){  
  7.         alert("姓名:"+this.username+"年龄:"+this.age);  
  8.     }  
  9.     // 此处有一个隐藏的return语句,用于将之前生成的对象返回  
  10. }  
  11.  var p1 = new Person();  
  12.  p1.getInfo();  
(b)带参数

 

 

[javascript] view plain copy
 
  1. function Person(username,age){  
  2.     this.username = username;  
  3.     this.age = age;  
  4.   
  5.     this.getInfo = function(){  
  6.         alert("姓名:"+this.username+"年龄:"+this.age);  
  7.     }  
  8. }  
  9.  var p1 = new Person("kyle","22");  
  10.  p1.getInfo();  

4)原型(prototype)方式创建对象

[javascript] view plain copy
 
  1. function Person(){  
  2.   
  3. }  
  4. Person.prototype.name = "kyle";  
  5. Person.prototype.age = "22";  
  6. Person.prototype.getInfo = function(){  
  7.     alert("姓名:"+this.name+"年龄:"+this.age);  
  8. }  
  9.   
  10. var p1 = new Person();  
  11. var p2 = new Person();  
  12. p2.name = "jack";  
  13. p2.age = "24";  
  14.   
  15. p1.getInfo();  
  16. p2.getInfo();  

单纯使用原型方式定义对象无法在构造函数中为属性赋初值,只能在对象生成之后再去改变属性。下面采用原型+构造函数方式定义对象,属性写在构造函数里面,方法使用原型方式。

 

[javascript] view plain copy
 
  1. function Person(){  
  2.     this.name = "kyle";  
  3.     thi.age = "22"  
  4. }  
  5. Person.prototype.getInfo = function(){  
  6.     alert("姓名:"+this.name+"年龄:"+this.age);  
  7. }  
  8.   
  9. var p1 = new Person();  
  10. var p2 = new Person();  
  11. p2.name = "jack";  
  12. p2.age = "24";  
  13.   
  14. p1.getInfo();  
  15. p2.getInfo();  

 

5)动态原型方式创建对象:在构造函数中通过标志量让所有对象共享一个方法,而每个对象拥有自己的属性。

[javascript] view plain copy
 
  1. function Person(){  
  2.     this.name = "kyle";  
  3.     this.age = "22";  
  4.   
  5.     if(typeof Person.flag == "undefined"){  
  6.         Person.prototype.getInfo = function(){  
  7.             alert("姓名:"+this.name+"年龄:"+this.age);  
  8.         }  
  9.         Person.flag = true;  
  10.     }  
  11. }  
  12.   
  13.   
  14. var p1 = new Person();  
  15. var p2 = new Person();  
  16. p2.name = "jack";  
  17. p2.age = "24";  
  18.   
  19. p1.getInfo();  
  20. p2.getInfo();  

 

 
 
posted @ 2017-01-15 21:45  天涯海角路  阅读(323)  评论(0)    收藏  举报