JavaScript 静态方法和实例方法

叁歲伎倆 2022-02-25 04:48 305阅读 0赞

总结: 直接定义在构造函数上的方法和属性是静态的, 定义在构造函数的原型和实例上的方法和属性是非静态的

**1.静态方法：**

function ClassA(){ //定义构造函数
    };
    ClassA.func = function(){ //在构造函数上添加一个属性(因为函数也是对象)
        console.log("This is a static method");
    }
    
    var instance = new ClassA(); //新建一个实例
    
    ClassA.func();   //This is a static method
    instance.func();   //Error:instance.func is not a function

当定义一个函数后通过 “.”为其添加的属性和函数，通过对象本身仍然可以访问得到，但是其实例却访问不到，这样的变量和函数分别被称为静态变量和静态函数。

function Obj(){
                    
    }
                
    Obj.a=0; //静态变量
                
    Obj.fn=function(){ //静态函数
                        
     }
                
     console.log(Obj.a); //0
     console.log(typeof Obj.fn); //function
                
    var o=new Obj();
    console.log(o.a); //undefined
    console.log(typeof o.fn); //undefined

**静态方法不能被实例对象调用,实例方法不能被构造对象调用。**

**2.非静态方法/实例方法（定义在原型或实例上）：**

// 1.定义在构造函数原型上的方法是实例方法 
    function ClassA(){ //定义构造函数
    };
    ClassA.prototype.func = function(){ //在构造函数的原型上添加方法
        console.log("This is an instance method.");
    }
    
    var instance = new ClassA(); //新建一个实例
    
    ClassA.func();  // Error:ClassA.func is not a function
    instance.func(); //This is an instance method.
    
    // 2.定义在某个具体对象(实例)上的方法是实例方法
    function ClassA(){ //定义构造函数
    };
    var instance = new ClassA(); //新建一个实例
    instance.func = function(){
        console.log("This is an instance method.")
    }
    // ClassA.func();  // Error:ClassA.func is not a function
    instance.func(); //This is an instance method.

**3.数组中静态方法和实例方法**

那么我们就拿数组的方法来举例。

静态方法: Array的新方法from/of都是。在控制台输入 `Object.getOwnPropertyNames(Array)`就可以看到他们的名字。

Object.getOwnPropertyNames(Array) 
    ["length", "name", "prototype", "isArray", "from", "of"]

实例方法：Array的大部分方法都是。在控制台输入`Object.getOwnPropertyNames(Array.prototype)`

["length", "constructor", "concat", "copyWithin", "fill", "find", "findIndex", "lastIndexOf", "pop", "push", "reverse", "shift", "unshift", "slice", "sort", "splice", "includes", "indexOf", "join", "keys", "entries", "forEach", "filter", "map", "every", "some", "reduce", "reduceRight", "toLocaleString", "toString", "values", "flat", "flatMap"]

参考文章：  
[https://www.cnblogs.com/roger9567/p/5048276.html][https_www.cnblogs.com_roger9567_p_5048276.html]  
[https://blog.csdn.net/wc11223/article/details/70561114][https_blog.csdn.net_wc11223_article_details_70561114]  
[https://www.cnblogs.com/hanguidong/p/9296697.html][https_www.cnblogs.com_hanguidong_p_9296697.html]

[https_www.cnblogs.com_roger9567_p_5048276.html]: https://www.cnblogs.com/roger9567/p/5048276.html
[https_blog.csdn.net_wc11223_article_details_70561114]: https://blog.csdn.net/wc11223/article/details/70561114
[https_www.cnblogs.com_hanguidong_p_9296697.html]: https://www.cnblogs.com/hanguidong/p/9296697.html