Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OOP in JavaScript

5,592 views

Published on

OOP in JavaScript

Published in: Technology, Business

OOP in JavaScript

  1. 1. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  2. 2. http://www.expertdays.co.il © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  3. 3. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  4. 4. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  5. 5. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  6. 6. var person = { name: "Nicholas" }; var person = {}; Object.defineProperty( person, "name", { configurable: true, enumerable: false, writable: false, value: "Michal" }); alert(person.name); //Michal person.name = "Eyal"; alert(person.name); //Michal © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  7. 7. var person = {}; Object.defineProperty(person, "name", { configurable: false, value: "Michal" }); // Throws an error Object.defineProperty(person, "name", { configurable: true, value: "Michal" }); © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  8. 8. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  9. 9. var book = { _year: 2004, edition: 1 }; Object.defineProperty(book, "year", { get: function(){ return this._year; }, set: function(newValue){ if (newValue > 2004) { this._year = newValue; } } }); book.year = 2005; © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il __defineGetter__() and __defineSetter__() old version Prior to the ECMAScript 5.
  10. 10. var book = {}; Object.defineProperties(book, { // Data Properties _year: { value: 2004 }, edition: { value: 1 }, // Accessor Properties year: { get: function () { return this._year; }, set: function (newValue) { if (newValue > 2004) { this._year = newValue; this.edition += newValue - 2004; } } } }); © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  11. 11. var descriptor = Object.getOwnPropertyDescriptor(book, "_year"); alert(descriptor.value); //2004 alert(descriptor.configurable); //false alert(typeof descriptor.get); //”undefi ned” var descriptor = Object.getOwnPropertyDescriptor(book, "year"); alert(descriptor.value); //undefined alert(descriptor.enumerable); //false alert(typeof descriptor.get); //”function” © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  12. 12. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  13. 13. // makes it impossible to add properties to obj. Example: var obj = { foo: 'a' }; Object.preventExtensions(obj); obj.bar = 'b'; // fails silently alert(obj.bar); // undefined // You can still delete properties, though. delete obj.foo; alert(obj.foo); // undefined // Checks whether obj is extensible: Object.isExtensible(obj); // false © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  14. 14. var obj = { foo: 'a' }; Object.getOwnPropertyDescriptor(obj, 'foo'); // before sealing // { value: 'a', writable: true, enumerable: true, configurable: true } Object.seal(obj); Object.getOwnPropertyDescriptor(obj, 'foo'); // after sealing // { value: 'a', writable: true, enumerable: true, configurable: false } // You can still change the property foo: obj.foo = 'b'; Object.isSealed(obj); // true © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  15. 15. var point = { x: 17, y: -5 }; Object.freeze(point); point.x = 2; // no effect, point.x is read-only //Checking whether an object is frozen Object.isFrozen(obj); // true © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  16. 16. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  17. 17. function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function () { alert(this.name); }; } var person1 = new Person("Dan", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor"); © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  18. 18. alert(person1.constructor == Person); //true alert(person2.constructor == Person); //true © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  19. 19. //use as a constructor var person = new Person("Dan", 29, "Engineer"); person.sayName(); // "DaN" //call as a function Person("Greg", 27, "Doctor"); //adds to window window.sayName(); //"Greg" //call in the scope of another object var o = new Object(); Person.call(o, "Kristen", 25, "Nurse"); o.sayName(); //"Kristen" © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  20. 20. function var var this function this function var new © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  21. 21. function Person(name, age, job) { ... this.sayName = function () { alert(this.name); }; //logical equivalent this.sayName = new Function("alert(this.name)"); } alert(person1.sayName == person2.sayName); //false © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  22. 22. function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = sayName; } function sayName() { alert(this.name); } © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  23. 23. function Cat(name, age, job){ this.name = name; this.age = age; this.friends = ['A', 'B']; } Cat.prototype.sayName = function () { return this.name; } var myCat = new Cat('Mizi', 29); © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  24. 24. var friend = new Person(); Person.prototype.sayHi = function(){ alert("hi"); }; friend.sayHi(); //"hi" - works! © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  25. 25. function Person(){ } var friend = new Person(); // friend.__proto__ = Person.prototype Person.prototype constructor: name : age : job : sayName : }; = { Person, "Nicholas", 29, "Software Engineer", function () { alert(this.name); } friend.sayName(); // Error © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  26. 26. function Person(name, age, job){ // properties this.name = name; this.age = age; this.job = job; // methods if (typeof this.sayName != "function"){ Person.prototype.sayName = function(){ alert(this.name); }; } } var friend = new Person('Nicholas', 29, 'Software Engineer'); friend.sayName(); © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  27. 27. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  28. 28. © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  29. 29. SubType.prototype = SuperType.prototype function SuperType() { this.val = true; } SuperType.prototype.getSuperValue = function () { return this.val; }; function SubType() { this.subVal = false; } //inherit from SuperType SubType.prototype = SuperType.prototype; val getSubValue subVal SubType.prototype.getSubValue = function () { return this.subVal; }; __proto__ var instance = new SubType(); // undefined ( this.val == undefined ) alert(instance.getSuperValue() ); © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il getSuperValue subVal
  30. 30. SubType.prototype = new SuperType(); function SuperType() { this.val = true; } SuperType.prototype.getSuperValue = function () { return this.val; }; function SubType() { this.subVal = false; } SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function () { // new method return this.subVal; }; SubType.prototype.getSuperValue = function () {// override method return false; }; var instance = new SubType(); alert(instance.getSuperValue()); //false © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  31. 31. SubType.prototype = new SuperType(); [prototype] getSuperValue val [prototype] subVal __proto__ val __proto__ subVal © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  32. 32. function SuperType(){ this.colors = ['red', 'blue', 'green']; } function SubType(){ } SubType.prototype = new SuperType(); var instance1 = new SubType(); instance1.colors.push('black'); alert(instance1.colors); //"red,blue,green,black" var instance2 = new SubType(); alert(instance2.colors); //"red,blue,green,black" © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  33. 33. function SuperType(){ this.colors = ['red', 'blue', 'green']; } function SubType(){ //inherit from SuperType SuperType.call(this); } SubType.prototype = new SuperType(); var instance1 = new SubType(); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" var instance2 = new SubType(); alert(instance2.colors); © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il //"red,blue,green"
  34. 34. function SuperType(name){ this.name = name; } function SubType(){ //inherit from SuperType passing in an argument SuperType.call(this, "Nicholas"); //instance property this.age = 29; } SubType.prototype = new SuperType(); ... var instance = new SubType(); alert(instance.name); //"Nicholas"; alert(instance.age); //29 © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  35. 35. [prototype] getSuperValue val [prototype] subVal __proto__ val __proto__ val subVal © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  36. 36. function create(o) { function F() { } F.prototype = o; new F() return new F(); } © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il __proto__ o
  37. 37. var person = { name: "Eyal", friends: ["Ran", "Dan"] }; var anotherPerson = Object(person); anotherPerson.name = "Greg"; anotherPerson.friends.push("Rob"); // Object.create(person); var yetAnotherPerson = Object(person); yetAnotherPerson.name = "Linda"; yetAnotherPerson.friends.push("Van"); alert(person.friends); © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il // "Ran, Dan, Rob, Van"
  38. 38. function SuperType(name){ this.name = name; this.colors = ['red', 'blue', 'green']; } SuperType.prototype.sayName = function(){ alert(this.name); }; function SubType(name, age){ SuperType.call(this, name); this.age = age; } SubType.prototype = Object.create(SuperType.prototype); SubType.prototype.sayAge = function(){ alert(this.age); }; © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  39. 39. [prototype] getSuperValue val [prototype] subVal __proto__ val subVal © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il __proto__
  40. 40. 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; fix constructor SubType.prototype.sayAge = function(){ alert(this.age); }; override SubType.prototype.sayName = function(){ return SuperType.prototype.sayName.call(this) + "!!"; }; © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  41. 41. alert( person instanceof Object ); alert( colors instanceof Array ); alert( pattern instanceof RegExp ); © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  42. 42. var instance = new SubType(); alert(instance instanceof Object); //true alert(instance instanceof SuperType); //true alert(instance instanceof SubType); //true alert(Object.prototype.isPrototypeOf(instance)); //true alert(SuperType.prototype.isPrototypeOf(instance)); //true alert(SubType.prototype.isPrototypeOf(instance)); //true © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  43. 43. var toString = Object.prototype.toString; toString.call(new Date); toString.call(new String); toString.call(Math); // [object Date] // [object String] // [object Math] toString.call(undefined); toString.call(null); // [object Undefined] // [object Null] © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  44. 44. http://eyalvardi.wordpress.com/resources/html-5course-resourses/javascript/ http://javascript.info/tutorial © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  45. 45. eyalvardi.wordpress.com © 2013 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

×