I’m Jser and I’m proud

JavaScript is now the synonym of the cock silk against the rich and handsome ha, from the original fun like birth to now the king of popularity on Github, JS riding the ride of the Internet all the way high, itself from a grandpa does not love grandma does not love the killing of small script into a lofty mainstream programming language. Luck is important, and ES6 shows you how hard the language is working on its own. JavaScript has a lot to offer.

It’s been more than two years since ES6 was released in June 2015, hence the name ES2015. 2015 is unforgettable year, this year, the stock market crash, the eternal limit, the hands of the two tickets is cut in half, baby heart bitter. The same year, ES6 standard landing, as a front-end development, baby heart joy blossomed.

The new grammar of ES6 is very broken. If you want to learn it systematically, I strongly recommend ruan Yifeng’s introduction to ECMAScript 6. The purpose of this article is not to introduce the new ES6 syntax, but to talk about what ES6 brings to the JavaScript language, which I think is the most important and exciting feature of ES6.

scope

Scopes have always been the infrastructure of programming languages. JavaScript also has scopes, but its scopes are a little weird and you can fall into a pit if you’re not careful.

JavaScript scope has three types: Local, Closure, and Global, corresponding to three types of scope variables: Local, Closure, and Global.

For example, the following code:

var a = 'global'
function outer(){
    var b = 'closure'
    return function inner(){
        var c = 'local'

        console.log(a + ':' + b + ':' + c)
    }
}
outer()()
Copy the code

When outer()() is executed, both a and OUTER are global variables. All global variables in the browser environment hang on the global Window object. B is the closure variable that remains visible to functions defined within the temp function. C is a local variable, visible only inside inner functions.

It looks like there’s nothing wrong with it, but here’s what’s wrong:

if(true) {var _a = 1
}
console.log(_a)
Copy the code

Normally, _a should be undefined, but don’t think what you think is what you think. The variable _A defined in the if block becomes a global variable directly. It’s even more confusing if you’re coming from a mainstream programming language like C or Java, and it’s just plain fucking unscientific.

For, while, switch and other bracketed code blocks are not allowed to define local variables. All defined variables are global variables, and only the function, the first citizen, can define local variables. This is unscientific, unreasonable and not in line with the core socialist values.

With a bang, ES6 landed, perfectly compensating for the flaws exposed in the JavaScript above. From now on you can think what you think is what you think. In ES6, for backward compatibility, var is left unchanged. On this basis, we add a let keyword to declare variables and a const keyword to declare constants.

{
    let a = 1
}
console.log(a)
// Uncaught ReferenceError: a is not defined
Copy the code

Perfect scope mechanism can effectively avoid naming pollution, improve the reliability of programs, and reduce hidden bugs, especially in the development of large-scale collaboration projects. So the best practice is to use let all the time, and never let the var kid out of sight.

Module system

Modularity, modularity, modularity, important things three times, this is the first priority of engineering, is the most important measure to control software complexity, there is no one. However, the JavaScript language prior to 2015 did not have a module system. C has include, Java has import, CSS has a crappy @import, WRNMMP, JavaScript has undefined. If the conditions exist, go ahead; if the conditions are not created, go ahead. As a result, the warriors in the JavaScript community came up with various wheels for modularity, AMD, CMD, UMD all popping up. Do not want to use and suffering from no good solution, can only cry in the heart, it is not scientific, unreasonable, does not conform to… crazy.

ES6 landed, bringing the original module system, elegant and simple, smooth experience to ease the pain caused by the waist cut, my face filled with a long-lost smile.

Basic usage:

/* add.js */
export function add(a, b){
    return a + b
}
Copy the code

An ES module is defined and exported above. You can then reference it in any logical file:

/* main.js */
import {add} from './add'

add(1.3)
Copy the code

Module system which strong, ES6 most rampant. ES6, cut the tangle, directly ended the front-end of the long-term modular chaos, to achieve a unified. The only shame is that Node.js support for ES6 modular systems is not yet seamless. However, this is ok, after all, Node.js CommonJS is quite handy to use.

With the module system at the language level, JavaScript has also completed a transformation in the nature of the language. It is no longer a small script that plays all over the Internet, but has grown into a mainstream programming language with no heavy lifting. Module system is an indispensable standard configuration for large-scale projects, which is very important for project development and maintenance. So it’s no exaggeration to rank it among the most important features that ES6 will bring.

Class (Class)

In fact, this feature is not as important as the first two. To put it simply, the Class does what the JS prototype does — inheritance. I put it up here because I’ve been unhappy with Prototype for a long time.

JS prototype-based inheritance mechanism is borrowed from Self language. As JS’s designers put it, “it’s a one-night stand between C and Self.” Archetypal inheritance is not intuitive, or mainstream. The typical inheritance in object-oriented programming is class-based inheritance. For example, Java, C++ and other mainstream programming languages implement class-based inheritance.

Using the prototype can appear jQuery jQuery. Prototype. Init. Prototype = jQuery. The prototype this moment petrochemical code. Moreover, I looked left and right, and looked up and down, but did not see any advantages of prototypical inheritance over class inheritance, but more and more inferior. Prototype didn’t look right when I first saw it, probably because it came from C++.

Fortunately, ES6 brings class. I don’t know what you think of it, but I feel happy in my heart. I have a feeling of meeting again after a long separation.

Here’s the simplest example:

/* Point.js */
export class Shape{
    this.x = 0
    this.y = 0
}
Copy the code

The blind monk in League of Legends said “if classes are not for inheritance, they are meaningless”.

import {Point} from "./Point"

class Triangle extends Point{
    constructor() {super(a)this.sides = 3}}let a = new Triangle()
Copy the code

This code looks so intuitive, so generous, so comfortable. The concept of object oriented has been more and more widely spread in the front end, I also highly respect the class inheritance method, do not know which to prefer, anyway, in my code has not seen the shadow of prototype.