Object-Oriented JavaScript

@WesolowskiRafal

javascript ist asynchronDas 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 1console.log('Start')

var doSomethingOne = function() {

console.log('doSomethingOne()');

};

setTimeout(doSomethingOne, 500);

console.log('End');

https://jsfiddle.net/wesoly/h2cxabjc/

Place your screenshot here

Beispiel 2console.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?

JavaScript .prototype2

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());

Place your screenshot here

Beispiel 1 - Resultfunction Foo(){}

Foo.prototype.fooBar = function(){

return true;

};

var foo1 = Foo();

console.log(foo1);

var foo2 = new Foo();

console.log(foo2, foo2.fooBar());

https://jsfiddle.net/wesoly/1dytk4mg/

Beispiel 2function Foo(){

this.fooBar = function(){

return true;

};

}

Foo.prototype.fooBar = function(){

return false;

};

var foo = new Foo();

console.log(foo.fooBar());

Beispiel 2 - Resultfunction Foo(){

this.fooBar = function(){

return true;

};

}

Foo.prototype.fooBar = function(){

return false;

};

var foo = new Foo();

console.log(foo.fooBar());

https://jsfiddle.net/wesoly/edjyhzL8/

Beispiel 3function Foo(){

this.bar = true;

}

var foo1 = new Foo();

var foo2 = new Foo();

Foo.prototype.fooBar = function(){

return this.bar;

};

console.log(foo1.fooBar());

console.log(foo2.fooBar());

https://jsfiddle.net/wesoly/zcg68twc/

Quizfunction Foo(){

this.bar = true;

}

var foo1 = new Foo();

var foo2 = new Foo();

// Add a method to the Foo prototype which

// returns itself and modifies bar

console.log(foo1.fooBar().bar);

console.log(foo2.fooBar().bar);

https://jsfiddle.net/wesoly/kgvqq8c2/

Quiz - Resultfunction Foo(){

this.bar = true;

}

var foo1 = new Foo();

var foo2 = new Foo();

Foo.prototype.fooBar = function() {

this.bar = false;

return this;

}

console.log(foo1.fooBar().bar);

console.log(foo2.fooBar().bar);

https://jsfiddle.net/wesoly/kgvqq8c2/

Private in JavaScript3

Place your screenshot here

Beispiel 1function 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/

Place your screenshot here

Beispiel 2function 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

Place your screenshot here

Beispiel 1var 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/

Place your screenshot here

Beispiel 2var Foo = (function () {

var privateBar = function() {

return 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/

Quizvar Foo = (function () {

var privateBar = function() {

// execute here getBar() -> how?

};

return {

getBar : function() {

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;

}

};

var privateBar = function() {

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;

};

var privateBar = function() {

return publicFoo() * 2;

};

return {

publicFoo : publicFoo,

publicFooBar: publicFooBar

};

})();

console.log(Foo.publicFooBar()) // 3

https://jsfiddle.net/wesoly/94ygh88b/

definePropertyObject.defineProperty(obj, prop, descriptor)

5

Browser compatibility

Firefox Chrome Internet Explorer Safari

Basic support 4.0 5 9 5.1

Browser compatibility

Place your screenshot here

Beispiel 1var foo = {};

Object.defineProperty(foo, 'bar', {

value: 1

});

console.log('foo:', foo);

console.log('1 | foo.bar:', foo.bar);

foo.bar = 2;

console.log('2 | foo.bar:', foo.bar);

https://jsfiddle.net/wesoly/nq3j21aa/

Place your screenshot here

Beispiel 2var foo = {};

Object.defineProperty(foo, 'bar', {

value: 1,

writable: true

});

console.log('foo:', foo);

console.log('1 | foo.bar:', foo.bar);

foo.bar = 2;

console.log('2 | foo.bar:', foo.bar);

https://jsfiddle.net/wesoly/nq3j21aa/

Place your screenshot here

Beispiel 3var foo = {};

Object.defineProperty(foo, 'bar', {

value: 1,

});

console.log('1 | foo:', foo);

delete foo.bar;

console.log('2 | foo:', foo);

https://jsfiddle.net/wesoly/nq3j21aa/

Place your screenshot here

Beispiel 4var foo = {};

Object.defineProperty(foo, 'bar', {

value: 1,

configurable: true

});

console.log('1 | foo:', foo);

delete foo.bar;

console.log('2 | foo:', foo);

https://jsfiddle.net/wesoly/nq3j21aa/

Place your screenshot here

Beispiel 5var foo = {

fooBar: 2

};

Object.defineProperty(foo, 'bar', {

value: 1,

});

console.log('foo:', foo);

for (var i in foo) {

console.log(i, foo[i]);

}

https://jsfiddle.net/wesoly/nq3j21aa/

Place your screenshot here

Beispiel 6var foo = {

fooBar: 2

};

Object.defineProperty(foo, 'bar', {

value: 1,

enumerable: true

});

console.log('foo:', foo);

for (var i in foo) {

console.log(i, foo[i]);

}

https://jsfiddle.net/wesoly/nq3j21aa/

defineProperty

Getter & Setter

Place your screenshot here

Beispiel 1function 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/

Place your screenshot here

Beispiel 2function 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();

console.log(arc.temperature);

arc.temperature = 11;

console.log(arc.temperature);

arc.temperature = 13;

console.log(arc.getArchive()); https://jsfiddle.net/wesoly/nq3j21aa/

@WesolowskiRafal

Danke!