js-静态、原型、实例属性

本篇来说一下js中的属性：

1、静态属性

2、原型属性

3、实例属性

静态属性：

1. function klass(){}
2. var obj=new klass();
3. klass.count=0;
4. klass.count++;
5. console.log(obj.count);//undefined
6. console.log(klass.count);//1

静态属性存在于对象中。它的访问方式只有：类名.count 一种方式，无法通过实例访问。

如：Math.PI

原型属性：

在讲解原型属性之前有必要先提一下new操作符：
     ①:var obj=klass()和②:var obj=new klass()的结果显然是不同的。
     ①的操作仅仅是简单的调用klass函数，然后把klass函数的返回值赋给obj变量。
     ②所做的操作是：调用构造函数klass，创建一个包含prototype内部指针的新对象obj。

直观看来：使用new操作符是创建该类的实例对象，而不使用new操作符则是直接调用函数。

好了，下面继续看原型属性：

原型属性又称公共属性，它不属于某个类的实例，而是直接属于某个类。

1. function klass(){}
2. var obj=new klass();
3. klass.prototype.count=0;
4. klass.prototype.count++;
5. console.log(klass.prototype.count);//1
6. console.log(obj.count);//1

原型属性存在类的原型之中。它的访问方式有两种：

1、类名.prototype.count

2、实例对象.count

第二种访问方式的原理是：

首先在实例对象中查找，如果找到则立即返回，否则在原型（原型链）中查找（因为new操作符创建的对象包含了一个prototype的内部指针，所以可以向上追溯，查找属性），找到则返回相应的值，否则返回undefined。

所以obj.count的方式实际操作的是klass.prototype.count属性。

再看下面的例子：

1. function klass(){}
2. var obj=new klass();
3. klass.prototype.count=0;
4. klass.prototype.count++;
5. obj.count++;
6. console.log(klass.prototype.count);//1
7. console.log(obj.count);//2

 

与上面不同的是仅仅加了一句obj.count++;按照属性查找的原理，obj中并不存在count属性，所以他会在原型链中查找count属性，返回klass.prototype.count。

obj.count++即可拆分为更加直观的：obj.count=klass.prototype.count+1;可以看出这一句话是简单的赋值也是属性定义：

首先给obj定义了一个实例属性count，再将klass.prototype.count+1的结果赋值给obj.count。

所以klass.prototype.count的结果为1，obj.count的结果是2。

以上便是要讲解的第三者属性：实例属性。

实例属性是公开的(public)，可以通过类的实例(或this.)直接访问和修改它。也就是归属实例所有。

明白了相应的概念，我们再来讲一下他们各自的使用场合，看下面的例子：

1. function klass(id){
2. this.id=id;
3. }
4. klass.Uid=1;
5. klass.prototype.names=[];
6. var obj1=new klass("obj1");
7. var obj2=new klass("obj2");
8. obj1.names.push(obj1.id);
9. klass.Uid++;
10. obj1.names.push(obj2.id);
11. klass.Uid++;

1. console.log(obj1.id);//obj1
2. console.log(obj2.id);//obj2
3. console.log(klass.prototype.names);//obj1 , obj2
4. console.log(klass.Uid);//3

他们的应用场合显而易见，静态属性是全局的，原型属性是实例公有的，实例属性是各个实例所独有的。

js的属性篇基本就到此结束，有疑问或错误之处欢迎指出，请大家多多赐教。