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

news2024/11/17 22:17:28

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

// 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 对象时,指定的某个时间的时间戳。

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 是指向类本身

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

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

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,即静态方法不具备面向对象的可继承性

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.coloradmin.cn/o/1066609.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[PyTorch][chapter 56][GAN 代码实现]

前言: 整个工程分为两个文件: gan.py: 网络模型搭建 main.py: 数据集生成,模型训练 目录: GAN 网络结构 gan.py main.py 一 GAN 网络结构 1.1 训练D 最大化V 1.2 训练G 固定G, 最小化 二 gan.py 功能: 实现 鉴别器D …

vue3+elementPlus el-input的type=“number“时去除右边的上下箭头

改成 代码如下 <script lang"ts" setup> import {ref} from vue const inputBtn ref() </script> <template><el-input type"number" v-model"inputBtn" style"width: 80px;" class"no_number">…

超长表单分页校验,下一页和上一页功能

父组件(最外层) <template><xx-layout title"练习"><divslot"content"class"hierarchy-tag-main"><el-steps:space"200":active"currentComponentIndex 1"align-centerstyle"margin-bottom: 30…

Flutter横屏实践

1、Flutter设置横屏 // 强制横屏 SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight ]); // 强制竖屏 SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);另…

【虹科分享】什么是Redis数据集成(RDI)?

大量的应用程序、日益增长的用户规模、不断扩展的技术需求&#xff0c;以及对即时响应的持续追求。想想这些是否正是你在经历的。也许你尝试过自己构建工具来应对这些需求&#xff0c;但是大量的编码和集成工作使你焦头烂额。那你是否知道&#xff0c;有这样一个工具可以帮助你…

数据结构-图-最小生成树问题

最小生成树 并查集定义举例说明查找某个元素属于哪个集合代码实现路径压缩 Kruskal算法原理代码实现 Prim算法原理代码实现 并查集 定义 &#x1f680;在一些应用问题中&#xff0c;需要将n个不同的元素分成一些不相交的集合。开始时&#xff0c;每个元素自成一个单元素集合&…

小商品公众号微信店铺搭建的作用是什么

小商品顾名思义就是价格低、需求广且数量多的日用产品&#xff0c;覆盖人群非常广&#xff0c;无论线上还是线下总能找到目标客户&#xff0c;铅笔、削皮刀、晾衣架等各式产品琳琅满目&#xff0c;不少商家也是热衷于小商品的售卖。 从整体来看&#xff0c;小商品商家也可线上…

tomcat整体架构

Tomcat介绍 Tomcat是Apache Software Foundation&#xff08;Apache软件基金会&#xff09;开发的一款开源的Java Servlet 容器。它是一种Web服务器&#xff0c;用于在服务器端运行Java Servlet和JavaServer Pages (JSP)技术。它可 以为Java Web应用程序提供运行环境&#x…

刚入职字节外包一个月,我却离职了...

有一种打工人的羡慕&#xff0c;叫做“大厂”。 真是年少不知大厂香&#xff0c;错把青春插稻秧。 但是&#xff0c;在深圳有一群比大厂员工更庞大的群体&#xff0c;他们顶着大厂的“名”&#xff0c;做着大厂的工作&#xff0c;还可以享受大厂的伙食&#xff0c;却没有大厂…

新手选MT4还是MT5,anzo capital昂首资本建议选择MT4,一个原因

在交易中就订单执行策略而言&#xff0c;MT4和MT5哪个更好&#xff0c;相信很多交易者和&#xff0c;anzo capital昂首资本一样很难做出判断。在MT5中&#xff0c;虽然开发人员对发送订单的流程进行了额外的复杂化&#xff0c;同时MT5在订单执行政策方面的优势在于其能够调整全…

告警繁杂迷人眼,多源分析见月明

随着数字化浪潮的蓬勃兴起&#xff0c;网络安全问题日趋凸显&#xff0c;面对指数级增长的威胁和告警&#xff0c;传统的安全防御往往力不从心。网内业务逻辑不规范、安全设备技术不成熟都会导致安全设备触发告警。如何在海量众多安全告警中识别出真正的网络安全攻击事件成为安…

Vue3项目使用Stimulsoft.Reports.js【项目实战】

Vue3项目使用Stimulsoft.Reports.js【项目实战】 相关阅读&#xff1a;vue-cli使用stimulsoft.reports.js&#xff08;保姆级教程&#xff09;_stimulsoft vue-CSDN博客 前言 在BS的项目中我们时常会用到报表打印、标签打印、单据打印&#xff0c;可是BS的通用打印解决方案又…

【JavaEE初阶】 多线程(初阶)——壹

文章目录 &#x1f332;线程的概念&#x1f6a9;线程是什么&#x1f6a9;为啥要有线程&#x1f6a9;进程和线程的区别&#x1f6a9;Java 的线程 和 操作系统线程 的关系 &#x1f60e;第一个多线程程序&#x1f6a9;使用 jconsole 命令观察线程 &#x1f38d;创建线程&#x1f…

字段位置顺序对值的影响

Unity中验证AB加载场景时报错&#xff1a; Cannot load scene: Invalid scene name (empty string) and invalid build index -1 报错原因是因为把字段放在了Start函数后面(图一)改成(图二)就好了。图一中协程使用的sceneBName字段值为null。 图一&#xff1a; 图二&#xff1a…

【C++】List -- 详解

一、list的介绍及使用 https://cplusplus.com/reference/list/list/?kwlist list 是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 list 的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&…

Windows10点击开始菜单没反应的四种解决方法

在Windows10电脑中&#xff0c;用户点击开始菜单却出现了没反映的情况&#xff0c;这样用户就无法通过开始菜单来展开操作哦&#xff0c;会给用户的正常操作带来一定程序的影响&#xff0c;下面小编给大家带来四种简单的解决方法&#xff0c;帮助大家轻松恢复Windows10电脑开始…

Selenium 高级定位 CSS

一、CSS选择器概念 CSS拥有自己的语法规则和表达式 CSS通常分为相对定位和绝对定位 CSS常和XPATH一起用于UI自动化测试 二、CSS相对定位使用场景 支持web场景支持app端的webview 三、CSS语法实战 3.1、CSS相对定位的优点 可维护性强语法简洁可以解决各种复杂的定位场景 # …

ARMv7-A 那些事 - 6.常用汇编指令

By: Ailson Jack Date: 2023.10.07 个人博客&#xff1a;http://www.only2fire.com/ 本文在我博客的地址是&#xff1a;http://www.only2fire.com/archives/158.html&#xff0c;排版更好&#xff0c;便于学习&#xff0c;也可以去我博客逛逛&#xff0c;兴许有你想要的内容呢。…

【二叉树练习题】

欢迎来到我的&#xff1a;世界 希望作者的文章对你有所帮助&#xff0c;有不足的地方还请指正&#xff0c;大家一起学习交流 ! 目录 前言初阶题二叉树的节点个数二叉树的叶子节点个数二叉树第k层节点个数二叉树查找值为x的节点 进阶题完全二叉树的节点个数翻转二叉树检验两个树…

修炼k8s+flink+hdfs+dlink(一:安装dlink)

一&#xff1a;mysql初始化。 mysql -uroot -p123456 create database dinky; grant all privileges on dinky.* to dinky% identified by dinky with grant option; flush privileges;二&#xff1a;上传dinky。 上传至目录/opt/app/dlink tar -zxvf dlink-release-0.7.4.t…