Краткое введение в некоторые новые функции ECMAScript 6
Функции со стрелками
Стрелочные функции обеспечивают сокращение для записи функций с использованием =>
. В отличие от функций, стрелки используют тот же лексический код this
, что и окружающий их код.
//ES5 var multiplyByTwo = function(num) { return num * 2; }; //ES6 var multiplyByTwo = num => num * 2;
Классы
Классы в основном представляют собой синтаксический сахар. Они обеспечивают такое же прототипическое наследование старых, но с гораздо более чистым и удобным синтаксисом. Классы поддерживают супервызовы, экземпляры и статические методы и конструкторы.
//ES5 var Person = function(first, last) { this.first = first; this.last = last; }; Person.prototype.personMethod = function() { // ... }; var Employee = function(first, last, position) { Person.call(this, first, last); this.position = position; }; Employee.prototype = Object.create(Person.prototype); Employee.prototype.constructor = Employee; Employee.prototype.employeeMethod = function() { // ... };
//ES6 class Person { constructor(first, middle, last) { this.first = first; this.middle = middle; this.last = last; } personMethod() { // ... } } class Employee extends Person { constructor(first, middle, last, position) { super(first, middle, last); this.position = position; } employeeMethod() { // ... } }
Пусть и Конст
let
заменяет var
. const
используется, когда переменные не будут переназначаться.
//var vs let
function varTest() {
var x = 1;
if (true) {
var x = 2; // same variable!
console.log(x); // 2
}
console.log(x); // 2
}
function letTest() {
let x = 1;
if (true) {
let x = 2; // different variable
console.log(x); // 2
}
console.log(x); // 1
}
//const
const MY_NUM = 26;
MY_NUM = 3; // ERROR
Шаблоны строк — интерполяция строк
Больше синтаксического сахара, но для строк!
//ES5 let first = "Mean", middle = "Joe", last = "Green"; console.log("My name is " + first + " " + middle + " " + last + "."); //ES6 let first = "Mean", middle = "Joe", last = 'Green'; console.log(`My name is ${first} ${middle} ${last}.`);