ECMAScript 5

Ecma International

– dawniej European Computer Manufacturers' Association

• www.ecma.ch
• Organizacja standaryzacyjna zał. w 1961 r. w Genewie
• CD-ROM (późn. ISO-9660), CLI, C++/CLI, C#...
• ECMA-262: ECMAScript

ECMAScript

• 1995: Brendan Eich (Netscape) tworzy język Mocha.
• Netscape zmienia nazwę Mocha na LiveScript.
• III 1996: Netscape Navigator 2.0: JavaScript
• VIII 1996: MSIE 3.0: JScript
• VI 1997: standard ECMA-262; kompromis: „ECMAScript”

ECMAScript 3

• tej wersji języka - z XII 1999 r. - zwykle używacie
• Gecko 0.6+ (od NS6!), IE 5.5 i nowsze, Opera 7+, WebKit
• wszędzie działa prawie idealnie tak samo (poza drobiazgami w IE)

ECMAScript 4

• planowana wersja, bardziej podobna do Javy (klasy, pakiety)
• implementacje: JScript.NET, ActionScript 2.0 (Flash 7)
• ES 4 nigdy nie doczekał się implementacji w przeglądarkach
• został porzucony tak jak XHTML 2 :)
• ES5 poszedł nieco w innym kierunku

ECMAScript 3.1 / 5 / 5.1

• poprawki stabilności i zgodności
• mniej nowych rzeczy w stosunku do ES3 niż w porzuconym ES4
• ...ale na tyle dużo, że przemianowano 3.1 na 5
• czerwiec 2011: ES 5.1 - drobne poprawki

ES 5: co nowego?

• JSON.parse(str), JSON.stringify(obj)
• gettery i settery własności obiektów
• nowy sposób na tworzenie: Object.create()
• zarządzanie dostępem do własności obiektów (seal(), freeze() itp.)

ES 5: co nowego?

• funkcje dowiązane: Function.prototype.bind()
• "string"[2] zamiast "string".charAt(2)
• tryb ścisły (strict mode)
• dodatkowe metody w Array, String i Date
• słowa kluczowe jako nazwy własności (np. obiekt.class, obiekt.if)

Kto wspiera ES5?

• pełne wsparcie: Firefox 4 i nowsze
• pełne wsparcie oprócz strict mode: IE 9, Chrome 7
• pełne wsparcie oprócz bound functions: WebKit nightlies
• pozostałe - kangax ma tabelkę :)
• docelowo wszystkie przeglądarki w przyszłości będą to implementować
• wiele z nowych rzeczy można dodać polyfillami nawet do IE6

JSON

• proste i bezpieczne (nie jak eval()) parsowanie JSON-a:
  var o = JSON.parse('{"prop":"value"}');
• serializacja do JSON-a:
  var s = JSON.stringify({prop: "value"});
• IE8+, Fx3.5+, Saf4+, Op10.5+; polyfill: json2.js
• Nie ma żadnego powodu, żeby nie używać tego już teraz.

Funkcje dowiązane

• Function.prototype.bind(thisObj [, arg1, arg2, ..., argN ])
• zwraca funkcję z this ustawionym na thisObj i, opcjonalnie, początkowymi argumentami
• IE9+, Fx4+, Chrome 7+; polyfill: w MDN
• Również nie ma powodu, żeby nie używać tego już teraz

Przykład

// dotychczas:
document.getElementById("foo").onclick = function () {
	c0nsole.write("kliknięto foo");
}

• this w dowiązanej funkcji wskazuje na 1. argument bind (c0nsole)
• kolejne (opcjonalne) argumenty bind() stają się argumentami c0nsole.write

Nowości w Array

• Array.isArray(anObj) - czy obiekt jest tablicą (niezależnie od pochodzenia)
• arr.indexOf(), arr.lastIndexOf() - jak dla String
• Funkcje wyższego rzędu

Array: funkcje wyższego rzędu

• fwr - funkcje, które zwracają lub przyjmują jako argument inne funkcje
• więcej teorii - na Wikipedii ;-)
• every, some, forEach, map, filter, reduce, reduceRight

every, some

arr.every(function (arrayItem, index, array) {/*...*/})

- sprawdza, czy każdy element tablicy spełnia warunek

arr.some(function (arrayItem, index, array) {/*...*/})

sprawdza, czy choć jeden element spełnia warunek

filter

arr.filter(function (arrayItem, index, array) {/*...*/})

- zwraca nową tablicę złożoną z elementów oryginalnej tablicy spełniających warunek

map

arr.map(function (arrayItem, index, array) {/*...*/})

zwraca nową tablicę złożoną z elementów oryginalnej tablicy przekształconych przez funkcję-argument

forEach

arr.forEach(function (arrayItem, index, array) {/*...*/})

wywołuje zadaną funkcję na każdym elemencie tablicy (będzie jej argumentem)

reduce

arr.reduce(function (accum, currVal, index, array){/*...*/}, initialVal)

Wykonuje funkcję na akumulatorze i każdej wartości tablicy (od lewej do prawej), by uprościć ją do pojedynczej wartości.

reduce

arr.reduce(function (accum, currVal, index, array){/*...*/}, initialVal)

Podanie initialVal sprawia, że accum będzie w pierwszym przebiegu równy initialVal, a currVal = arr[0]. Niepodanie initialVal (jak poprzednio) sprawia, że accum w pierwszym przebiegu jest równy arr[0], a currVal = arr[1].

reduceRight

arr.reduceRight(function (accum, currVal, index, array){/*...*/}, initialVal)

Działa analogicznie jak reduce, z tym że zaczyna od końca i kieruje się do początku tablicy.

Date i String - nowości

• Date.now() - zwraca liczbę ms od 1.01.1970
• Date.prototype.toISOString() - reprezentacja ISO-8601 danej daty
• String.prototype.trim() - kopia stringa bez początkowych i końcowych białych znaków

Tryb ścisły (Strict Mode)

• krótko mówiąc, tryb ścisły ogranicza to, co D. Crockford nazywa „złymi częściami” JS.
• tryb ścisły włączamy w pliku przez taki ciąg znaków na początku pliku: "use strict";
• możemy też go włączyć tylko w ramach danej funkcji: function () { "use strict"; /* dalszy kod funkcji */ }

Tryb ścisły (Strict Mode)

• kod w SM wykonuje się inaczej, pewne konstrukcje są niedozwolone składniowo (with!) , inne wyrzucają wyjątki lub zmieniają zachowanie
• należy więc zachować ostrożność przy zlepianiu różnych skryptów w jeden, jeśli któryś z nich zawiera globalną pragmę "use strict";!
• nie mamy dziś czasu na omówienie ograniczeń złych praktyk, jakie wprowadza Strict Mode...
• ...przedstawiam je na blogu

Obiekty. Na nowo.

Zanim powiemy, co jest nowe, przypomnijmy, co było dotychczas możliwe w JS.

Typowy obiekt JS

var anObject = {
  prop1: value1,
  prop2: value2,
  // ...
  propN: valueN
};

Łańcuch prototypów

Object.prototype
  ...
    someOtherProto
      someProto
         ...
           anObject    

Między Object.prototype a naszym anObject może istnieć dowolna liczba obiektów w łańcuchu prototypów, z których - poczynając od dołu - pobierane będą własności nieobecne bezpośrednio w anObject.

Operacje na własnościach

• odczyt: x = anObject.prop1
• zapis lub dodanie nowej: anObject.prop2 = 8
• usunięcie: delete anObject.prop3
• wywołanie jako metoda (jeśli prop4 jest funkcją): anObject.prop4()

Ograniczenia

• każdy może zapisać, odczytać, usunąć, wywołać każdą własność każdego obiektu
• każdy może dodać dowolną własność do dowolnego istniejącego obiektu
• ECMAScript 3 nie przewidywał możliwości tworzenia getterów/setterów
• podejście czysto prototypowe (tzn. bez new) utrudnione

Próby obchodzenia ograniczeń

• closures
• pseudogettery/pseudosettery obj.setProp1(), obj.getProp2()
• niestandardowe rozszerzenia niektórych silników (__defineGetter__, __defineSetter__)
• anObj = Object.beget(protoObj) D. Crockforda / niestd. anObj.__proto__

ES5 rozwiązuje te problemy

Nowe metody obiektu Object:

defineProperty(), defineProperties(), getOwnPropertyDescriptor(), create(), seal(), isSealed(), freeze(), isFrozen(), preventExtensions(), isExtensible(), keys(), getOwnPropertyNames()

Object.defineProperty()

• Od teraz można określić, czy własności mają być:
  • zapisywalne (writable), czy tylko do odczytu
  • wyliczalne (enumerable) - czy widać je w np. for...in, in itp.
  • konfigurowalne (configurable) - czy można zmienić deskr. lub usunąć własność
• można też definiować gettery i settery (ale nie dla writable!)

Object.defineProperty()

Object.defineProperty(obj, prop, descriptor)

• obj - obiekt, do którego dodajemy własność
• prop - nazwa własności (string)
• descriptor - deskryptor własności

Deskryptor własności

Obiekt o następujących własnościach:

• value
• writable
• configurable
• enumerable
• get
• set

...able są domyślnie false; pozostałe: undefined

Zamiast obj = {x: 42};

var obj = {}; Object.defineProperty(obj, "x", { writable: true, enumerable: true, configurable: true, value: 42 }); c0nsole.write("obj.x: " + obj.x);

Deskryptor własności: lepszy przykład :)

var obj = { _x: 5 }; Object.defineProperty(obj, "x", { enumerable: false, configurable: false, get: function () { return this._x; }, set: function (newValue) { if (newValue <= 10) { this._x = newValue; } else { this._x = -1; } } }); obj.x = 10; c0nsole.write(obj.x); obj.x = 42; c0nsole.write(obj.x);

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor(obj, propName)

pozwala pobrać deskryptor istniejącej własności.

Object.defineProperties()

To samo, co defineProperty(), ale pozwala jednocześnie zdefiniować więcej własności.

Object.defineProperties(obj, {
  prop1Name: prop1Descriptor,
  prop2Name: prop2Descriptor,
  // ...
  propKName: propKDescriptor
});

Object.preventExtensions()

uniemożliwia dodawanie nowych własności do obiektu - nikt nie będzie nam nic dopisywał do naszego obiektu

Istniejące własności można usuwać (delete), można zmieniać ich deskryptory, a także wartość.

Object.isExtensible(anObj) informuje o rozszerzalności obiektu

Object.preventExtensions()

var x = {a: 5, b: 7}; Object.preventExtensions(x); delete x.a; // zadziała x.b = 31337; // zadziała x.c = 42; // silent failure; w strict: TypeError c0nsole.write(JSON.stringify(x));

Object.seal()

zapieczętowuje obiekt, tj. uniemożliwia dodawanie kolejnych i konfigurowanie/usuwanie istniejących własności:

Object.isSealed(anObj) informuje, o zapieczętowaniu obiektu

Object.seal()

x = { a: 5, b: 7 }; Object.seal(x); x.b = 31337; // zadziała delete x.a; x.c = 8; c0nsole.write(JSON.stringify(x));

Object.freeze()

zamraża obiekt, uniemożliwiając jakiekolwiek modyfikacje:

Object.isFrozen(anObj) informuje, o zamrożeniu obiektu

Object.freeze()

x = { a: 5, b: 7 }; Object.freeze(x); x.c = 42; x.b = 31337; delete x.a; c0nsole.write(JSON.stringify(x));

preventExtensions, seal, freeze...

metoda \ operacje	zmiana wartości	konfi- gurowanie	dodawanie nowych
(brak)	✔	✔	✔
preventExtensions()	✔	✔	-
seal()	✔	-	-
freeze()	-	-	-

Object.create()

• Object.beget() D. Crockforda z dodatkowym argumentem
• anObj = Object.create(proto [, propHash ]);
  • proto - obiekt, który będzie prototypem nowego obiektu
  • propHash - opcjonalny obiekt z deskryptorami własności (analogicznie jak przy defineProperties())

Object.create(): przykład trywialny

• var anObj = Object.create(Object.prototype);
var anObj = new Object(); // równoważne
var anObj = {}; // równoważne
• oczywiście w tym przypadku ostatnia wersja ma więcej sensu :)

Object.create(): lepszy przykład

var volumeButton = {
  delta: 0, // o ile zmienia się głośność
  onActivate: function () {
    someAudioPlayer.volume += this.delta;
  }  // ...
};

var volumeUpButton   = Object.create(volumeButton),
    volumeDownButton = Object.create(volumeButton);

volumeUpButton.delta   = 1;
volumeDownButton.delta = -1;

Object.keys()

• zwraca tablicę wyliczalnych nazw własności obiektu...
• bez dziedziczonych z prototypów

Object.getOwnPropertyNames()

• zwraca tablicę wszystkich własności obiektu...
• bez dziedziczonych z prototypów

ES „Harmony” (ES6)

• zasięg blokowy zmiennych („let is the new var”)
• stałe: const x = 52;
• argumenty domyślne: function f(someArg = 5) {}
• destructuring assignment: [a, b] = [5, 10];
• rest i spread dla wywołań funkcji
• krótka notacja lambda: [1,2,3].map((x) -> x*x)
• obiekty Proxy i metaprogramowanie
• iteratory i generatory
• moduły kodu

Dziękuję za uwagę!

Pytania?

• Te slajdy: http://bit.ly/ecma5 (na warunkach CC-BY-SA)
• ecmascript.org
• es5.github.com - Annotated ES5
• ES5 in Mozilla
• kangax: ES5 compat table