JS 静态属性与静态方法

什么是静态属性。

    function Web(url) {
        this.url = url;
    }
    let hd = new Web("newJoker");
    console.log(hd);
    Web.url = "Joker";
    console.dir(Web)

第一种打印的url是为我们每一个构造函数实例化出来的对象创建的属性，因此我们把它称为对象属性。

第二种直接使用Web.url的方式是为我们构造函数添加的属性，我们把这种属性称为静态属性。

当我们明白了函数的静态属性之后，再来看看class(类)的静态属性的定义方式。

class User {
        title = "Joker";
        static title="User的Joker"  //静态属性
    }
let obj = new User();
console.log(obj);
console.dir(User)

如果我们想给class添加静态属性，只需要在class中定义个属性，并在前面加上static，那这个属性就是为这个class创建的属性。

tips：当我们的属性是提供给所有的实例化对象使用的，我们就可以把这个属性设置为静态属性，能节省内存占用。

什么是静态方法。

    function User() {}

    User.prototype.show = function () {
        console.log('show')
    };
    User.show = function () {
        console.log("static.show");
    };
    let obj = new User();
    console.log(obj);
    console.dir(User)

首先大家应该都知道，函数扮演着多个角色，如果函数扮演者构造函数创建出实例化对象的时候，那他调用的就是prototype上的方法。如果函数作为对象被使用的时候，那么它用的就是__proto__上的方法。因此，上述代码中为函数的实例化对象添加的show方法就称为普通方法，而为User本身添加的方法，就称为静态方法。

当我们明白了函数中的静态方法之后，再来看看class中的静态方法的使用。

class User {
        show() {
            //给User的实例化对象添加的方法称为普通方法
            console.log("prototype.show");
        }
        static show(){
            //给User本身添加的方法称为静态方法
            console.log("static.show")
        }
    }
    let hd = new User();
    console.log(hd);
    User.show();