Level 7. ECMAScript 5: The New Parts

Transcription

1

2 Level 7 ECMAScript 5: The New Parts

3 Any change to a standard is an act of violence.

4 Complete implementations of ECMAScript, Fifth Edition, are now beginning to appear in the best web browsers.

5 ECMAScript 1999 Third Edition 2009 Fifth Edition Default Strict ES3 ES5 For the short term, work in the intersection of ES3 and ES5/Strict. For the long term, work with ES5/Strict. Avoid ES5/Default.

6 A better JavaScript.

7 Lots of Little Things Make the standard conform better to reality. Make the browsers conform better to each other. Where the browsers disagreed, we took license to correct the standard. Interoperability will be improved. If you program well, this should have little impact on you.

8 Goals of ES5 Don't break the web. Improve the language for the users of the language. Third party security (mashups). Protect stupid people from themselves. No new syntax.

9 New Syntax Causes syntax errors on IE < 9.

10 Trailing Commas { "trailing": "comma", [ ] "trailing", "comma",

11 Reserved Word Relaxation No reserved word restrictions on property names. var a = { return: true, function: liberty, class: 'classitis', ; a.return = false; a.function(); alert(a.class);

12 Getters and Setters function make_temperature(temperature) { return { get celsius() { return temperature;, set celsius(value) { temperature = value;, get fahrenheit() { return temperature * 9 / ;, set fahrenheit(value) { temperature = (value - 32) * 5 / 9; ;

13 Multiline string literals var long_line_1 = "This is a \ long line"; // ok var long_line_2 = "This is a \ long line"; // syntax error

14 Constants Infinity NaN undefined

15 parseint parseint('08') === 8

16 Regexp Literals /regexp/ now produces new regular expression objects every time.

17 Replacing Object or Array does not change the behavior of { or []. As if by the original

18 Brand New Methods Methods can be added without breaking syntax.

19 JSON JSON.parse(text, reviver) JSON.stringify(value, replacer, space) json2.js

20 Function.prototype.bind if (!Function.prototype.hasOwnProperty('bind')) { Function.prototype.bind = function (object) { var slice = Array.prototype.slice, func = this, args = slice.call(arguments, 1); return function () { return func.apply(object, args.concat( slice.call(arguments, 0))); ; ;

21 String.prototype.trim if (!String.prototype.hasOwnProperty('trim')) { String.prototype.trim = (function (re) { return function () { return this.replace(re, "$1"); ; (/^\s*(\s*(\s+\s+)*)\s*$/));

22 Array.prototype.every if (!Array.prototype.hasOwnProperty('every')) { Array.prototype.every = function(fun, thisp) { var i, length = this.length; for (i = 0; i < length; i += 1) { if (this.hasownproperty(i) &&!fun.call(thisp, this[i], i, this)) { return false; return true; ;

23 Array.prototype.filter if (!Array.prototype.hasOwnProperty('filter')) { Array.prototype.filter = function(fun, thisp) { var i, length = this.length, result = [], value; for (i = 0; i < length; i += 1) { if (this.hasownproperty(i)) { value = this[i]; if (fun.call(thisp, value, i, this)) { result.push(value); return result; ;

24 Array.prototype.forEach if (!Array.prototype.hasOwnProperty('forEach')) { Array.prototype.forEach = function (fun, thisp) { var i, length = this.length; for (i = 0; i < length; i += 1) { if (this.hasownproperty(i)) { fun.call(thisp, this[i], i, this); ;

25 Array.prototype.indexOf if (!Array.prototype.hasOwnProperty('indexOf')) { Array.prototype.indexOf = function (searchelement, fromindex) { var i = fromindex 0, length = this.length; while (i < length) { if (this.hasownproperty(i) && this[i] === searchelement) { return i; i += 1; return -1; ;

26 Array.prototype.lastIndexOf if (!Array.prototype.hasOwnProperty('lastIndexOf')) { Array.prototype.lastIndexOf = function (searchelement, fromindex) { var i = fromindex; if (typeof i!== 'number') { i = this.length - 1; while (i >= 0) { if (this.hasownproperty(i) && this[i] === searchelement) { return i; i -= 1; return -1; ;

27 Array.prototype.map if (!Array.prototype.hasOwnProperty('map')) { Array.prototype.map = function(fun, thisp) { var i, length = this.length, result = []; for (i = 0; i < length; i += 1) { if (this.hasownproperty(i)) { result[i] = fun.call(thisp, this[i], i, this); return result; ;

28 Array.prototype.reduce if (!Array.prototype.hasOwnProperty('reduce')) { Array.prototype.reduce = function (fun, initialvalue) { var i, length = this.length; for (i = 0; i < length; i += 1) { if (this.hasownproperty(i)) { initialvalue = fun.call(undefined, initialvalue, this[i], i, this); return initialvalue; ;

29 Array.prototype.reduceRight if (!Array.prototype.hasOwnProperty('reduceRight')) { Array.prototype.reduceRight = function (fun, initialvalue) { var i = this.length - 1; while (i >= 0) { if (this.hasownproperty(i)) { initialvalue = fun.call(undefined, initialvalue, this[i], I, this); i -= 1; return initialvalue; ;

30 Array.prototype.some if (!Array.prototype.hasOwnProperty('some')) { Array.prototype.some = function(fun, thisp) { var i, length = this.length; for (i = 0; i < length; i += 1) { if (this.hasownproperty(i) && fun.call(thisp, this[i], i, this)) { return true; return false; ;

31 Date.now() if (!Date.hasOwnProperty('now')) { Date.now = function () { return (new Date()).getTime(); ;

32 Date.prototype.toISOString if (!Date.prototype.hasOwnProperty('toISOString')) { Date.prototype.toISOString = function () { function f(n) { return n < 10? '0' + n : n; ; return this.getutcfullyear() + '-' + f(this.getutcmonth() + 1) + '-' + f(this.getutcdate()) + 'T' + f(this.getutchours()) + ':' + f(this.getutcminutes()) + ':' + f(this.getutcseconds()) + 'Z';

33 Date new Date(string) and Date.parse(string) will try ISO format first.

34 Array.isArray if (!Array.hasOwnProperty('isArray')) { Array.isArray = function (value) { return Object.prototype.toString.apply(value) === '[object Array]'; ;

35 Object.keys if (!Object.hasOwnProperty('keys')) { Object.keys = function (object) { var name, result = []; for (name in object) { if (Object.prototype.hasOwnProperty.call(object, name)) { result.push(name); return result; ;

36 Object.create if (!Object.hasOwnProperty('create')) { Object.create = function (object, properties) { var result; function F() { F.prototype = object; result = new F(); if (properties!== undefined) { Object.defineOwnProperties(object, properties); return result; ;

37 Meta Object API Control over the attributes of the properties of the objects.

38 Two kinds of properties: Data properties Accessor properties

39 Attributes A property is a named collection of attributes. value: any JavaScript value writeable: boolean enumerable: boolean configurable: boolean get: function () { return value; set: function (value) {

40 Data Property var my_object = {foo: bar; var my_object = Object.create(Object.prototype); Object.defineProperty(my_object, 'foo', { value: bar, writeable: true, enumerable: true, configurable: true );

41 Accessor property Object.defineProperty(my_object, 'inch', { get: function () { return this.mm / 25.4;, set: function (value) { this.mm = value * 25.4;, enumerable: true );

42 Meta Object API Object.defineProperty(object, key, descriptor) Object.defineProperties(object, object_of_descriptors) Object.getOwnPropertyDescriptor( object, key)

43 Object.getOwnPropertyNames(object) Object.getPrototypeOf(object) Best not to use these. Secure frameworks may ban their use.

44 function replace_prototype(object, prototype) { var result = Object.create(prototype); Object.getOwnPropertyNames(object).forEach(function (key) { Object.defineProperty(result, key, Object.getOwnPropertyDescriptor( object, key)); ); return result;

45 Object Extensibility Object.preventExtentions(object) Object.seal(object) Object.freeze(object) Object.isExtensible(object) Object.isSealed(object) Object.isFrozen(object)

46 Unintended Inheritance var word_count = {; text.split(/[\s.,?!":;]+/).foreach(function count_word(word) { if (word_count[word]) { word_count[word] += 1; else { word_count[word] = 1; ); Accidental collisions: Fails when word === 'constructor'

47 Solutions in ES5 Object.create(null) creates an object that does not inherit anything. Set the enumerable attribute to false when adding methods to prototypes. That keeps them out of for in enumerations. Object.keys(object) produces an array of strings, the enumerable keys of the own (not inherited) properties.

48 Strict Mode The most important new feature in ECMAScript, Fifth Edition.

49 Strict Mode Backward compatible pragma. 'use strict'; File form. First statement in a file. (avoid) Function form. First statement in a function.

50 implements interface let package private protected public static yield New Reserved Words

51 Strict Mode No more implied global variables within functions. this is not bound to the global object by function form. apply and call do not default to the global object. No with statement. Setting a writeable: false property will throw. Deleting a configurable: false property will throw. Restrictions on eval. eval and arguments are reserved. arguments not linked to parameters. No more arguments.caller or arguments.callee. No more octal literals. Duplicate names in an object literal or function parameters are a syntax error.

52 Forgetting to use the new prefix will now throw an exception, not silently clobber the global object. Death Before Confusion!

53 Strict Mode addeventlistener( ); //error window.addeventlistener( ); //ok

54 Strict Mode There are no methods for determining if strict mode is on, but it is easy to make your own. function in_strict_mode() { return (function () { return!this; ()); function strict_mode_implemented() { return (function () { 'use strict'; return!this; ());

55

56 MASH

57 Safe JavaScript Subsets The design of Strict Mode was informed by safe subsets like Caja & ADsafe. Caja. ADsafe.

58 IE6 MUST DIE!

59 IE7 MUST DIE!

60 IE8 MUST DIE!

61 IE9 MUST DIE!

62 IE10

63 What next? Nothing is certain yet. Lighter, more expressive syntax. More expressive literals. Tail recursion. Modules. Proxies. Fixed typeof operator. Much more.

64 Next time: Section 8