Object oriented JavaScript

Object-Oriented
JavaScript
@WesolowskiRafal

javascript ist asynchron
Das bleibt so!!!
JS Basic

Was ist asynchronität bei JS
◉ setTimeout / setInterval
◉ XMLHttpRequest
◉ WebSocket
◉ File API,
◉ Web Database API Technologies
◉ und ...

Place your screenshot here
Beispiel 1
console.log('Start')
var doSomethingOne = function() {
console.log('doSomethingOne()');
};
setTimeout(doSomethingOne, 500);
console.log('End');
https://jsfiddle.net/wesoly/h2cxabjc/

Beispiel 2
console.log('before ajax call');
$.ajax({
url: 'test',
success: function(data) {
console.log('in success callback');
}
});
console.log('after ajax call');
http://jsfiddle.net/wesoly/y6XgY/749/

◉ Callback Hell
◉ Warten auf mehrere asynchrone
Aufrufe
Wo ist das Problem? ->

◉ async.js
◉ Promise
◉ ...
Nächste Schulung!
Lösung

object literals
vs
constructor functions
1

object literals constructor functions
function MyData(foo, bar) {
this.foo = foo;
this.bar = bar;
this.verify = function() {};
}
var data = {
foo: 42,
bar: 43,
verify: function() {},
};
var myData = new MyData(42,43);
https://jsfiddle.net/wesoly/uvcfevxz/
Should I be using object literals or constructor functions?

Beispiel 1
function Foo(){}
Foo.prototype.fooBar = function(){
return true;
};
var foo1 = Foo();
console.log(foo1);
var foo2 = new Foo();
console.log(foo2, foo2.fooBar());

Beispiel 1 - Result
function Foo(){}
return true;
};
var foo1 = Foo();
console.log(foo1);
console.log(foo2, foo2.fooBar());
https://jsfiddle.net/wesoly/1dytk4mg/

Beispiel 2
function Foo(){
this.fooBar = function(){
return true;
};
}
return false;
};
var foo = new Foo();
console.log(foo.fooBar());

Beispiel 2 - Result
function Foo(){
this.fooBar = function(){
return true;
};
}
return false;
};
var foo = new Foo();
console.log(foo.fooBar());
https://jsfiddle.net/wesoly/edjyhzL8/

Beispiel 3
function Foo(){
this.bar = true;
}
return this.bar;
};
console.log(foo1.fooBar());
console.log(foo2.fooBar());
https://jsfiddle.net/wesoly/zcg68twc/

Quiz
function Foo(){
this.bar = true;
}
// Add a method to the Foo prototype which
// returns itself and modifies bar
console.log(foo1.fooBar().bar);
https://jsfiddle.net/wesoly/kgvqq8c2/

Quiz - Result
function Foo(){
this.bar = true;
}
Foo.prototype.fooBar = function() {
this.bar = false;
return this;
}
https://jsfiddle.net/wesoly/kgvqq8c2/

Beispiel 1
function Container(foo) {
this.foo = foo;
var secret = 3;
}
var container = new Container('test');
console.log('container:', container);
console.log('container.secret: ', container.secret);
https://jsfiddle.net/wesoly/0345f0ex/

Beispiel 2
function Container(foo) {
var secret = 3;
this.foo = foo;
this.getSecret = function() {
return secret + bar();
}
function bar() {
return 1;
};
}
var container = new Container('test');
console.log('container:', container);
console.log('container.getSecret(): ', container.getSecret());
console.log('container.bar(): ', container.bar());
https://jsfiddle.net/wesoly/0345f0ex/

Module Pattern4
Mastering the Module Pattern

Beispiel 1
var Foo = (function () {
var privateBar = 1;
return {
getBar : function() {
return privateBar;
}
};
})();
console.log('Foo: ', Foo);
console.log('Foo.getBar(): ', Foo.getBar());
console.log('Foo.privateBar: ', Foo.privateBar);
https://jsfiddle.net/wesoly/x22w9wcq/

Beispiel 2
var privateBar = function() {
return 1;
};
return {
return privateBar();
}
};
})();
console.log('Foo: ', Foo);
console.log('Foo.getBar(): ', Foo.getBar());
console.log('Foo.privateBar(): ', Foo.privateBar());
https://jsfiddle.net/wesoly/x22w9wcq/

Quiz
// execute here getBar() -> how?
};
return {
return 1;
}
};
})();

“
in diesem Beispiel
geht nicht!

Module Pattern,
Accessing “Private” Methods
var Foo = (function() {
var obj = {
publicFoo: function() {
return 1;
},
publicFooBar: function() {
return privateBar() + 1;
}
};
return obj.publicFoo() * 2;
};
return obj;
})();
console.log(Foo.publicFooBar()) // 3
var Foo = (function() {
var publicFoo = function() {
return 1;
};
var publicFooBar = function() {
return privateBar() + 1;
};
return publicFoo() * 2;
};
return {
publicFoo : publicFoo,
publicFooBar: publicFooBar
};
})();
console.log(Foo.publicFooBar()) // 3
https://jsfiddle.net/wesoly/94ygh88b/

defineProperty
Object.defineProperty(obj, prop, descriptor)
5

Browser compatibility
Firefox Chrome Internet Explorer Safari
Basic support 4.0 5 9 5.1
Browser compatibility

Beispiel 1
var foo = {};
Object.defineProperty(foo, 'bar', {
value: 1
});
console.log('foo:', foo);
console.log('1 | foo.bar:', foo.bar);
foo.bar = 2;
https://jsfiddle.net/wesoly/nq3j21aa/

Beispiel 2
var foo = {};
value: 1,
writable: true
});
foo.bar = 2;

Beispiel 3
var foo = {};
value: 1,
});
console.log('1 | foo:', foo);
delete foo.bar;

Beispiel 4
var foo = {};
value: 1,
configurable: true
});
delete foo.bar;

Beispiel 5
var foo = {
fooBar: 2
};
value: 1,
});
for (var i in foo) {
console.log(i, foo[i]);
}

Beispiel 6
var foo = {
fooBar: 2
};
value: 1,
enumerable: true
});
for (var i in foo) {
console.log(i, foo[i]);
}

defineProperty
Getter & Setter

Beispiel 1
function Archiver() {
var temperature = 0;
Object.defineProperty(this, 'temperature', {
get: function() {
return temperature + ' °C';
}
});
}
var arc = new Archiver();
console.log(arc.temperature);
https://jsfiddle.net/wesoly/vzptz7of/

Beispiel 2
function Archiver() {
var temperature = 0, archive = [];
Object.defineProperty(this, 'temperature', {
get: function() {
return temperature + ' °C';
},
set: function(value) {
temperature = value;
archive.push(temperature);
}
});
this.getArchive = function() { return archive; };
}
var arc = new Archiver();
arc.temperature = 11;
arc.temperature = 13;
console.log(arc.getArchive());

Object oriented JavaScript

More Related Content

What's hot

Viewers also liked

Similar to Object oriented JavaScript

Recently uploaded

Object oriented JavaScript