Words of attachment

Let’s play a game to match the words ES5, ES2015, ES2016, ES6, ES2017.

If you’re feeling a bit foggy, take a look at the history of Javascript.

  • In 2011,Standardization Organization ECMAreleaseECMAScript version 5.1
  • After the release, start to formulateECMAScript version 6.0, i.e.,ES6
  • In order to make the standard upgrade routine, it was decided to release it in June each year as the official version of the year:
    • Released in June 2015ECMAScript 2015 Standard(hereinafter referred to asES2015), which is the first version of ES6:
    • Released in June 2016ECMAScript 2016 Standard(hereinafter referred to asES2016) with minor revisions
    • Released in June 2017ES2017standard

So the answer to the game above is:

ES6 and ES5

As an “old” student who walked into the front end under the guidance of JavaScript Advanced Programming at JS Level, I was often “troubled” by the way ES5 and ES6 were written and worried that the code was not “new” enough. As time and experience contribute to the evolution of languages, it may be interesting to observe how a feature/grammar changes.

Today we’ll take a look at some of the syntax in ES6 and see how it can be implemented in ES5.

let

ES5 has only global scope and function scope, while ES6 adds block-level scope through let syntax to enhance rationality in some scenarios.

ES6

for (let i = 0; i < 3; i++) {
    // 
}
console.log(i); // ReferenceError: i is not defined
Copy the code

ES5

(function() {
    for (var i = 0; i < 3; i++) {
    // 
    }
})();
console.log(i); // ReferenceError: i is not defined
Copy the code

const

There are no constants in ES5, and constants are usually “agreed upon” by uppercase naming conventions that do not guarantee against change. Const is new in ES6.

ES6

const a = '123';

try {
  a = '456';
} catch(err) {
  // err: TypeError: Assignment to constant variable
  console.log(a); / / '123'
}
Copy the code

ES5

Object.defineProperties(window, {
  a: {
    value: '123'.writable: false}}); a ='456';
console.log(a); / / '123'
Copy the code

Class

Unlike the other new syntactic features, classes in ES6 are essentially syntactic sugar for JavaScript’s existing prototype-based inheritance.

Declare an animal class

ES6

class Animal {
  constructor(type, name) {
    this.type = type;
    this.name = name;
  }
  static eat() {
  }
  speak() {
    console.log(this.name + ' say:'); }}Copy the code

ES5

function Animal(type, name) {
    this.type = type;
    this.name = name;
}
Animal.eat = function () {
}
Animal.prototype.speak = function () {
    console.log(this.name + ' say');
}
Copy the code

Instantiate a xiaoming student

var a = new Animal('people'.'xiaoming');
a.speak();
Copy the code

Declaration of feline (Inherited animal)

ES6

class Cat extends Animal {
    constructor(name) {
        super('cat', name);
    }
   
    speak() {
        super.speak();
        console.log('meow'); }}Copy the code

ES5

function Cat(name) {
    Animal.call(this.'cat', name);
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

// Static method
Cat.eat = Animal.eat;

Cat.prototype.speak = function () {
  Animal.prototype.speak.call(this);
  console.log('meow');
};

Copy the code

Instantiate a cat named Curly, and meow

var juanjuan = new Cat('juanjuan');
juanjuan.speak(); // juanjuan say: meow
Copy the code

By contrast, ES6 is more elegant

Module

ES6 import/export

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

/ / reference
import { pi, sum } from 'lib/math';
console.log('two PI =' + math.sum(math.pi, math.pi));
Copy the code

ES5 require/exports

// lib/math.js
exports.sum = sum;
function sum(x, y) {
  return x + y;
}
var pi = exports.pi = 3.141593;

/ / reference
var math = require('lib/math');
console.log('two PI =' + math.sum(math.pi, math.pi));
Copy the code

However, these two notations are not “equivalent”. It starts with javascript’s modular architecture.

Javascript has never had a module architecture, so the community has developed several module loading schemes. The common ones are CommonJS for servers and AMD for browsers. (UMD was also introduced for compatibility).

Both CommonJS and AMD modules determine module relationships at run time. That is, load the module as a whole (all the methods under the module), generate an object, and then read the methods from that object. This loading is called “runtime loading.”

/ / CommonJS module
let { stat, exists, readFile } = require('fs');

/ / is equivalent to
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;
Copy the code

ES6 modules, however, are not objects.

/ / ES6 module
import { stat, exists, readFile } from 'fs';
Copy the code

The essence of the above code is to load three methods from the FS module and none of the others. This type of loading is called “compile-time loading” or static loading, meaning ES6 modules can be loaded at compile time, which is much more efficient than CommonJS modules. Of course, this also makes it impossible to reference the ES6 module itself because it is not an object.

The module part is actually worth studying. (I’m not quite sure)

At the end

Behind the grammar are the “features” of the language itself, which appear to solve the problems of some scenarios. Going back to the source is a great way to learn. See you next time