栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

js中的static你还不会用吗?

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

js中的static你还不会用吗?

锲子

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

 

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

前情回顾

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

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

结果

 

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

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

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

 

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

是什么

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

基本使用

使用static修饰属性和方法

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

结果

 

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

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

 

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

能被继承

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

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

 

注意点

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

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

 

分析:

上面代码中,静态方法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();

 

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

我是飞翔,

愿你代码无BUG!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/756247.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号