Наиболее полная стратегия ECMAScript ES2022-ES13

внешний интерфейс JavaScript ECMAScript 6 ECMAScript 8
Наиболее полная стратегия ECMAScript ES2022-ES13

Предложение 2022 года добавляет функции, описанные в следующей таблице, в класс ECMAScript (зеленый цвет — это существующая функция).

20210519212706

Предварительное знание

JavaScript设计模式-juejin

в пониманииClassПеред функцией поля мы должны понимать некоторые концепции объектно-ориентированного программирования. Без дальнейшего ADO ответы на картинке выше.

Свойства, связанные с полем класса

Используйте декларативные поля класса

Начиная с класса ES6, мы можем использовать в JavaScriptclassключевые слова для написания кода в традиционных парадигмах объектно-ориентированного программирования.

Но в версии ES6Class, мы можем создавать общедоступные методы экземпляра и статические методы только для этого класса. Если вы хотите объявить поля класса, вы можете использовать их только вconstructorнепосредственно черезthisРеализация задания:

class Pokemon {
  constructor() {
    this.name = "Pikachu";
  }
  attack() {}
  static starter() {}
}

Этот подход не интуитивно понятен инженерной практике и читателям кода.

Мы предпочитаем иметь декларативные поля класса, чтобы читатели кода могли понять структуру данных этого класса и быстро понять всю картину этого класса, не читая код процесса.

В предложении ES2022 мы можем использовать поля декларативного класса.

class Pokemon {
  name = "Pikachu";

  attack() {}
  static starter() {}
}

Предлагаемые функции в настоящее время находятся вChrome 74,Node 12,Safari,TypeScript 3.8,Babel 7.0+и т. д. использование в окружающей среде

частные свойства/частные методы

Одно из последних предложений — способ добавления приватных переменных в классы.

мы будем использовать# 符号表示类的私有变量. Это избавляет от необходимости использовать замыкания для сокрытия закрытых переменных, которые вы не хотите показывать внешнему миру.

пройти через#Измененная переменная-член или функция-член становится частной переменной, если вы попытаетесьClassВнешний доступ вызовет исключение. Эта функция теперь доступна в последних версиях Chrome и Node.js.

class Student {
  #name = "something";

  #name2 = "name2";

  // 实例私有方法-只能在此Class内部使用
  #instancePrivateMethod() {
    console.log("实例私有方法");
  }
}

статическое поле

Это позволяет классам иметь статические поля, подобные большинствуOOPязык. Статические поля можно использовать вместо перечислений, а также частных полей.

class Student {
  // 静态私有字段声明-只能在此Class内部使用
  static #staticFieldPrivateName = "静态私有字段声明:真名-王撕葱";

  // 静态公有字段声明
  static staticFieldPublicName = "静态公有字段声明:名-撕葱";

  // 静态公有方法-ES6已支持
  static staticPublicMethod() {
    console.log("静态公有方法");
  }

  // 静态私有方法-只能在此Class内部使用
  static #staticPrivateMethod() {
    console.log("#staticPrivateMethod:", "静态私有方法");
  }
}

Приватные методы и геттеры/сеттеры классов JavaScript

может использоваться внутри "класса"getа такжеsetКлючевое слово, установите функцию значения и функцию значения для свойства и перехватите поведение доступа к свойству.

В приведенном выше кодеpropСвойства имеют соответствующие функции сохранения и значения, поэтому поведение присваивания и чтения настраивается.

Частные свойства также могут иметь методы получения и установки.

class Student {
  #name = "something";

  #name2 = "name2";

  // 只能在此Class内部使用
  get #privateGet() {
    return this.#name;
  }
  // 只能在此Class内部使用
  set #privateSet(value) {
    this.#name = value;
  }

  get publicGet() {
    return this.#name2;
  }
  set publicSet(value) {
    this.#name2 = value;
  }
}

Статические общедоступные/приватные поля

Сценарий: использовать как перечисление

class ColorFinder {
  static #red = "#ff0000";
  static #green = "#00ff00";
  static #blue = "#0000ff";

  static colorName(name) {
    switch (name) {
      case "red":
        return ColorFinder.#red;
      case "blue":
        return ColorFinder.#blue;
      case "green":
        return ColorFinder.#green;
      default:
        throw new RangeError("unknown color");
    }
  }

  // Somehow use colorName
}

Сводка полей класса

2022js

а такжеСравнение TypeScript 2020TS

20210520171518

Обычный модификатор '/d'

Сегодня объекты ECMAScript RegExp можно вызыватьexecспособ предоставления информации о матче.

Этот результат являетсяArray, который содержит информацию о совпадающей подстроке и дополнительные свойства, указывающие входную строку, индекс во входных данных, где было найдено совпадение, и подстроку, содержащую любые именованные группы захвата.groupsобъектgroupsобъект.

Однако в некоторых более сложных сценариях этой информации может быть недостаточно. Например, ECMScript реализуетTextMateПодсветка синтаксиса языка требует не только сопоставления индексов, но иначальный и конечный индексы одной группы захвата.

Таким образом, спецификация ESRegExp.prototype.exec（）,String.prototype.matchРезультат etc добавляетindexsАтрибуты.

indexsСамо свойство представляет собой индексированный массив, содержащий пару начальных и конечных индексов для каждой захваченной подстроки.

Любые несопоставленные группы захвата будут неопределенными, как и соответствующие им элементы в массиве подстрок. Кроме того, сам индексный массив будет иметьgroupsСвойства, содержащие начальный и конечный индексы каждой именованной захватываемой группы.

const re1 = /a+(?<Z>z)?/d;

// indices are relative to start of the input string:
const s1 = "xaaaz";
const m1 = re1.exec(s1);
m1.indices[0][0] === 1;
m1.indices[0][1] === 5;
s1.slice(...m1.indices[0]) === "aaaz";

m1.indices[1][0] === 4;
m1.indices[1][1] === 5;
s1.slice(...m1.indices[1]) === "z";

m1.indices.groups["Z"][0] === 4;
m1.indices.groups["Z"][1] === 5;
s1.slice(...m1.indices.groups["Z"]) === "z";

// capture groups that are not matched return `undefined`:
const m2 = re1.exec("xaaay");
m2.indices[1] === undefined;
m2.indices.groups["Z"] === undefined;

плюс/dпозжеm1значение будет еще одноindicesАтрибуты

ожидание верхнего уровня

В сценарии загрузки по запросуPromiseСложная проблема цепочки методов

// awaiting.mjs
import { process } from "./some-module.mjs";
const dynamic = import(computedModuleSpecifier);
const data = fetch(url);
export const output = process((await dynamic).default, await data);

// usage.mjs
import { output } from "./awaiting.mjs";
export function outputPlusValue(value) { return output + value }

console.log(outputPlusValue(100));
setTimeout(() => console.log(outputPlusValue(100), 1000);

Справочная документация

  1. Двухмесячный отчет ECMAScript: TC39, апрель 2021 г., сводка хода выполнения предложения о встрече

наконец

Статья неглубокая, и вы можете оставить свое мнение в области комментариев!

Студенты, которые чувствуют, что они чего-то достигли, могут поставить лайк и подписаться на волну!

good

Прошлые статьи

Категории