13 636
правок
Изменения
м
Нет описания правки
</source>
* '''var''' локальны в рамках функции или Global Scope (в браузере - браузере — window)
* '''let''' и '''const''' локальны, как и положено, в рамках блока
* У прототипа может быть свой прототип ⇒ наследование
* {{mag|object.__proto__}} — прототип этого объекта (класс, по сути)
*: {{gray|невидим в IE <= 8; можно object.constructor.prototype}}
* {{mag|function.prototype}} — прототип, создаваемый этой функцией как конструктором
=== this @@ ===
* this передаётся отдельно, как "контекст вызова"«контекст вызова»* this можно "подменить" «подменить» через '''function.apply(obj, arguments)''' / '''function.call(obj, arg1, arg2, ...…)'''
* обычные функции/замыкания '''не помнят this''' (!)
* arrow functions '''помнят''' this
* this можно "запомнить" «запомнить» через function.bind() {{gray|(IE9+ / FF4+)}}
*: также через function.bind() можно сделать '''карринг'''
*: {{gray|(ну или явно создав замыкание)}}
=== this - this — примеры @@ ===
<source lang="javascript">
* a == b (мягкое сравнение) и a === b (точное сравнение)
*: <tt><nowiki>"" == false, 0 == false, "1" == true, 1 == true, "5" == 5, null == undefined</nowiki></tt>
* regexp literals: <tt>var re = /<html[^<>]*>/i;</nowiki>
* break label, continue label
* Цикл по ключам: <tt><nowiki>for (var i in obj) {}</nowiki></tt>
// Эквивалентно A.prototype.m = ( ( function(){} ) ( function() { B.prototype.m = ... } ) )();
</source>
== <span style="font-family: Consolas; background: #f1dd56; padding: 5px; font-style: normal">ES6</span> @@ %% ==
Он же ES2015. А также ES2016, ES2017
http://es6-features.org/, https://babeljs.io/repl/
== Фичи ES6 @@ ==
Уже сказал про:
* let/const
* arrow functions
* for .. of
== Функции, локальные в блоках @@ ==
(Block-scoped functions)
<source lang="javascript">
{
function foo () { return 1 }
foo() === 1
{
function foo () { return 2 }
foo() === 2
}
foo() === 1
}
</source>
== Вычислимые свойства объектов @@ ==
ES6
<source lang="javascript">
var b = "key";
var a = { [b+"_value"]: "v2" }; // выражение в []
</source>
ES5
<source lang="javascript">
var b = "key2";
var a = { key: "value" }; // ключи - только литералы, можно без кавычек
a[b] = 'v2'; // динамические ключи только так
</source>
== Destructuring @@ ==
«Деструктивное присваивание»
<source lang="javascript">
var obj = { key: 'abc', value: [ 1, 2 ] };
var { key: k, value: [ a, b ], other: 3 } = obj; // 3 - значение по умолчанию
// можно в параметрах функции!
[ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ].reduce(
(obj, [ k, v ]) => { obj[k] = v; return obj; })
, {});
</source>
== Оператор распаковки @@ ==
<source lang="javascript">
function f(...args) {}
f(...iterable);
// Кстати, в ES5 нельзя сделать apply конструктору. А тут:
new Object(...args);
// Распаковка массива
let arr = [ ...iterable, 4, 5, 6 ];
// слияние объектов. у каждого фреймфорка было своё - $.extend, Ext.extend, Object.assign
let merge_obj = { ...obj1, ...obj2, key: "value" };
// Распаковка в массив
[ a, b, ...other ] = [ 1, 2, 3, 4, 5 ];
</source>
== Упрощённые названия ключей @@ ==
ES6
<source lang="javascript">
obj = { x, y, a() { return 'abc'; } };
</source>
ES5
<source lang="javascript">
obj = { x: x, y: y, a: function a() { return 'abc'; } };
</source>
== Итераторы для for .. of @@ ==
<source lang="javascript">
let fibonacci = {
[Symbol.iterator]() {
let pre = 0, cur = 1;
return {
next() {
[ pre, cur ] = [ cur, pre + cur ];
return { done: false, value: cur };
}
};
}
}
for (let n of fibonacci) { if (n > 1000) break; console.log(n); }
</source>
== Классы (!) @@ ==
«Наконец-то», скажете вы.
<source lang="javascript">
class Shape
{
constructor (id, x, y)
{
this.id = id;
this.move(x, y);
}
move (x, y)
{
this.x = x;
this.y = y;
}
}
</source>
== super и property @@ ==
<source lang="javascript">
class Rectangle extends Shape
{
constructor (id, x, y, width, height)
{
super(id, x, y);
this._width = width;
this._height = height;
}
static default()
{
return new Rectangle("default", 0, 0, 100, 200);
}
set width(width) { this._width = width; }
get width() { return this._width; }
get area() { return this._width*this._height; }
}
</source>
Нюанс: IE8+, так как при трансляции в ES5 требуют Object.defineProperty().
[[Категория:VitaliPrivate]]
