JS中关于Class类的静态属性和静态方法

目录 一、类的两个概念 二、对象的两个部分 1、属性  2、方法 三、静态方法使用：在方法前加上static关键字 1、为什么使用静态方法 三、总结 1、静态属性和非静态属性的区别 2.使用static的注意事项

一、类的两个概念

1、类自身；

2、类的实例对象；

总的来说：静态的是指向类自身，而不是指向实例对象，主要是归属不同，这是静态属性，静态方法的核心。

二、对象的两个部分

1、属性 

分为：实例属性、静态属性（类属性）、只读属性

2、方法

分为：实例方法、静态方法（类方法）

class Person {
? //1、定义方法
? /* 1.1、实例属性，直接定义的属性，要new实例后，实例去访问的*/
? name= "tom";
? age = 10;
? /* 1.2、静态属性（类属性），通过static开头的属性，Person类可以访问,
? ? 不需要创建实例，实例访问不到 */
? static height = 180;
? /* 1.3、只读属性，readonly开头的属性，只可读，不可改*/
? readonly money= 1000;
?
? //2、定义方法
?
? say(){
? ? ? console.log('hello world'); ? ?
? }
? static work(){
? ? ? console.log('我能挣钱'); ? ?
? }
}
const per = new Person();
//per.money=2000 ?报错，不可修改
console.log(per, Person.height);
per.say() ?//调用实例方法
Person.work() //调用类方法

三、静态方法使用：在方法前加上static关键字

1、为什么使用静态方法

阻止方法被实例继承，类的内部相当于实例的原型，所有在类中直接定义的方法相当于在原型上定义方法，都会被类的实例继承，但是使用static静态方法定义的不会被实例继承。

? class User{
? ? ? ? ? ? static call(){
? ? ? ? ? ? ? ?console.log('你好呀');
? ? ? ? ? ? }
? ? ? ? }
? ? ? User.call()//你好呀
?
? ? ? let ff = new User()
? ? ? ff.call()//报错，实例不能访问类的静态方法

这里类User可以直接使用call方法，但它的是实例ff却不可以！

但是我们可以通过继承的方式，让另一个类来继承User里面的方法

class User{
? ? ? ? ? ? static call(){
? ? ? ? ? ? ? ?console.log('你好呀');
? ? ? ? ? ? }
? ? ? ? }
??
??
? ? ?class foo extends User{}
? ? ?foo.call()//'你好呀' ? ?

这里foo类通过继承User类，才可以使用User里面的静态方法。

我们知道class类这个概念是es6后出来的新特性，用以前的es5方法写就是：

?class User{
? ? ? ? ? ? static call(){
? ? ? ? ? ? ? ?console.log('静态方法的你好呀');
? ? ? ? ? ? }
? ? ? ? ? ? call(){
? ? ? ? ? ? ? ?console.log('构造函数方法的你好呀');
? ? ? ? ? ? }
? ? ? ? }
?
//等同于
function User(){}
? ? ?User.call=function(){
? ? ? ? ?console.log('静态方法的你好呀');
? ? ?}
? ?
? ? User.prototype.call=function(){
? ? ? ? ?console.log('构造函数方法的你好呀');
? ? ?}

但是User类里面的构造函数方法是可以被实例调用的，如图：

function User(){}
User.prototype.call=function(){
? ? ? ? ?console.log('你好呀');
? ? ?}
? ? ?let h1 =new User()
? ? ?h1.call()//你好呀

完整版如下

class User {
? ? ? ? ? ? call() {
? ? ? ? ? ? ? ? // 这里面的this指向构造函数的对象
? ? ? ? ? ? ? ? console.log(this === hh); // true
? ? ? ? ? ? ? ? console.log("构造函数方法的你好呀");
? ? ? ? ? ? }
? ? ? ? ? ? static call() {
? ? ? ? ? ? ? ? // 这里面的this指向类本身
? ? ? ? ? ? ? ? console.log(this === User); // true
? ? ? ? ? ? ? ? console.log("静态方法的你好呀");
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 静态方法
? ? ? ? User.call(); //静态方法的你好呀
?
? ? ? ? // 构造函数方法
? ? ? ? let hh = new User();
? ? ? ? hh.call(); //构造函数方法的你好呀

三、总结

1、静态属性和非静态属性的区别

在内存中存放的位置不同：所有static修饰的属性和方法都存放在内存的方法区里，而非静态的都存在堆内存中 出现的时机不同：静态属性和方法在没创建对象之前就存在，而非静态的需要在创建对象才存在 静态属性是整个类都公用的 生命周期不一样，静态在类消失后被销毁，非静态在对象销毁后销毁 用法：静态的可以直接通过类名访问，非静态只能通过对象进行访问

2.使用static的注意事项

带静态修饰符的方法只能访问静态属性 非静态方法既能访问静态属性也能访问非静态属性 非静态方法不能定义静态变量 静态方法不能使用this关键字 静态方法不能调用非静态方法，反之可以

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于JS中关于Class类的静态属性和静态方法的详细内容...