js中定义对象的几种方式

转载:http://blog.sina.com.cn/s/blog_60f632050100wz7h.html

(1)基于已有对象的扩充方法:适用于临时构建对象,弊端:每次构建对象都要新建一个。

[html] view plain copy
 
  1. var object=new Object();  
  2.   
  3.    object.name="Tom";  
  4.    object.sayname=function(name)  
  5.    {  
  6.        this.name=name;  
  7.        alert(this.name);  
  8.    }  
  9.   
  10.    object.sayname("James");  

(2)工厂方法 :可以重复返回多个对象。

[html] view plain copy
 
  1. function createObject(){  
  2.   
  3.     var object=new Object();  
  4.     object.username="Tom";  
  5.     object.password="123";  
  6.     object.get=function(){  
  7.         alert(this.username+","+this.password);  
  8.     }  
  9.   
  10.     return object;  
  11. }  
  12.   
  13. var o1=createObject();  
  14. var o2=createObject();  
  15. o2.username="james";  
  16. o1.get();  
  17. o2.get();  

工厂方法的改进:

因为js的函数定义是指向一个应用的对象,所以每次构建一个object对象,都会构建一个get方法的对象,现在将get方法分离,那么就是多个object对象共用一个get对象,这样就可以节省内存空间。改进如下:

[html] view plain copy
 
  1.   function get(){  
  2.   alert(this.username+","+this.password);  
  3. }  
  4.   
  5.   function createObject(username,password){  
  6.       
  7.         var object=new Object();  
  8.         object.username=username;  
  9.         object.password=password;  
  10.         object.get=get;  
  11.   
  12.         return object;  
  13.     }  
  14.     var o1=createObject();  
  15.     var o2=createObject();  
  16.     o1.get();  
  17.     o2.get();  



(3)构造方法创建对象:

[html] view plain copy
 
  1. <span style="white-space:pre">    </span>function getInfo(){  
  2.     <span style="white-space:pre">        </span>alert(this.username+","+this.password);  
  3.     <span style="white-space:pre">    </span>}  
  4.      
  5.         function Person(username,password){  
  6.            //在执行第一行代码前,js引擎会生产一个对象。即浏览器  
  7.             this.username=username;  
  8.             this.password=password;  
  9.             this.getInfo=getInfo;  
  10.             //此处隐含了一个return object的语句。  
  11.          
  12.         }  
  13.        //只有在使用new Person();才会有上述Person中注释出现的情况,如果不适用new语句是不会          //成功的。  
  14.         var person=new Person("Tom","abc");  
  15.         person.getInfo();  
  16.         var person2=new Person("Jame","123");  
  17.         person2.getInfo();  


(4)原型方法:(prototype)
因为js的所有类都是继承Object,Object中有prototype属性,因此自定义的对象也有prototype属性:如下

[html] view plain copy
 
  1. function Person(){}  
  2.   
  3. Person.prototype.username="Tom";  
  4. Person.prototype.password="1325";  
  5.   
  6. Person.prototype.getInfor=function(){  
  7.     alert(this.username+" , "+this.password);  
  8. }  
  9.   
  10. var person=new Person();  
  11. var person2=new Person();  
  12. person.username="James";  
  13. person.getInfor();  
  14. person2.getInfor();  


这种方法的缺点就是不能传递参数,只能在创建后修改属性。另外使用这种方法定义的对象都贡献同样的属性,因为他们都共用了object对象中的prototype对象,所以所有的对象贡献原型中的属性,其中一个更改了属性,也会反映到其他对象中去。

为了解决原型方法中对象贡献属性,可以采用构造方法+原型的方法去构建对象。把属性用构造方法定好。具体方法就用原型设置。
如下:

[html] view plain copy
 
  1. <script type="text/javascript">  
  2.   
  3.     function  Person(password){  
  4.      
  5.         this.username=new Array();  
  6.          
  7.         this.password=password;  
  8.      
  9.     }  
  10.   
  11.     Person.prototype.getInfo=function(){  
  12.         alert(this.username+","+this.password);  
  13.     }  
  14. var p1=new Person("abc");  
  15. p1.username.push("Tom");  
  16. p1.getInfo();  
  17.   
  18. </script>  


(5)动态原型的方法:

[html] view plain copy
 
    1. function Person(username,password){  
    2.      
    3.     this.username=username;  
    4.     this.password=password;  
    5.   
    6.     if( typeof Person.first=="undefined" ){//通过设置标志量让getInfo只生成一次对象。  
    7.      
    8.         alert("invoke");  
    9.   
    10.         Person.prototype.getInfo=function(){  
    11.             alert(this.username+" , " +this.password);  
    12.         }  
    13.     Person.first=true;  
    14.      
    15.     }  
    16.   
    17. }  
    18.   
    19. var p1=new Person("Tom","123");     
    20. var p2=new Person("James","abc");  
    21. p1.getInfo();  
    22. p2.getInfo();  
原文地址:https://www.cnblogs.com/zr123/p/8109341.html