JavaScript类属性的定义方法和区别

一下分别解释 构造变量、构造属性、原形属性和静态属性。

1 function car(param1,param2){
2     var varProperty="this is a var Property";
3     this.constructProperty="this is a construct Property";
4 }
6 car.prototype.prototypeProperty="this is a prototype property";
8 car.staticProperty="this is a static property";

构造变量 使用VAR声明和定义，它的作用域仅限于构造方法内部，包括在构造器内部定义的所有方法（构造方法）。直接通过变量名访问：varProperty。有些文章也把叫做私有属性，从作用域上看，它是私有的，但它不是属性，类的原型是无法访问它的。

构造属性 构造属性在类的构造器中通过this.定义，它是公开的(public)，可以通过类的实例(this.)直接访问和修改它

1 function car(param1,param2){
2     var varProperty="this is a var Property";
3     this.constructProperty="this is a construct Property";
4 }
5 car.prototype.prototypeProperty="this is a prototype property"
6 car.staticProperty="this is a static property"
7 
8 aCar=new car();
9 alert(aCar.constructProperty);//this is a construct Property

原型属性 在类的原型中定义，它也是公开，具有和构造属性相同的作用域，它不仅可以通过实例访问，也可以随时通过原型来访问（(ClassName.propertype.)

它和构造属性是有区别的：原型属性可以通过原型直接访问，它存储于类的原型中的，各个实例是通过指针共享访问它.

 1 function car(param1,param2){
 2     var varProperty="this is a var Property";
 3     this.constructProperty="this is a construct Property";
 4 }
 5 car.prototype.prototypeProperty="this is a prototype property"
 6 car.staticProperty="this is a static property"
 7 
 8 alert(car.prototype.prototypeProperty);//this is a prototype property
 9 aCar=new car();
10 alert(aCar.prototypeProperty);//this is a prototype property

静态属性 直接通过ClassName.的方式定义，它具有和常规OOP语言中的静态属性类似的特性，但注意，它只能通过ClassName访问，不能通过实例访问，在类的中也不能通过this访问

 1 function car(param1,param2){
 2     var varProperty="this is a var Property";
 3     this.constructProperty="this is a construct Property";
 4 }
 5 car.prototype.prototypeProperty="this is a prototype property"
 6 car.staticProperty="this is a static property"
 7 
 8 alert(car.staticProperty);//this is a static property
 9 aCar=new car();
10 alert(aCar.staticProperty);//undefined

 

构造属性和原型属性的区别

 1 function car(param1,param2){
 2     var varProperty="this is a var Property";
 3     this.constructProperty= new Array('alice','jerry');
 4 }
 5 car.prototype.prototypeProperty= new Array('alice','jerry');
 6 
 7 aCar=new car();
 8 bCar=new car();
 9 cCar=new car();
10 
11 aCar.constructProperty.push('tanya');
12 
13 alert(aCar.constructProperty);//alice,jerry,tanya
14 alert(bCar.constructProperty);//alice,jerry
15 alert(cCar.constructProperty);//alice,jerry
16 
17 bCar.prototypeProperty.push('ansel');
18 alert(aCar.prototypeProperty);//alice,jerry,ansel
19 alert(bCar.prototypeProperty);//alice,jerry,ansel
20 alert(cCar.prototypeProperty);//alice,jerry,ansel

之所以使用数组是因为，使用字符串会修改实例的指针（aCar.prototypeProperty ），使其指向新的存储副本 'New string' ，这一过程往往会掩盖了原型属性的共享特性

 

 1 function car(param1,param2){
 2     var varProperty="this is a var Property";
 3     this.constructProperty="this is a construct property";
 4 }
 5 car.prototype.prototypeProperty= "this is a prototype property";
 6 
 7 aCar=new car();
 8 bCar=new car();
 9 cCar=new car();
10 
11 aCar.constructProperty = "fuck ansel";
12 
13 alert(aCar.constructProperty);//fuck ansel
14 alert(bCar.constructProperty);//this is a construct property
15 alert(cCar.constructProperty);//this is a construct 
16 
17 bCar.prototypeProperty = 'kick ansel';
18 alert(aCar.prototypeProperty);//this is a prototype property
19 alert(bCar.prototypeProperty);//kick ansel
20 alert(cCar.prototypeProperty);//this is a prototype property

另外有一段补充代码：

 

 1 function car(param1,param2){
 2     var varProperty="this is a var Property";
 3     this.constructProperty="this is a construct property";
 4 }
 5 car.prototype.prototypeProperty= "this is a prototype property";
 6 
 7 aCar=new car();
 8 bCar=new car();
 9 cCar=new car();
10 
11 bCar.prototypeProperty = 'kick ansel';
12 alert(aCar.prototypeProperty);//this is a prototype property
13 alert(bCar.prototypeProperty);//kick ansel
14 alert(cCar.prototypeProperty);//this is a prototype property
15 
16 car.prototype.prototypeProperty ="Another New String"
17 alert(aCar.prototypeProperty);//Another New String
18 alert(bCar.prototypeProperty);//kick ansel
19 alert(cCar.prototypeProperty);//Another New String

这一修改仅仅影响到了aCar和cCar。原因其实就是因为上面 bCar.prototypeProperty = 'kick ansel' 的，它改变了 aCar.prototypeProperty 的指向，而不再指向 原型，因而他也就脱离了原型的控制。

由于原型属性的共享特性和可能发生的实例指针脱离原型的现象，我们应该仅仅对需要共享的属性使用原型定义，一般的属性应该尽量使用构造来定义；在修改原型属性时应该尽可能通过原型(car.prototype.)来访问修改，而不要通过实例(aCar.)来修改；。以此来避免可能发生的属性混乱问题。