Java Script - Object-Oriented Programming

Java Script - Object-Oriented Programming

• 1.
  JavaScript Object-Oriented Programming Piotr Czajkowski piotr.czajkowski@blstream.com
• 2.
  constructor new this bind class
• 3.
  constructor declaration var Person= function (name) { this.name = name; }; Person.prototype.sayHi = function () { return "Hi, I'm " + this.name; }; var me = new Person("Piotr"); me.sayHi(); // “Hi I'm Piotr”
• 4.
  constructor inheritance var Programmer= function (name, language) { Person.call(this, name); this.language = language; } Programmer.prototype = Object.create(Person.prototype); Programmer.prototype.constructor = Programmer;
• 5.
  constructor prototype chain varCar = function () { this.name = "Car"; } var Truck = function () {}; Truck.prototype = new Car(); var t = new Truck(); t; // Object { name="Car"} t.name; // "Car" t.hasOwnProperty("name"); // false t.name = "Truck"; t.hasOwnProperty("name"); // true
• 6.
  constructor Object.defineProperty() Object.defineProperty(obj, "name",{ configurable : false, enumerable : false, // data descriptors writable: false, value : "Object value", // accessor descriptors get : function () {}, set : function (val) {} }); var o = {}; Object.defineProperty(o, "name", { value : "Object O" }); o.name; // Object O o.name = "New name"; o.name; // Object O
• 7.
  new creating objects varPerson = function (name) { this.name = name; }; var me = new Person("Piotr"); me.name; // “Piotr” var me = Person("Piotr"); me; // undefined window.name; // “Piotr”
• 8.
  new instanceof var Person= function () { this.name = “Person”; }; var p = new Person(); p instanceof Person; // true "Hello" instanceof String; // false new String("Hello") instanceof String; // true
• 9.
  new creating objects varPerson = function () { this.name = “Person”; }; var p = new Person(); p.name; // “Person” p instanceof Person; // true var Person = function () { return { name : “Person” }; }; var p = new Person(); p.name; // “Person” p instanceof Person; // false
• 10.
  this function context functiongetThis() { return this; } getThis(); // window var o = { name : "Object O" }; o.getThis = getThis; o.getThis(); // Object { name="Object O", getThis=getThis()} var o = { name : "Object O", getThis : function () { return this;} }; o.getThis(); // Object var getThis = o.getThis; getThis(); // window
• 11.
  this inner functions varo = { innerThis : function () { function getThis () { return this; }; return getThis(); } }; o.innerThis(); // window
• 12.
  this strict mode functiongetThis () { "use strict"; return this; }; getThis(); // undefined var o = { innerThis : function () { "use strict"; function getThis () { return this; }; return getThis(); } }; o.innerThis(); // undefined
• 13.
  bind changing functioncontext var o = { name : "Object O" }; function getThis () { return this; }; getThis(); // window var boundGetThis = getThis.bind(o); boundGetThis(); // Object { name="Object O"} var o = { name : "Object O" }; function getThis() { return this; } getThis(); // window o.getThis = getThis; o.getThis(); // Object { name="Object O", getThis=getThis()}
• 14.
  bind callbacks (self,that, _this) var o = { fetch : function () { function getThis () { console.log(this); }; $.ajax({ url : "url" }) .done(getThis); } }; o.fetch(); // ajax settings object var o = { fetch : function () { function getThis () { console.log(this); }; $.ajax({ url : "url" }) .done(getThis.bind(this)); } }; o.fetch(); // Object { fetch=function() }
• 15.
  bind to bindor not to bind function onClick () { console.log("Click"); }; $("body").on("click", onClick); $("body").trigger("click"); // “Click” $("body").off("click", onClick); $("body").trigger("click"); function onClick () { console.log("Click"); }; $("body").on("click", onClick.bind()); $("body").trigger("click"); // “Click” $("body").off("click",???);
• 16.
  ES6 class syntacticsugar class Person { constructor(name) { this.name = name; } describe() { return this.name; } } function Person(name) { this.name = name; }; Person.prototype.describe = function () { return this.name; };
• 17.
  ES6 class inheritance classEmployee extends Person { constructor(name, title) { super.constructor(name); this.title = title; } } function Employee(name, title) { Person.call(this, name); this.title = title; } Employee.prototype = Object.create(Person.prototype); Employee.prototype.constructor = Employee;
• 18.
  ES6 Object LiteralProperty Value Shorthand var a = "Test", b = 42, c = {}; var oldObj = { a : a, b : b, c : c }; var es6Obj = { a, b, c }; var name = “Object”; var o = { name, get name() {}, set name(value) {}, getThis() { return this; }, };
• 19.
  ES6 Computed PropertyNames var i = 0, param = “name”; var obj = { [param] : “Object O”, [“value” + ++i] : i, }; var obj = {}; obj[param] = “Object O”; obj[“value” + ++i] = i;
• 20.
  ES6 Arrow Functions varfoo = () => { return this; }; foo(); // window var bar = () => { “use strict”; return this; }; bar(); // window var o = { fetch : function () { $.ajax({ url : "url" }) .done(() => { console.log(this); }); } }; o.fetch(); // Object { fetch=function() }
• 21.
  constructor new this bind class
• 22.
  Thank You Piotr Czajkowski piotr.czajkowski@blstream.com