Download as PDF, PPTX
![ES6 Computed Property Names var i = 0, param = “name”; var obj = { [param] : “Object O”, [“value” + ++i] : i, }; var obj = {}; obj[param] = “Object O”; obj[“value” + ++i] = i;](https://image.slidesharecdn.com/js-ooprogramming-meetjs-150331092936-conversion-gate01/75/Java-Script-Object-Oriented-Programming-19-2048.jpg)
Uploaded byintive
Java Script - Object-Oriented Programming
Introduction to Java Script object-oriented programming presented by Piotr on meet.js meetings in Lublin (Feb-2015) and Szczecin (Mar-2015).
Java Script - Object-Oriented Programming
- 1.
- 2.
- 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.
- 22.