• ES6 class类的静态方法static有什么用


            在项目中,工具类的封装经常使用静态方法

    1. // amap.js
    2. import AMapLoader from '@amap/amap-jsapi-loader';
    3. import { promiseLock } from '@triascloud/utils';
    4. /**
    5. * 高德地图初始化工具
    6. */
    7. class AMapHelper {
    8. static getAMap = window.AMap
    9. ? window.AMap
    10. : promiseLock(AMapHelper.setLoader, {
    11. keyGenerator: () => 'AMapHelper',
    12. forever: true,
    13. global: true,
    14. });
    15. static async setLoader() {
    16. return await AMapLoader.load({
    17. key: process.env.VUE_APP_AMAP_API_KEY,
    18. version: '2.0',
    19. plugins: [
    20. 'AMap.Geocoder',
    21. 'AMap.Geolocation',
    22. 'AMap.PlaceSearch',
    23. 'AMap.CitySearch',
    24. 'AMap.AutoComplete',
    25. 'AMap.Scale',
    26. 'AMap.ToolBar',
    27. 'AMap.MapType',
    28. 'AMap.DistrictSearch',
    29. ],
    30. AMapUI: {
    31. plugins: ['misc/PositionPicker'],
    32. },
    33. });
    34. }
    35. }
    36. export default AMapHelper;

            这里用class并不是让我们去生成AMapHelper实例,就算你生成实例,你也无法调用里面的static方法(静态方法无法被实例调用)。只能通过AMapHelper .getAMap 直接调用。为什么这么写呢?一是无需要实例化即可调用方法,节约了内存空间。二是无法被实例继承,也不会收到实例数据影响。保证了隐秘和私密性。

            

    静态方法常用场景       

            那静态方法有什么用呢?其实,我们平时的经常有用到,比如 JS 内置的 Object.keys(),Object.assign(), Array.isArray(), Number.isNaN(), Number.isIntege() ,还有楼下有人提到的 Promise.all() 等等都是静态方法,再比如框架 vue 或 jQuery 的 Vue.extend() 或 $.extend() 等也是静态方法。

            那为什么原生对象或框架(类库)会提供一些静态方法呢?开头已经讲过了,静态方法是不需要实例化的,如果你 new 一个实例就会占用一块新的内存,所以目的就是为节省内存。

            那非原生对象为什么要提供静态方法呢?一般使用场景是作为命名空间使用

             当你定义的方法不需要通过 this 访问实例,换句话说并不依赖于具体的实例,并且和类强相关时,可以封装成类的静态方法。当然这个方法可以直接定义在类外面,只不过封装到类里面更符合开闭原则,直接点的好处就是通过类名访问静态方法不会污染外层环境

            是不是难以理解,我们来看个例子:

    Date.now() 和 Date.prototype.getTime()

            两者都是返回时间戳

            区别就在于 Date.now() 返回当前的时间戳,而 Date.prototype.getTime() 返回实例化 Date 对象时,指定的某个时间的时间戳。

    1. console.log(Date.now()) // 返回当前的时间戳
    2. console.log(new Date('Jan 1, 1970 00:00:00 GMT+00:00').getTime()); // 返回 1970-1-1 00:00.. 的时间戳

            实例方法的返回值是基于当前实例对象里面的数据的,即有副作用的产生。而你使用静态方法时,除了输入-输出,没有这么一个相当于”环境变量“的 context,就少了很多灵活性。但从而又使得代码调用变得更简单,所以几乎所有的静态方法都可以作为全局方法来调用。

    静态方法的特点

            ①不需要创建实例调取

            ②在静态方法中 this 是指向类本身

    1. class Foo {
    2. static methods(){console.log(this.b)}
    3. };
    4. Foo.b = '3'
    5. Foo.prototype.b = '33'
    6. Foo.methods() // '3'

            ③仅能调用该类上的其他的 static 方法和staic属性

    1. class Foo {
    2. bcd = 44;
    3. static abc = 33;
    4. static methodsbcd(){console.log(this.bcd)}
    5. static methodsabc(){console.log(this.abc)}
    6. };
    7. Foo.methodsbcd // undefined
    8. Foo.methodsabc // 33

            ④不能以任何方式引用 this 或 super,即静态方法不具备面向对象的可继承性

    1. class A {
    2. x = 1;
    3. print() {
    4. console.log(this.x);
    5. }
    6. }
    7. class B extends A {
    8. x= 2;
    9. m() {
    10. super.print();
    11. }
    12. }
    13. var a = new B()
    14. a.m() // 2

               如果调用static方法        

            在js里边 function是一等公民,而且class其实就是构造器本身,构造器也是function,只不过是配合了原型的语法糖。静态方法其实就是function上带一个function的成员       

     

    一些别的看法

  • 相关阅读:
    相机坐标系之间的转换
    【Mac开发环境搭建】Docker安装Redis、Nacos
    React@16.x(42)路由v5.x(7)常见应用场景(4)- 路由切换动画
    无法创建 8192 MB 的匿名分页文件: 系统资源不足,无法完成请求的服务。
    koltin 泛型Any和*的区别
    【数据结构】测试5 数组和广义表
    使用FCEUX调试器寻找并修改游戏初始物品
    3.3让我们直接对显示器说点什么吧
    Vue3笔记
    Postman —— 配置环境变量
  • 原文地址:https://blog.csdn.net/weixin_42274805/article/details/133636906