java script - object-oriented programming
TRANSCRIPT
constructornewthisbindclass
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”
constructor inheritance
var Programmer = function (name, language) {Person.call(this, name);this.language = language;
}
Programmer.prototype = Object.create(Person.prototype);Programmer.prototype.constructor = Programmer;
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
constructor Object.defineProperty()
Object.defineProperty(obj, "name", {configurable : false,enumerable : false,// data descriptorswritable: false,value : "Object value",// accessor descriptorsget : 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
new creating objects
var Person = function (name) {this.name = name;
};
var me = new Person("Piotr");
me.name; // “Piotr”
var me = Person("Piotr");
me; // undefinedwindow.name; // “Piotr”
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
new creating objects
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
this function context
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
this inner functions
var o = {innerThis : function () {
function getThis () { return this; }; return getThis();
}};o.innerThis(); // window
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
bind changing function context
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()}
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() }
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");
function onClick () {console.log("Click");
};
$("body").on("click", onClick.bind());$("body").trigger("click"); // “Click”
$("body").off("click",???);
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;};
ES6 class inheritance
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;
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; },
};
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;
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() }
constructornewthisbindclass
