Gao Xiang, the front-end engineer of The Cloud service team of Wedoctor, loves food, technology and thrashing.
I don’t know if you’ve noticed that in the process of building our application, we have the option to target the ES version. We can usually select ES3, ES5, ES6 or even the latest ES10, but we don’t have the ES4 version.
ES4 brief
According to Wikipedia, ES4 was drafted in February 1999 and was scheduled for completion in August 2008. However, the development process is not smooth, ES4 put forward a lot of amazing new features, such as: classes, strict types, modules, etc., there is a potential to reform JavaScript, for the JS ecology at that time, the compatibility cost has become very high.
Due to being too aggressive, browser manufacturers were deeply divided, led by Yahoo, Microsoft, Google, large companies opposed to a large upgrade of JavaScript, advocating small changes; Mozilla, led by JavaScript creator Brendan Eich, is sticking with the current draft.
Prior to the release of ES4 in July 2008, ECMA held an interim meeting and decided to terminate development of ES4 and scrap the release. A few of the improvements involved were released as ES3.1 (later renamed ES5), and other radical ideas were put into a later release (ES.Next), codenamed Harmony due to the mood of the conference.
What is in ES4 draft
Classes (Classes)
Classes were eventually implemented in ES6, but in fact there was a class definition in the earliest DRAFT of ES4:
class Bar {
var val = 1
const pi = 3.14
// A function
function f(n) {
return n + val * 2 } // Getters and setters function set foo(n) { val = n } function get foo() { return val } } Copy the code
You’ll notice a slight difference between ES4’s syntax and ES6’s class syntax, and another surprise is the absence of this.
ES4 also provides the following keywords for classes:
static
final
private
,protected
,public
prototype
Interfaces
ES4 introduced the concept of interfaces, much like the Typescript we use today:
interface MyInterface {
function foo();
}
Copy the code
Strict typing
Strict type checking was introduced in ES4:
function add(a: int, b:int): int {
return a + b;
}
Copy the code
It also has typescript-like union types:
// typescript
var a: number | string;
// es4
var a: (number, string)
Copy the code
ES4 also has generics:
class Wrapper<T> {
inner: T
}
Copy the code
Like keywords
By default, types in ES4 must be exact types, but by using the like keyword, you can reduce restrictions:
function getCell(coords: like { x: int, y: int }) {
}
Copy the code
So it is possible that types in ES4 are based on nominal subtypes rather than structural subtypes.
- Nominal subtypes: In which the type declaration is identical only if it has the same name, the subtype relationship must be explicitly declared. C, Java and other languages fall into this category.
- Structural subtypes: The structural composition of the two types determines whether one type is a subtype of the other. Typescript falls into this category
New types
We already have Boolean, objetc, array, Number, BigInt, and many other basic types in the ES version, but ES4 draft also plans to introduce:
byte
Byte typein
T the integerunit
Unsigned integerdouble
A double precision floating point typedecimal
Exact numerical type
But in today’s ES development plan, only the decimal type might be implemented in the future, and it might end up looking like this:
const allowance = 1.50m
Copy the code
In fact, the m suffix also exists in ES4, used to denote price.
Letter of credit (letter of letter)
// ES4
const hi = """Hello my name is"Evert"""";
// ES6
const hi = `Hello my name is "Evert"`;
Copy the code
Is there a python smell? Of course, ES6 introduced new template strings that look a little better.
Packages (bag)
Packages are a bit like our modules today and can be imported in other files, but unlike ES6 modules, the command space for packages is more like a global namespace, a bit like Java.
package com.evertpot {
// Private
internal const foo = 5;
class MyClass {
}
} Copy the code
Use this class as follows:
const myObj = com.evertpot.MyClass;
/ / or
import * from com.evertpot;
const myObj = MyClass;
Copy the code
Generic functions
Using a generic keyword to declare a generic function is similar to, but not exactly the same as, “overloaded functions” in Typescript:
class Foo {
generic function addItem(x);
function addItem(x: int) {
}
function addItem(x: number) {
} } Copy the code
What makes ES4 function overloading even more powerful is that overloading happens at run time, whereas Typescript happens at compile time.
E4X
The full name of E4X stands for ECMAScript for XML. Here is the E4X code:
const myClass = 'welcome';
const name = 'Evert';
const foo = <div class={myClass}>{"Hello" + name }</div>;
Copy the code
Look familiar? I suspect JSX is the reference to E4X 😆. Although ES4 was never released, E4X worked in Firefox until it was removed in Firefox 10.
More features
There are many other features in ES4, such as let const block-level scope, Generator yield asynchronous schemes, and more.
Afterword.
In fact, many of the concepts in ES4 are quite radical at the moment. For the JS ecosystem at that time (IE5 era), the word “subversive” is not an overstatement, but many of the radical features remain and are finally implemented in ES6. Throughout this history, if ES4 had been implemented, the JS ecosystem would have looked different today.
In this paper, translation from https://evertpot.com/ecmascript-4-the-missing-version/