38
Object-Oriented JavaScript @WesolowskiRafal
| Date post: | 08-Apr-2017 |
| Category: |
Engineering |
| Upload: | rafal-wesolowski |
| View: | 146 times |
| Download: | 0 times |
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/
![Skriptum zu Objektorientierte Programmierung · 178 LITERATURVERZEICHNIS [13] Sonya E. Keene. Object-Oriented Programming in Common Lisp: A Programmer’s Guide to CLOS. Addison-Wesley,](https://static.unterlagen.site/doc/80x56/5e2150f02f59d0777c51d261/skriptum-zu-objektorientierte-programmierung-178-literaturverzeichnis-13-sonya.jpg)
