ES5
- вышел в 2009
- поддержка 97,55%
- Strict mode
- native JSON
- Array methods
Типы данных в ES5
- string
- number
- boolean
- null
- undefined
- object
Функции
Функции объявления
function myFunc () {...}
Функции выражения
var myFunc = function () {...}
Функции
var myFunc = new Function('a, b', 'console.log(a + b);');
myFunc('Hello', ' world');
Функции
var myFunc = new Function('a, b', 'console.log(a + b);');
myFunc('Hello', ' world');
Объекты
- Литералы объектов
Object.create()- ключевое слово new
Литералы объектов
var citizen = {};
citizen.name = 'Bob';
var citizen = {
name: 'Bob',
age: 18
};
Object.create
var citizen = Object.create({}, {
name: {
value: 'Bob',
enumerable: true
}
});
Object.defineProperty
writable: false,configurable: false,enumerable: false
Ключевое слово New
function Citizen () {
this.name = 'Bob'
}
var citizen = new Citizen();
console.log(citizen);
Прототип
- Объекты наследуются от объектов
- Связь хранится в
[[prototype]]
prototype не [[prototype]]- Объекты можно объединять в цепочки через прототипы
Object Человек
- голова: 1
- шея: 1
- туловище: 1
- рука: 2
- нога: 2
|
|
Object Человек
- голова: 1
- шея: 1
- туловище: 1
- рука: 2
- нога: 2
|
Object Bob
- пол: мужской
- имя: Bob
- [[Prototype]]: Object Человек
|
Bob
Object Человек
- голова: 1
- шея: 1
- туловище: 1
- рука: 3
- нога: 2
|
|
Bob
Bob
var bob = {
gender: 'man',
name: 'Bob',
__proto__: human,
}
Человек
var human = {
head: 1,
neck: 1,
body: 1,
arm: 3,
leg: 2,
}
Prototype Lookup
console.log(bob.arm);
human.leg = 4;
console.log(bob.leg);
bob.arm = 2;
bob.leg = 2;
console.log(bob.arm);
console.log(bob.leg);
human.leg = 5;
console.log(bob.leg);
bob.__proto__ = human;
human.isPrototypeOf(bob);
console.log(bob.age);
human.age = 3.2e9;
console.log(bob.age);
__proto__ в ES5 было опасным
Прототип в ES5
- Используем
Object.create(proto[, propertiesObject])
- Расширяем
.prototype конструктора
Методы чтения/записи
В литерале объекта
var man = {
name: 'Bob',
get age() {return this._age + 'y.o.';},
set age(value) { this._age = value;}
man.age = 70;
console.log(man.age);
};
Strict mode
"use strict"; или 'use strict';
Область объявления:
- весь файл, тег
<script>
- функция
Strict mode
"use strict";
var a;
a = 1;
b = 1;
Strict mode
- не допускается
with
- необходимо объявлять переменные
- при простом вызове функции в
this undefined
- ...
Объявления на уровне блоков
блочная область видимости
{
let a = 1;
console.log(a);
}
console.log(a);
Константы
const a = 1;
a = 2;
const b = {name: 'Bob'};
b.name = 'Piter';
console.log(b.name);
Временная мертвая зона
{
console.log(a);
console.log(b);
var a;
let b;
}
Область видимости объявления функций
- область видимости стала блочной в
strict mode
- объявления функций все еще поднимаются в верх области видимости
if(condition) {
function foo() {...}
} else {
function foo() {...}
}
Параметры по умолчанию
function getGreetUser(name = 'user', suffix = 'Hello, ') {
return suffix + name;
}
getGreetUser('Bob');
Стрелочные функции
var foo = (x, y) => x + y;
var bar = (x, y) => {
return x + y;
}
var baz = x => x * 2;
Стрелочные функции
- новый синтаксис
- всегда функциональные выражения
- лексический контекст this
Контекст стрелочных функций
var controller = {
do: function(...) {
btn.addEventListener('click', function(){
console.log(this);
});
}
};
Контекст стрелочных функций
var controller = {
do: function(...) {
btn.addEventListener('click', () => {
console.log(this);
});
}
};
Spread ... Rest
Когда оператор ... стоит перед массивом (или любым другим набором
доступных для перебора значений) он разделяет массив на отдельные значения
function foo(a, b, c) {
return a + b + c;
}
foo(...[1, 2, 3]);
Spread
... Rest
Когда оператор
... принимает множественные значения, например, в определении функции,
то он собирает аргументы в один массив
function foo(...a) {
return a;
}
foo(1, 2, 3);
Деструктурирующее присваивание
var [a, b, c] = [10, 2, 33];
console.log(a, b, c);
// А если с объектами
var {name, age} = {name: 'Bob', age: 22};
var {что: куда} = {name: 'Bob', age: 22};
var {name:a, age} = {name: 'Bob', age: 22}
console.log(a);
Деструктурирующее присваивание
var {name, gender} = {name: 'Bob', age: 22};
console.log(gender);
var {name, gender='male'} = {name: 'Bob', age: 22};
console.log(gender);
Глубже
var {parent: {dad: {name: name, age: age}}} = {
parent: {
dad: {
name: 'Bill', age: 70
}
}
}
console.log(name, age)
Расширения объектных литералов
- краткие свойства
- краткие методы
- вычисляемые свойства
Краткие свойства
var name = 'Bob';
var foo = {
name: name
};
Краткие свойства
var name = 'Bob';
var foo = {
name
};
Краткие методы
var foo = {
baz: function() {
//...
}
};
foo.baz();
Краткие методы
var foo = {
baz() {
//...
}
};
foo.baz();
Ключевое слово super
var bar = { a: 1};
var foo = {
baz() {
console.log(super.a);
},
__proto__: bar
};
foo.baz();
Ключевое слово
super
var bar = { a: 1};
var foo = {
a: 2,
baz() {
console.log(super.a);
},
__proto__: bar
};
Вычисляемые свойства
В ES5 была возможность получить доступ к вычисляемому имени свойства объекта
var person = {};
var field = 'name';
person[field] = 'Bob';
Вычисляемые свойства
В ES6 можно делать это внутри литерала
var field = 'name';
var person = {
[field]: 'Bob'
}
Шаблонные строки
Интерполированные строковые литералы
- могут содержать внутри себя переменные и выражения
- допускают переносы строк
- переменные и выражения внутри литерала анализируются и вычисляются
- напоминает самовызывающуюся функцию
(Immediately Invoked Function Expression)
Шаблонные строки
var str = `Это длинная строка
которую можно перенести на другую
строку`;
var name = 'Bob';
var greet = `Hello, ${name}`;
Интерполированные выражения
function upper(str) {
return str.toUpperCase();
}
var name = "Bob";
var greet = `Hello, ${upper( `${name}` )}`;
Тегированные шаблонные строки
function tag(str, ...param) {
// ...
}
tag `Hello, ${name}`;
Тегированные шаблонные строки
var name = 'Bob';
var mr = 'mr.';
function tag(str, ...param) {
return str.reduce((prev, current, index) => {
return prev + param[index - 1] + current;
});
}
var res = tag `Hello, ${mr} ${name}`;