Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Scope & Functions in ECMAScript 6.0

1 189 vues

Publié le

What's new in area of scope anf functions in ECMAScript 6.0

Publié dans : Logiciels
  • Soyez le premier à commenter

Scope & Functions in ECMAScript 6.0

  1. 1. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  2. 2. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com d = 'ev'; var d; console.log(d); var d; d = 'ev'; console.log(d); Only the declarations themselves are hoisted, while any assignments or other executable logic are left in place.
  3. 3. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com test(); // 1 var test; function test() { console.log(1); } test = function () { console.log(2); }; function test() { console.log(1); } test(); // 1 test = function () { console.log(2); };
  4. 4. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com function add(num1, num2) { var sum = num1 + num2; return sum; } Add [[Scope]] Scope Chain 0 Global Object this Windows windows (object) document (object) add (function) … … add.length === 2; Object.getPrototypeOf(add) === Function.prototype;
  5. 5. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Activation object this Windows arguments [ 5 , 10 ] num1 5 num2 10 sum undefined var Total = add( 5 , 10 ); add(5,10) Execution context Scope chain Scope Chain 0 1 Global Object this Windows windows (object) document (object) add (function) … …
  6. 6. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com var color = "blue"; function changeColor() { var anotherColor = "red"; function swapColors(){ var tempColor = anotherColor; anotherColor = color; color = tempColor; // color, anotherColor, and tempColor // are all accessible here. } // color and anotherColor are accessible here, // but not tempColor. swapColors(); } //only color is accessible here changeColor(); Windows color changeColor() anotherColor swapColos() tempColor()
  7. 7. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com function addEvent() { var id = "xdi9592"; document.getElementById("save-btn").onclick = function (event) { saveDocument( id ); }; } From parent scope
  8. 8. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Scope Chain 0 1 Activation object this Windows arguments [] id “xdi9592” addEvent() Execution context Scope chain Scope Chain 0 1 Global Object this Windows windows (object) document (object) addEvent (function) saveDoc (function) Closure [[Scope]]
  9. 9. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Scope Chain 0 1 2 Activation object this Windows arguments [] id “xdi9592” Global Object this Windows windows (object) document (object) addEvent (function) saveDoc (function) Closure execution context [[Scope]] Activation object (closure) this Windows arguments [] event (object)
  10. 10. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com var funcs = []; for ( var i = 0; i < 10; i ++) { funcs.push( function() { console.log(i); }); } funcs.forEach( function(func) { func(); // outputs the number "10" ten times });
  11. 11. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com var funcs = []; for ( var i = 0; i < 10; i ++) { funcs.push(( function(value) { return function() { console.log(value); } }(i))); } funcs.forEach( function(func) { func(); // outputs 0, 1, 2, 3, up to 9 });
  12. 12. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com var funcs = []; for ( let i = 0; i < 10; i ++) { funcs.push( function() { console.log(i); }); } funcs.forEach( function(func) { func(); // outputs 0, 1, 2, 3, up to 9 });
  13. 13. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com const PI = 3.14159; // Can't re-assign PI = 3; console.log(PI); // 3.14159 // Can't re-initialize const PI = 4; console.log(PI); // 3.14159 // Can't re-declare var PI = 4; console.log(PI); // 3.14159
  14. 14. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  15. 15. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  16. 16. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com  Undefined  Null function history( lang = "C", year = 1971 ) { // lang = lang || "C"; // year = year || 1971; return lang + " was created around the year " + year; }
  17. 17. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com // defining rest parameters with 3 dot syntax function push(array, ...items) { items.forEach(function(item) { array.push(item); console.log( item ); }); } // 1 fixed + 3 variable parameters var planets = []; push(planets, "Mercury", "Venus", "Earth");
  18. 18. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com Spread operator let values = [25, 50, 75, 100]; Math.max.apply( Math , values ); Math.max(...values); Math.max(...values , 200 , 300 );
  19. 19. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
  20. 20. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com var f= x => x; var f= (n1,n2) => n1+n2; var f= id => ({id:id,name:"T"}); var f = function(x) { return x; } var f = function(n1,n2) { return n1 + n2; } var f = function(id) { return { id: id, name: "T" }; }
  21. 21. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com var PageHandler = { id: "123456", init: function() { document.addEventListener("click", function(event) { this.doSomething(event.type); // error }, false); }, doSomething: function(type) { console.log("Handling " + type + " for " + this.id); } }; Global
  22. 22. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com var PageHandler = { id: "123456", init: function() { document.addEventListener("click", (function(event) { this.doSomething(event.type); }).bind(this), false); }, doSomething: function(type) { console.log("Handling " + type + " for " + this.id); } }
  23. 23. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com var PageHandler = { id: "123456", init: function() { document.addEventListener("click", event => this.doSomething(event.type), false); }, doSomething: function(type) { console.log("Handling "+type+" for " + this.id); } };
  24. 24. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com let v = ( function(name) { return { getName() { return name; } }; }( "Eyal" ) ); let v = ( (name) => { return { getName() { return name; } }; })( "Eyal" );
  25. 25. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com http://www.2ality.com/ Understanding ECMAScript 6 http://ecmascript6.org/ A Few New Things Coming To JavaScript HARMONY OF DREAMS COME TRUE Harmony specification_drafts
  26. 26. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com eyalvardi.wordpress.com

×