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

时间:2021-11-14 18:56:00

本篇来说一下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的属性篇基本就到此结束,有疑问或错误之处欢迎指出,请大家多多赐教。