JAVASCRIPT定义对象的四种方式

来源:互联网 发布:天猫淘宝商城手机专卖 编辑:程序博客网 时间:2024/05/19 10:33

先写一个函数,下面几个方式会用到 

Javascript代码 

1.      function showSalary(){  

2.          alert(this.salary);  

3.      }  




工厂方式 
先创建对象,然后添加属性和方法,不需要用NEW创建对象, 
如果把函数写在内部,每次调用都会创建新的函数,放在外面,封装性不好 

Javascript代码 

1.      function createWorker(sAage,sSalary,sDepartment){  

2.        

3.        var oWorker=new Object();  

4.          

5.        oWorker.age=sAage;  

6.          

7.        oWorker.salary=sSalary;  

8.          

9.        oWorker.department=sDepartment;  

10.  //创建函数的方式一,指向我们文章开头写好的函数名,缺点是函数在对象的外部,封装性不好  

11.    oWorker.tellSalary=showSalary;  

12.  //创建函数的方式二,在对象内部声明匿名函数,虽然封装在对象内部了,但没个对象会有不同的函数版本,浪费内存  

13.    oWorker.tellSalary=function(){  

14.      alert(this.salary);  

15.    }  

16.      

17.    return oWorker;  

18.  }  

19.    

20.  var worker1=createWorker(24,1000,"Dev");  

21.  worker1.tellSalary();  

22.    

23.  var worker2=createWorker(24,3000,"Dev");  

24.  worker2.tellSalary();  



构造函数方式 
在构造函数内部不创建对象,使用this关键字,创建时候用new操作符,如果把函数声明在内部,存在和工厂方式相同的问题,重复创建函数。为每个对象都创建独立的函数版本。放在外部,封装性不好 

Javascript代码 

1.      function Worker(sAage,sSalary,sDepartment){  

2.            

3.        this.age=sAage;  

4.          

5.        this.salary=sSalary;  

6.          

7.        this.department=sDepartment;  

8.          

9.        //同工厂方式  

10.    this.tellSalary=showSalary;  

11.    //同工厂方式  

12.    this.tellSalary=function(){  

13.      alert(this.salary);  

14.    }  

15.    

16.  }  

17.    

18.  var worker3=new Worker(24,1000,"Dev");  

19.  worker3.tellSalary();  

20.    

21.  var worker4=new Worker(24,3000,"Dev");  

22.  worker4.tellSalary();  



原型方式,创建对象时不能使用构造传递参数,必须先创建对象,然后改变属性的值 

Javascript代码 

1.      function Worker(){  

2.      }  

3.        

4.        

5.      Worker.prototype.age=24;  

6.        

7.      Worker.prototype.salary=1000;  

8.        

9.      Worker.prototype.department="Dev";  

10.    

11.  Worker.prototype.homeaddress=new Array("www","dd");  

12.    

13.  // 创建多个对象时,要想一想此处为什么不会和构造函数方式及工厂方式一样,创建多个函数的实例  

14.    

15.  //要理解prototype的概念,prototype是父对象的一个实例  

16.    

17.  Worker.prototype.tellSalary=function(){  

18.      alert(this.age);  

19.  }  

20.    

21.  var worker5=new Worker();  

22.    

23.  var worker6=new Worker();  

24.    

25.  worker5.tellSalary();  

26.    

27.  alert(worker5.homeaddress)  

28.    

29.  //修改原型中引用类型的值,会影响到所有已经实例化的对象  

30.  worker6.homeaddress.push("gg")   

31.    

32.  alert(worker5.homeaddress)  



混合原型和构造函数方式 
可以传递参数构造对象,多个实例对象共享一个函数 

Javascript代码 

1.      function Worker(sAage,sSalary,sDepartment){  

2.            

3.        this.age=sAage;  

4.          

5.        this.salary=sSalary;  

6.          

7.        this.department=sDepartment;  

8.          

9.        this.homeaddress=new Array("www","dd");  

10.      

11.  }  

12.    

13.  //只创建tellSalary函数一个实例,没有内存浪费  

14.  Worker.prototype.tellSalary=function(){  

15.      alert(this.age);  

16.  }  

17.    

18.  var worker7=new Worker(23,3000,"Dev");  

19.    

20.  var worker8=new Worker(43,1000,"Dev");  

21.    

22.  worker7.tellSalary();  

23.    

24.  alert(worker7.homeaddress) // ww dd  

25.    

26.  worker8.homeaddress.push("gg")  

27.    

28.  alert(worker7.homeaddress) //www dd  

29.    

30.  alert(worker8.homeaddress) // www dd gg  



第四种的方式看上去也很散落,可以改进一下 

Javascript代码 

1.      var person=function(sname,sage){  

2.         this.name=sname;  

3.         this.age=sage;  

4.      };  

5.        

6.      person.prototype={  

7.         tellName:function(){  

8.               alert(this.name);  

9.         },  

10.       

11.     tellAge:function(){  

12.           alert(this.age);  

13.     }  

14.  };  


优点: 
  1. 可以传参数构造一个新对象 
  2. 当有多个对象产生时,不会创建多个函数实体,没有内存浪费 
  3. 封装想很好,属性和方法分开 

原创粉丝点击