ES6中static关键字使用

桃扇骨 2023-10-06 15:41 4阅读 0赞

伴随着ES6的发布,javascript中正式的引入了class(类),让js中的面向对象更加的规范标准,同时给想跨语言发展的前端同学们提供了更高的台阶,因为,后端语言的OOP也是class,语法基本一致呀!惊不惊喜

![08a90f7e6c78f51af78f2598c10d2ba9.png][]

今天我们就来撩一把class中的static关键字,咳咳...拿出你的小马扎,和笔记本开始了.....

#### **前情回顾** ####

想必各位前端的小伙伴们都知道,一般来书在class中只有属性和方法.都可以被实例化的对象进行调用,比如这样的.

// 声明类
        class Boy {
          //定义属性
          info = '见过你的美,还能爱上谁?';
          // 定义方法
          say() {
            console.log('小姐姐,' + this.info);
    
          }
        }
        // 实例化类
        let b = new Boy;
        // 成功调用方法
        b.say();

结果

![46983f466d48e15950caa38b05142914.png][]

当我们再次声明一个使用static修饰的方法,使用实例化对象之后,你会发现

// 声明类
        class Boy {
          //定义属性
          info = '见过你的美,还能爱上谁?';
          // 定义方法
          say() {
            console.log('小姐姐,' + this.info);
    
          }
          // static 修饰的方法
          static desc() {
            console.log('小姐姐,我看见你就犯困...');
    
          }
        }
        // 实例化类
        let b = new Boy;
        // 成功调用方法
        //b.say();
        // 调用static修饰的方法
        b.desc();

代码竟然报错了!!!这个方法不能被实例化后的对象调用

![6525d366b4ef3b9f41c3bd651b0deea5.png][]

不要着急,来来让我们一起揭开static神秘的面纱

**敲黑板了,凡是被static修饰的属性和方法都是静态方法和属性,只能被类名调用,不能被实例化对象调用.同时也不能被子类继承,换句话说它属于当前这个类的**.

![e751e6aeb0795d4ca6fd0f9439038faf.png][]

#### **基本使用** ####

使用static修饰属性和方法

class A {
          // 静态属性
          static info = '见过你的美,还能爱上谁?';
          // 静态方法
          static love() {
            console.log('小姐姐,看见你就犯困,为情所困,为你所困!');
    
          }
        }
        // 直接使用类名调用
        console.log(A.info);
        A.love();

结果

![8e8206bf47998f1575db37b53b76fa07.png][]

在普通的方法中使用,静态属性和静态方法,也必修使用类名进行调用

class A {
          // 静态属性
          static info = '见过你的美,还能爱上谁?';
          // 静态方法
          static love() {
            console.log('小姐姐,看见你就犯困,为情所困,为你所困!');
    
          }
          // 普通方法,调用静态属性
          say() {
            console.log('小姐姐,' + A.info);
    
          }
        }

![1f8217e3f7af83d37097cb1a5558e194.png][]

也可以在普通方法中修改静态属性的值,使用类名直接调用即可

#### **能被继承** ####

extends的主要用于子类继承父类,继承之后子类拥有父类的的所有方法包括,静态方法和属性除外.

class A {
          // 静态属性
          static info = '见过你的美,还能爱上谁?';
          // 静态方法
          static love() {
            console.log('小姐姐,看见你就犯困,为情所困,为你所困!');
    
          }
          // 普通方法,调用静态属性
          say() {
            console.log('小姐姐,' + A.info);
    
          }
        }
        class B extends A {
          run() {
            console.log('类B的方法..');
          }
        }
        //使用类名 父类中普通方法调用
        B.love();

![f7f2a42f98eebf6de4feb05739c9b1ed.png][]

#### **注意点** ####

**如果静态方法包含this关键字，这个this指的是类，而不是实例。**

class A {
          // 静态属性
          static info = '见过你的美,还能爱上谁?';
          // 静态方法
          static love() {
            //  console.log('小姐姐,看见你就犯困,为情所困,为你所困!');
            console.log(this);
    
            // 静态类中调用普通方法
            this.say();
    
          }
          // 普通方法,调用静态属性
          say() {
            console.log('小姐姐,' + A.info);
    
          }
        }
    
        A.love();

![c78a8a340629f575b7caa547cba3f283.png][]

分析:

上面代码中，静态方法`love`调用了`this.say()`，这里的`this`指的是`A`类，而不是`A`的实例，等同于调用`A.say()`。

静态方法和普通方法是可以重名的,因为他们不属于同一个对象,像这样!

class A {
          // 静态属性
          static info = '见过你的美,还能爱上谁?';
          // 静态方法
          static love() {
            console.log('小姐姐,看见你就犯困,为情所困,为你所困!');
            //  console.log(this);
    
          }
          // 普通方法,love
          love() {
            console.log('我是普通方法....');
    
          }
          // 普通方法,调用静态属性
          say() {
            console.log('小姐姐,' + A.info);
    
          }
    
    
        }
        // 静态的love方法
        A.love();
        // 实例化类
        let a1 = new A;
    // 普通的love方法
        a1.love();

![26229810d6c3c600917ac13b29e30b95.png][]

关于class中的static中的就说道这里,有啥疑问在评论区留下,地球不爆炸,解答不中断.....

[08a90f7e6c78f51af78f2598c10d2ba9.png]: https://img-blog.csdnimg.cn/img_convert/08a90f7e6c78f51af78f2598c10d2ba9.png
[46983f466d48e15950caa38b05142914.png]: https://img-blog.csdnimg.cn/img_convert/46983f466d48e15950caa38b05142914.png
[6525d366b4ef3b9f41c3bd651b0deea5.png]: https://img-blog.csdnimg.cn/img_convert/6525d366b4ef3b9f41c3bd651b0deea5.png
[e751e6aeb0795d4ca6fd0f9439038faf.png]: https://img-blog.csdnimg.cn/img_convert/e751e6aeb0795d4ca6fd0f9439038faf.png
[8e8206bf47998f1575db37b53b76fa07.png]: https://img-blog.csdnimg.cn/img_convert/8e8206bf47998f1575db37b53b76fa07.png
[1f8217e3f7af83d37097cb1a5558e194.png]: https://img-blog.csdnimg.cn/img_convert/1f8217e3f7af83d37097cb1a5558e194.png
[f7f2a42f98eebf6de4feb05739c9b1ed.png]: https://img-blog.csdnimg.cn/img_convert/f7f2a42f98eebf6de4feb05739c9b1ed.png
[c78a8a340629f575b7caa547cba3f283.png]: https://img-blog.csdnimg.cn/img_convert/c78a8a340629f575b7caa547cba3f283.png
[26229810d6c3c600917ac13b29e30b95.png]: https://img-blog.csdnimg.cn/img_convert/26229810d6c3c600917ac13b29e30b95.png