Omówienie mechanizmów związanych z programowaniem obiektowym w JavaScript dostępnych w starszych wersjach języka oraz w ES6.

1. JavaScript
Programowanie
Obiektowe
Piotr Czajkowski
piotr.czajkowski@blstream.com

2. constructor
new
this
bind
class

3. constructor definicja
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 dziedziczenie
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
var Car = 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 tworzenie obiektów
var Person = 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 tworzenie obiektów
var Person = 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 kontekst wywołania funkcji
function getThis() { 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 funkcje wewnętrzne
var o = {
innerThis : function () {
function getThis () {
return this;
};
return getThis();
}
};
o.innerThis(); // window

12. this strict mode
function getThis () {
"use strict";
return this;
};
getThis(); // undefined
var o = {
innerThis : function () {
"use strict";
function getThis () {
return this;
};
return getThis();
}
};
o.innerThis(); // undefined

13. bind przypisywanie kontekstu
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 bind or not to bind
function onClick () {
console.log("Click");
};
$("body").on("click", onClick);
$("body").trigger("click"); // “Click”
$("body").off("click", onClick);
$("body").trigger("click");
// nie będzie niczego
function onClick () {
console.log("Click");
};
$("body").on("click", onClick.bind());
$("body").trigger("click"); // “Click”
$("body").off("click",???);

16. ES6 class syntactic sugar
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 dziedziczenie
class Employee 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 Literal Property 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 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;

20. ES6 Arrow Functions
var foo = () => { 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. Koniec
Piotr Czajkowski
piotr.czajkowski@blstream.com