SlideShare a Scribd company logo
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
function Person(name, age) {
return {
name: name,
age : age,
sayName: function(){
console.log();
}
};
}
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
function Person(name, age) {
return {
name,
age,
sayName(){
console.log();
}
};
}
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
var lastName = "last name" ;
var person = {
lastName : lastName ,
"first name" : "Eyal" ,
[lastName] : "Vardi"
};
console.log(person[ "first name" ]); // "Eyal"
console.log(person[lastName]); // Vardi
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
var lastName = "last name" ;
var person = {
"first name" : "Eyal" ,
[ lastName + "" ] : "Vardi"
};
console.log( person[ "first name" ] ); // "Eyal"
console.log( person[lastName + ""] ); // Vardi
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
function equinox2() {
return { date: 20, month: "March", year: 2015,
time: { hour: 11, minute: 2 }
};
}
var { date: d, month: m, time : { hour: h} } = equinox2();
// 20 March at 11
console.log(d + " " + m + " at " + h);
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
var [start, end] = ["earth", "moon"] // initialize
console.log(start + " => " + end); // earth => moon
[start, end] = [end, start] // swapping
console.log(start + " => " + end); // moon => earth
function equinox() { return [20, "March", 2013, 11, 02]; }
var [date, month, , ,] = equinox();
console.log( date +" "+ month); // 20 March
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
function mixin(receiver, supplier) {
Object.keys(supplier).forEach( function(key) {
receiver[key] = supplier[key];
});
return receiver;
}
// == Object.assign(receiver, supplier);
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
new
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
function SuperType(name){
this.name = name;
this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function(){ return this.name; };
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = Object.create(SuperType.prototype);
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
};
SubType.prototype.sayName = function(){
return SuperType.prototype.sayName.call(this) + "!!";
};
override
fix constructor
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
public class Person : BasePerson
{
public string FirstName { get; set; }
public string LastName { get; set; }
public Person(string FirstName, string LastName) : base()
{
this.FirstName = FirstName;
this.LastName = LastName;
}
public string GetFullName(){
return FirstName + " " + LastName;
}
}
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
class Person extends BasePerson {
constructor(firstName, lastName) {
super();
this._firstName = firstName;
this._lastName = lastName;
}
getFullName(){
return this.firstName + " " + this.lastName;
}
get firstName() { return this._firstName; }
set firstName(value) { this._firstName = value; }
get lastName() { return this._lastName; }
set lastName(value) { this._lastName = value; }
}
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
SubType.prototype = Object.create(SuperType.prototype);
=
var objPro = {};
Object.setPrototypeOf( objPro , SuperType.prototype );
SubType.prototype = objPro;
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
// prototype is person
let friend = {
__proto__: person,
getGreeting() {
return super() + ", hi!" ;
}
};
function getGreeting() {
return super.getGreeting() + ", yo!" ;
}
console.log(friend.getGreeting()); // "Hello, hi!"
// assign getGreeting to the global function
var getFriendlyGreeting = getGreeting.toMethod(friend);
console.log(getFriendlyGreeting()); // "Hello, yo!"
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
let friend = {
__proto__: person,
getGreeting() {
// same as Object.getPrototypeOf(this).getGreeting.call(this)
// or this.__proto__.getGreeting.call(this)
// or super.getGreeting()
return super() + ", hi!" ;
}
};
 Determine the [[HomeObject]]
 Call Object.getPrototypeOf( [[HomeObject]] )
 Searched for a function with the same name as the executing function.
 Binding the “this” to the function.
 Execute the function.
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(length) {
super(length, length);
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
}
© 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
© 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: evardi@gmail.com
eyalvardi.wordpress.com

More Related Content

PPTX
Proxies in ECMAScript 6.0
PPTX
Async & Parallel in JavaScript
PPTX
Iterators & Generators in ECMAScript 6.0
PPTX
Modules in ECMAScript 6.0
PPTX
Scope & Functions in ECMAScript 6.0
PPT
Triggers, actions & behaviors in XAML
PDF
Demystifying Hooks, Actions & Filters - WordCamp Belfast 2018
PDF
누구나 할 수 있다 Networking
Proxies in ECMAScript 6.0
Async & Parallel in JavaScript
Iterators & Generators in ECMAScript 6.0
Modules in ECMAScript 6.0
Scope & Functions in ECMAScript 6.0
Triggers, actions & behaviors in XAML
Demystifying Hooks, Actions & Filters - WordCamp Belfast 2018
누구나 할 수 있다 Networking

What's hot (12)

PDF
Bootiful Development with Spring Boot and React
PPT
A gremlin in my graph confoo 2014
PDF
Android HttpClient - new slide!
PPTX
Node js overview
PDF
Why Redux-Observable?
PPTX
Programação reativa e o actor model
PDF
Two Trains and Other Refactoring Analogies
DOCX
PDF
Functional Gradient Boosting based on Residual Network Perception
PDF
#ajn3.lt.marblejenka
PDF
Testing Services Effectively
PDF
Prometheus – Storage
Bootiful Development with Spring Boot and React
A gremlin in my graph confoo 2014
Android HttpClient - new slide!
Node js overview
Why Redux-Observable?
Programação reativa e o actor model
Two Trains and Other Refactoring Analogies
Functional Gradient Boosting based on Residual Network Perception
#ajn3.lt.marblejenka
Testing Services Effectively
Prometheus – Storage
Ad

Similar to Objects & Classes in ECMAScript 6.0 (9)

PPTX
What’s new in ECMAScript 6.0
PPTX
OOP in JavaScript
PPTX
Symbols in ECMAScript 6.0
PPTX
Node.js Event Emitter
PPTX
Async & Parallel in JavaScript
PPTX
AMD & Require.js
PPTX
Node.js File system & Streams
PPTX
Future of JavaScript
PDF
ES2015 New Features
What’s new in ECMAScript 6.0
OOP in JavaScript
Symbols in ECMAScript 6.0
Node.js Event Emitter
Async & Parallel in JavaScript
AMD & Require.js
Node.js File system & Streams
Future of JavaScript
ES2015 New Features
Ad

More from Eyal Vardi (20)

PPTX
Why magic
PPTX
Smart Contract
PDF
Rachel's grandmother's recipes
PPTX
Performance Optimization In Angular 2
PPTX
Angular 2 Architecture (Bucharest 26/10/2016)
PPTX
Angular 2 NgModule
PPTX
Upgrading from Angular 1.x to Angular 2.x
PPTX
Angular 2 - Ahead of-time Compilation
PPTX
Routing And Navigation
PPTX
Angular 2 Architecture
PPTX
Angular 1.x vs. Angular 2.x
PPTX
Angular 2.0 Views
PPTX
Component lifecycle hooks in Angular 2.0
PPTX
Template syntax in Angular 2.0
PPTX
Http Communication in Angular 2.0
PPTX
Angular 2.0 Dependency injection
PPTX
Angular 2.0 Routing and Navigation
PPTX
Angular 2.0 Pipes
PPTX
Angular 2.0 forms
PPTX
Modules and injector
Why magic
Smart Contract
Rachel's grandmother's recipes
Performance Optimization In Angular 2
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 NgModule
Upgrading from Angular 1.x to Angular 2.x
Angular 2 - Ahead of-time Compilation
Routing And Navigation
Angular 2 Architecture
Angular 1.x vs. Angular 2.x
Angular 2.0 Views
Component lifecycle hooks in Angular 2.0
Template syntax in Angular 2.0
Http Communication in Angular 2.0
Angular 2.0 Dependency injection
Angular 2.0 Routing and Navigation
Angular 2.0 Pipes
Angular 2.0 forms
Modules and injector

Recently uploaded (20)

PPTX
Embracing Complexity in Serverless! GOTO Serverless Bengaluru
PPTX
AMADEUS TRAVEL AGENT SOFTWARE | AMADEUS TICKETING SYSTEM
PPTX
history of c programming in notes for students .pptx
PDF
Adobe Illustrator 28.6 Crack My Vision of Vector Design
PPTX
Computer Software and OS of computer science of grade 11.pptx
PDF
Internet Downloader Manager (IDM) Crack 6.42 Build 41
PDF
Design an Analysis of Algorithms II-SECS-1021-03
PDF
T3DD25 TYPO3 Content Blocks - Deep Dive by André Kraus
PPTX
L1 - Introduction to python Backend.pptx
PPTX
assetexplorer- product-overview - presentation
PDF
Digital Systems & Binary Numbers (comprehensive )
PPTX
CHAPTER 2 - PM Management and IT Context
PDF
Internet Downloader Manager (IDM) Crack 6.42 Build 42 Updates Latest 2025
PPTX
Reimagine Home Health with the Power of Agentic AI​
PDF
Tally Prime Crack Download New Version 5.1 [2025] (License Key Free
PPTX
Log360_SIEM_Solutions Overview PPT_Feb 2020.pptx
PPTX
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
PPTX
Why Generative AI is the Future of Content, Code & Creativity?
PPTX
Transform Your Business with a Software ERP System
PDF
How to Choose the Right IT Partner for Your Business in Malaysia
Embracing Complexity in Serverless! GOTO Serverless Bengaluru
AMADEUS TRAVEL AGENT SOFTWARE | AMADEUS TICKETING SYSTEM
history of c programming in notes for students .pptx
Adobe Illustrator 28.6 Crack My Vision of Vector Design
Computer Software and OS of computer science of grade 11.pptx
Internet Downloader Manager (IDM) Crack 6.42 Build 41
Design an Analysis of Algorithms II-SECS-1021-03
T3DD25 TYPO3 Content Blocks - Deep Dive by André Kraus
L1 - Introduction to python Backend.pptx
assetexplorer- product-overview - presentation
Digital Systems & Binary Numbers (comprehensive )
CHAPTER 2 - PM Management and IT Context
Internet Downloader Manager (IDM) Crack 6.42 Build 42 Updates Latest 2025
Reimagine Home Health with the Power of Agentic AI​
Tally Prime Crack Download New Version 5.1 [2025] (License Key Free
Log360_SIEM_Solutions Overview PPT_Feb 2020.pptx
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
Why Generative AI is the Future of Content, Code & Creativity?
Transform Your Business with a Software ERP System
How to Choose the Right IT Partner for Your Business in Malaysia

Objects & Classes in ECMAScript 6.0

  • 1. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
  • 2. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] function Person(name, age) { return { name: name, age : age, sayName: function(){ console.log(); } }; }
  • 3. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] function Person(name, age) { return { name, age, sayName(){ console.log(); } }; }
  • 4. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] var lastName = "last name" ; var person = { lastName : lastName , "first name" : "Eyal" , [lastName] : "Vardi" }; console.log(person[ "first name" ]); // "Eyal" console.log(person[lastName]); // Vardi
  • 5. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] var lastName = "last name" ; var person = { "first name" : "Eyal" , [ lastName + "" ] : "Vardi" }; console.log( person[ "first name" ] ); // "Eyal" console.log( person[lastName + ""] ); // Vardi
  • 6. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] function equinox2() { return { date: 20, month: "March", year: 2015, time: { hour: 11, minute: 2 } }; } var { date: d, month: m, time : { hour: h} } = equinox2(); // 20 March at 11 console.log(d + " " + m + " at " + h);
  • 7. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] var [start, end] = ["earth", "moon"] // initialize console.log(start + " => " + end); // earth => moon [start, end] = [end, start] // swapping console.log(start + " => " + end); // moon => earth function equinox() { return [20, "March", 2013, 11, 02]; } var [date, month, , ,] = equinox(); console.log( date +" "+ month); // 20 March
  • 8. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] function mixin(receiver, supplier) { Object.keys(supplier).forEach( function(key) { receiver[key] = supplier[key]; }); return receiver; } // == Object.assign(receiver, supplier);
  • 9. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] new
  • 10. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] alert(person1.constructor == Person); //true alert(person2.constructor == Person); //true
  • 11. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
  • 12. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] function SuperType(name){ this.name = name; this.colors = ['red', 'blue', 'green']; } SuperType.prototype.sayName = function(){ return this.name; }; function SubType(name, age){ SuperType.call(this, name); this.age = age; } SubType.prototype = Object.create(SuperType.prototype); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){ alert(this.age); }; SubType.prototype.sayName = function(){ return SuperType.prototype.sayName.call(this) + "!!"; }; override fix constructor
  • 13. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] public class Person : BasePerson { public string FirstName { get; set; } public string LastName { get; set; } public Person(string FirstName, string LastName) : base() { this.FirstName = FirstName; this.LastName = LastName; } public string GetFullName(){ return FirstName + " " + LastName; } }
  • 14. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] class Person extends BasePerson { constructor(firstName, lastName) { super(); this._firstName = firstName; this._lastName = lastName; } getFullName(){ return this.firstName + " " + this.lastName; } get firstName() { return this._firstName; } set firstName(value) { this._firstName = value; } get lastName() { return this._lastName; } set lastName(value) { this._lastName = value; } }
  • 15. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] SubType.prototype = Object.create(SuperType.prototype); = var objPro = {}; Object.setPrototypeOf( objPro , SuperType.prototype ); SubType.prototype = objPro;
  • 16. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
  • 17. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] // prototype is person let friend = { __proto__: person, getGreeting() { return super() + ", hi!" ; } }; function getGreeting() { return super.getGreeting() + ", yo!" ; } console.log(friend.getGreeting()); // "Hello, hi!" // assign getGreeting to the global function var getFriendlyGreeting = getGreeting.toMethod(friend); console.log(getFriendlyGreeting()); // "Hello, yo!"
  • 18. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] let friend = { __proto__: person, getGreeting() { // same as Object.getPrototypeOf(this).getGreeting.call(this) // or this.__proto__.getGreeting.call(this) // or super.getGreeting() return super() + ", hi!" ; } };  Determine the [[HomeObject]]  Call Object.getPrototypeOf( [[HomeObject]] )  Searched for a function with the same name as the executing function.  Binding the “this” to the function.  Execute the function.
  • 19. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] class Polygon { constructor(height, width) { this.height = height; this.width = width; } } class Square extends Polygon { constructor(length) { super(length, length); this.name = 'Square'; } get area() { return this.height * this.width; } }
  • 20. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] 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
  • 21. © 2015 Eyal Vardi. All rights reserved. Tel: 054-5-767-300, Email: [email protected] eyalvardi.wordpress.com