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

news/2024/7/10 22:57:22 标签: es6, 前端, javascript

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

javascript">// amap.js

import AMapLoader from '@amap/amap-jsapi-loader';
import { promiseLock } from '@triascloud/utils';
/**
 * 高德地图初始化工具
 */
class AMapHelper {
  static getAMap = window.AMap
    ? window.AMap
    : promiseLock(AMapHelper.setLoader, {
        keyGenerator: () => 'AMapHelper',
        forever: true,
        global: true,
      });
  static async setLoader() {
    return await AMapLoader.load({
      key: process.env.VUE_APP_AMAP_API_KEY,
      version: '2.0',
      plugins: [
        'AMap.Geocoder',
        'AMap.Geolocation',
        'AMap.PlaceSearch',
        'AMap.CitySearch',
        'AMap.AutoComplete',
        'AMap.Scale',
        'AMap.ToolBar',
        'AMap.MapType',
        'AMap.DistrictSearch',
      ],
      AMapUI: {
        plugins: ['misc/PositionPicker'],
      },
    });
  }
}
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 对象时,指定的某个时间的时间戳。

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

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

静态方法的特点

        ①不需要创建实例调取

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

javascript">class Foo {
    static methods(){console.log(this.b)}
};
Foo.b = '3'
Foo.prototype.b = '33'
Foo.methods() // '3' 

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

javascript">class Foo {
    bcd = 44;
    static abc = 33;
    static methodsbcd(){console.log(this.bcd)}
    static methodsabc(){console.log(this.abc)}
};
Foo.methodsbcd // undefined
Foo.methodsabc // 33

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

javascript">class A {
  x = 1;
  print() {
    console.log(this.x);
  }
}
class B extends A {
  x= 2;
  m() {
    super.print();
  }
}
var a = new B()
a.m() // 2

           如果调用static方法        

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

 

一些别的看法


http://www.niftyadmin.cn/n/5072263.html

相关文章

9-AJAX-上-原理详解

一、定义 1、什么是Ajax Ajax:即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的…

如何轻松使用 ChatGPT 进行论文大纲和创作

ChatGPT能够编写复杂的代码、博客文章等,它可以帮助我们做很多事情。今天本篇文章分享的主要内容如何利用 ChatGPT 来撰写论文文章。下面会介绍如何轻松使用 ChatGPT 进行论文大纲和创作! 1、使用 ChatGPT 确定主题 文章非常重要的一个部分就是主题。如…

HTML 笔记:初识 HTML(HTML文本标签、文本列表、嵌入图片、背景色、网页链接)

1 何为HTML 用来描述网页的一种语言超文本标记语言(Hyper Text Markup Language)不是一种编程语言&#xff0c;而是一种标记语言 (markup language) 2 HTML标签 HTML 标签是由尖括号包围的关键词&#xff0c;比如 <html> 作用是为了“标记”页面中的内容&#xff0c;使…

【MySQL】Linux 中 MySQL 环境的安装与卸载

文章目录 Linux 中 MySQL 环境的卸载Linux 中 MySQL 环境的安装 Linux 中 MySQL 环境的卸载 在安装 MySQL 前&#xff0c;我们需要先将系统中以前的环境给卸载掉。 1、查看以前系统中安装的 MySQL rpm -qa | grep mysql2、卸载这些 MySQL rpm -qa | grep mysql | args yum …

Maven 下载安装配置

Maven 下载安装配置 下载 maven maven 官网&#xff1a;https://maven.apache.org/ maven 下载页面&#xff1a;https://maven.apache.org/download.cgi 安装 maven 将下载的apache-maven.zip文件解压到安装目录 将加压后的apache-maven目录改名为maven maven 配置环…

云原生监控系统Prometheus:基于Prometheus构建智能化监控告警系统

目录 一、理论 1.Promethues简介 2.监控告警系统设计思路 3.Prometheus监控体系 4.Prometheus时间序列数据 5.Prometheus的生态组件 6.Prometheus工作原理 7.Prometheus监控内容 8.部署Prometheus 9.部署Exporters 10.部署Grafana进行展示 二、实验 1.部署Prometh…

【RocketMQ】RocketMQ存储结构设计

CommitLog 生产者向Broker发送的消息&#xff0c;会以顺序写的方式&#xff0c;写入CommitLog文件&#xff0c;CommitLog文件的根目录由配置参数storePathRootDir决定&#xff0c;默认每一个CommitLog的文件大小为1G&#xff0c;如果文件写满会新建一个CommitLog文件&#xff…

SpringBatch作业存储和元数据(BatchConfigurer)详解

目录 一、BatchConfigurer 二、JobRepository 三、JobExplorer BatchConfigurer是Spring Batch框架中的一个接口,用于配置Spring Batch的各种组件,包括JobRepository、JobLauncher、JobExplorer等。它允许你自定义Spring Batch的配置以满足特定的需求。 通常情况下,Spri…