js中静态方法（属性）、实例方法（属性）、内部方法（属性）和原型的一点见解

朱雀 2020-06-20 14:57 922阅读 0赞

实例、原型形式的属性或方法，只有实例化之后，通过实例才能读取。

属性

1，私有类型 ：私有，即只能自己使用，在下面的例子，就是说只能在这个函数里使用这个属性

( function(){
        var a = "私有属性";
        alert(a); //私有属性
    })()
    alert(a);//error a没有定义

2,实例属性 ：即属于实例对象才能访问

var a = function(){
         this.x="实例属性"；
      }
      var t1 = new a();
      var t2 = new a();
      t1和t2各有一个x，各自改变相互不影响

3,原型属性:

var a = function(){this.x = "实例属性"};
       a.prototype.x = "prototype";
       var t = new a();
       alert(t.x); //实例属性
       delete(t.x); 
       alert(t.x); //原型属性
      说明先会访问实例属性，没有实例属性就会访问原型属性

4,类属性:

var a = function(){};
      a.x="类属性";
      var t = new a();
      alert(t.x); //undefined
    说明只有类才能访问类属性，实例不能访问

5,类属性综合案例:

var a = function(){  
       var x = 'a'; //内部属性、私有属性
       this.z = 'c'; //实例属性
    }  
    a.y = 'b'; //类属性
    a.prototype.m = 'd'; //原型属性
    
    var t1 = new a();  
    var t2 = new a();  
    console.log(t1.x); //undefined
    console.log(t2.x); //undefined
    console.log(t1.y); //undefined
    console.log(t2.y); //undefined
    console.log(t1.z); //c
    console.log(t2.z); //c
    console.log(t1.m); //d
    console.log(t2.m); //d
    console.log(a.x); //undefined
    console.log(a.y); //b
    console.log(a.z); //undefined
    console.log(a.m); //undefined

方法

1、静态方法的定义

var BaseClass = function() {}; // var BaseClass=new Function();  
    BaseClass.f1 = function(){//定义静态方法  
         alert(' This is a static method ');  
    }  
    BaseClass.f1();//This is a static method  
    var instance1 = new BaseClass();  
    instance1.f1();//instance1.f1 is not a function

由以上代码分析可知，静态方法不能被实例对象调用，再看以下代码

var BaseClass = new Function;  
    var Class2 = BaseClass;  
    BaseClass.f1 = function(){  
    alert("BaseClass ' s static method");  
    }  
    Class2.f2 = function(){  
    alert("Class2 ' s static method");  
    }  
    BaseClass.f1();//BaseClass ' s static method  
    BaseClass.f2();//Class2 ' s static method  
    Class2.f1();//BaseClass ' s static method  
    Class2.f2();//Class2 ' s static method

从运行结果来看，BaseClass和Class都有f1和f2静态方法，实际上这两个函数是一样的，可以执行以下代码来验证

alert(BaseClass == Class2);//true

如果删除其中一个函数中的静态方法，则对应的另一个函数的静态方法也被删除，比如执行

delete Class2.f2;

同时也会删除BaseClass中的f2

2、实例方法的定义  
    这里是利用javascript对象原型引用prototype来实现的，看以下代码

var BaseClass = function() {};  
    BaseClass.prototype.method1 = function(){  
          alert(' This is a instance method ');  
    }  
    var instance1 = new BaseClass();  
    instance1.method1();//This is a instance method

method1即为通过prototype原型引用定义的实例方法，这里也可以在实例上直接定义方法（变量），看以下代码

var BaseClass = function() {};  
    var instance1 = new BaseClass();  
    instance1.method1 = function(){  
        alert(' This is a instance method too ');  
    }   
    instance1.method1();//This is a instance method too

下面介绍通过this指针来定义实例方法（变量），看以下代码

var BaseClass = function() {  
     this.method1 = function(){  
       alert(' Defined by the "this" instance method');  
     }  
    };  
    var instance1 = new BaseClass();  
    instance1.method1();//Defined by the "this" instance method

那么同时在实例上、原型引用上和“this”上定义了相同名字的实例方法后，实例会优先调用那一个呢？请看以下代码

通过运行结果跟踪测试可以看出直接定义在实例上的变量的优先级要高于定义在“this”上的，而定义在“this”上的又高于 prototype定义的变量。即直接定义在实例上的变量会覆盖定义在“this”上和prototype定义的变量，定义在“this”上的会覆盖prototype定义的变量。

3、内部方法  
   先看以下定义