NA CO SI DÁT POZOR V JAVASCRIPTU?
Milan Lempera
Víťa Plšek
 @milanlempera
 @winsik
Angular.cz
STRICT MODE
volitelně aktivovatelná omezenější varianta JS
'use strict'; // strict mode pro celý soubor
a = 11; // Referen...
V čem se JS liší od ostatních jazyků?
FUNCTION
funkce jsou objektovým typem
každá funkce je instancí typu Function
function statement
function hello() {
console...
FUNCTIONS ARE FIRST-CLASS OBJECTS
var hello = function() {
console.log('Hello!');
};
hello(); // 'Hello!'
var helloAlias =...
FUNCTION - NEEXISTUJE PŘETĚŽOVÁNÍ
function test(a, b) {
...
}
function test(a, b, c) { // tato definice "přepíše" původní
...
FUNCTION - ARGUMENTS
function test(a, b) {
console.log('a:', a);
console.log('b:', b);
console.log('arguments:', arguments...
FUNCTION - PARAMETRY
test(1);
// a: 1
// b: undefined
// arguments: [1]
test(1, 2, 3);
// a: 1
// b: 2
// arguments: [1, 2...
FUNCTION - DEFAULTNÍ HODNOTY
Boolean true false
String libovolný neprázdný řetězec ""
Number libovolné nenulové číslo 0, N...
FUNCTION - DEFAULTNÍ HODNOTY
function test(a, b) {
a = a || "defaultValue";
b = typeof b !== 'undefined' ? b : 1;
}
OBJEKTOVĚ ORIENTOVANÉ PROGRAMOVÁNÍ
 
JS MÁ OBJEKTY
ALE NEMÁ TŘÍDY
OBJECT LITERAL
var dog = {
name: 'Teggi',
speak: function() {
return "Haf";
}
};
vytváří instanci objektu
jde o anonymní o...
KONSTRUKTOR
var Dog = function(name) {
this.name = name;
this.speak = function() {
return "Haf";
};
}
var dog = new Dog("T...
KONSTRUKTOR
var Dog = function(name) {
this.name = name;
this.speak = function() {
return "Haf";
};
}
var dog1 = new Dog("...
PROTOTYPE
vlastnost každé funkce
obsahuje vlastnosti dostupné každé instanci odvozené z
této funkce
vlastnosti prototypu j...
KONSTRUKTOR + PROTOTYPE
var Dog = function(name) {
this.name = name;
};
Dog.prototype.speak = function() {
return "Haf";
}...
DĚDIČNOST
v JS používáme prototypovou dědičnost
zřetězení prototypů od potomka k rodiči/rodičům
PROTOTYPE CHAIN
var Dog = function(name) {
this.name = name;
};
Dog.prototype.speak = function() {
return "Haf";
};
var do...
DĚDIČNOST
var Animal = function(species) {
this.species = species;
}
Animal.prototype.getSpeciesName = function() {
return...
MODIFIKÁTORY PŘÍSTUPU
JS NEMÁ
v JS je vše public
vše můžete přepsat
i vlasnosti nativních objektů
OBJECT + CLOSURE
var dogFactory = function(dogName) {
var name = dogName;
function speak() {
return "Haf";
};
return {
get...
CLOSURE
var genFrom10 = generator(10);
genFrom10() // 10
genFrom10() // 11
genFrom10() // 12
var generator = function(init...
OBJECT + CLOSURE
var dogFactory = function(dogName) {
var name = dogName;
function speak() {
return "Haf";
};
return {
get...
THIS V JS
THIS A OBJEKT
var object = {
prop: 42,
method: function() {
console.log(this.prop);
}
};
console.log(object.method()); // ...
THIS A OBJEKT
function independent() {
console.log(this.prop);
}
var object = {
prop: 42,
};
object.method = independent;
...
THIS V ASYNCHRONNÍCH OPERACÍCH
var object = {
prop: 42,
method: function() {
console.log(this.prop);
}
};
setTimeout(objec...
PROBLÉMY S ČÍSLY
OPERÁTORY A DYNAMICKÉ TYPY
Operátor sčítání / operátor zřetězení
"Angular" + ".cz" = "Angular.cz"
35 + 7 = 42
Význam operá...
NUMBER - SPECIÁLNÍ HODNOTY
"Barcamp " + 2015 = "Barcamp 2015"
NaN ‐ Not a Number.
"Barcamp " - 2015 = NaN
"Barcamp " * 201...
A TO JE VŠECHNO?
NENÍ, ALE TOTO BYLA NEJPROBLEMATIČTĚJŠÍ MÍSTA
JS není takové strašidlo, když mu rozumíte!
ANGULAR.CZ/BARCAMP-HK
Na co si dát v Javascriptu pozor? - Barcamp Hradec Králové 2015
Na co si dát v Javascriptu pozor? - Barcamp Hradec Králové 2015
of 34

Na co si dát v Javascriptu pozor? - Barcamp Hradec Králové 2015

JavaScript je jazyk, se kterým se všichni občas potkáme, ale ne vždy se chová tak, jak bychom očekávali. Na první pohled vypadá kód v JS podobně jako v jiných jazycích, ale výsledek jeho spuštění je často jiný. Pojďme si projít odlišnosti jazyka a konstrukce, které často působí problémy a nedorozumnění. Přednášet bude Milan Lempera a Víťa Plšek (angular.cz)
Published on: Mar 3, 2016
Published in: Software      
Source: www.slideshare.net


Transcripts - Na co si dát v Javascriptu pozor? - Barcamp Hradec Králové 2015

  • 1. NA CO SI DÁT POZOR V JAVASCRIPTU? Milan Lempera Víťa Plšek  @milanlempera  @winsik Angular.cz
  • 2. STRICT MODE volitelně aktivovatelná omezenější varianta JS 'use strict'; // strict mode pro celý soubor a = 11; // ReferenceError: a is not defined function sum(a, a, c) { // SyntaxError: // Strict mode function may not have duplicate parameter names return a + b + c; } var someNumber = 010; // SyntaxError: // Octal literals are not allowed in strict mode.
  • 3. V čem se JS liší od ostatních jazyků?
  • 4. FUNCTION funkce jsou objektovým typem každá funkce je instancí typu Function function statement function hello() { console.log('Hello!'); } hello(); function expression var hello2 = function() { console.log('Hello!'); }; hello2();
  • 5. FUNCTIONS ARE FIRST-CLASS OBJECTS var hello = function() { console.log('Hello!'); }; hello(); // 'Hello!' var helloAlias = hello; helloAlias(); // 'Hello!' anotherFunction(hello); var getFunction = function() { return function() { console.log('Hello function'); }; }; var hello = getFunction(); hello(); // 'Hello function'
  • 6. FUNCTION - NEEXISTUJE PŘETĚŽOVÁNÍ function test(a, b) { ... } function test(a, b, c) { // tato definice "přepíše" původní ... }
  • 7. FUNCTION - ARGUMENTS function test(a, b) { console.log('a:', a); console.log('b:', b); console.log('arguments:', arguments); } test(1, 2); // a: 1 // b: 2 // arguments: [1, 2] arguments je array‐like objekt obsahující parametry předané funkci při volání
  • 8. FUNCTION - PARAMETRY test(1); // a: 1 // b: undefined // arguments: [1] test(1, 2, 3); // a: 1 // b: 2 // arguments: [1, 2, 3]
  • 9. FUNCTION - DEFAULTNÍ HODNOTY Boolean true false String libovolný neprázdný řetězec "" Number libovolné nenulové číslo 0, NaN Object libovolný objekt null Undefined ‐ undefined function test(a) { a = a || "defaultValue"; }
  • 10. FUNCTION - DEFAULTNÍ HODNOTY function test(a, b) { a = a || "defaultValue"; b = typeof b !== 'undefined' ? b : 1; }
  • 11. OBJEKTOVĚ ORIENTOVANÉ PROGRAMOVÁNÍ   JS MÁ OBJEKTY ALE NEMÁ TŘÍDY
  • 12. OBJECT LITERAL var dog = { name: 'Teggi', speak: function() { return "Haf"; } }; vytváří instanci objektu jde o anonymní objekt
  • 13. KONSTRUKTOR var Dog = function(name) { this.name = name; this.speak = function() { return "Haf"; }; } var dog = new Dog("Teggi"); konstrukční funkce název vždy velkým písmenem (konvence) voláme s operátorem new
  • 14. KONSTRUKTOR var Dog = function(name) { this.name = name; this.speak = function() { return "Haf"; }; } var dog1 = new Dog("Teggi"); var dog2 = new Dog("Rek"); var dog3 = new Dog("Sára"); var dog4 = new Dog("Zára"); var dog5 = new Dog("Dag"); ... každá instance bude mít vlastní metodu speak dog1.speak === dog2.speak; // false dog1.speak === dog3.speak; // false dog1.speak === dog4.speak; // false dog1.speak === dog5.speak; // false
  • 15. PROTOTYPE vlastnost každé funkce obsahuje vlastnosti dostupné každé instanci odvozené z této funkce vlastnosti prototypu jsou společné všem instancím
  • 16. KONSTRUKTOR + PROTOTYPE var Dog = function(name) { this.name = name; }; Dog.prototype.speak = function() { return "Haf"; }; var dog1 = new Dog("Teggi"); var dog2 = new Dog("Rek"); var dog3 = new Dog("Sára"); dog1.speak(); // "Haf" dog1.speak === dog2.speak; // true dog1.speak === dog3.speak; // true
  • 17. DĚDIČNOST v JS používáme prototypovou dědičnost zřetězení prototypů od potomka k rodiči/rodičům
  • 18. PROTOTYPE CHAIN var Dog = function(name) { this.name = name; }; Dog.prototype.speak = function() { return "Haf"; }; var dog1 = new Dog("Rek"); dog1 instanceof Dog // true dog1 instanceof Object // true dog1 // {name: "Rek"} var p1 = Object.getPrototypeOf(dog1) // Dog.prototype var p2 = Object.getPrototypeOf(p2) // Object.prototype var p3 = Object.getPrototypeOf(p3) // null
  • 19. DĚDIČNOST var Animal = function(species) { this.species = species; } Animal.prototype.getSpeciesName = function() { return this.species; } var Dog = function(name) { Animal.call(this, "Canis familiaris"); this.name = name; }; Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; Dog.prototype.speak = function() { return "Haf"; };
  • 20. MODIFIKÁTORY PŘÍSTUPU JS NEMÁ v JS je vše public vše můžete přepsat i vlasnosti nativních objektů
  • 21. OBJECT + CLOSURE var dogFactory = function(dogName) { var name = dogName; function speak() { return "Haf"; }; return { getName: function() { return name; }, speak: speak } } var dog = dogFactory("Teggi"); není to constructor, ale factory volá se bez new, nefunguje instanceOf využívá closure
  • 22. CLOSURE var genFrom10 = generator(10); genFrom10() // 10 genFrom10() // 11 genFrom10() // 12 var generator = function(initialNumber) { var current = initialNumber; return function () { return current++; }; };
  • 23. OBJECT + CLOSURE var dogFactory = function(dogName) { var name = dogName; function speak() { return "Haf"; }; return { getName: function() { return name; }, speak: speak } } var dog = dogFactory("Teggi"); Nepoužívejte closure jako náhradu private.
  • 24. THIS V JS
  • 25. THIS A OBJEKT var object = { prop: 42, method: function() { console.log(this.prop); } }; console.log(object.method()); // 42
  • 26. THIS A OBJEKT function independent() { console.log(this.prop); } var object = { prop: 42, }; object.method = independent; console.log(object.method()); // 42 This je objekt na kterém je funkce volaná Vazba na this není danná definicí, ale pouze voláním. Proto nezáleží na tom, jestli funkce vznikla v rámci objektu, nebo jak k němu byla přiřazena.
  • 27. THIS V ASYNCHRONNÍCH OPERACÍCH var object = { prop: 42, method: function() { console.log(this.prop); } }; setTimeout(object.method, 1000); // po jedné vteřině vypíše "undefined" setTimeout(function() { object.method(); }, 1000); setTimeout(object.method.bind(object), 1000); // fce.bind(thisArg[, arg1[, arg2[, ...]]]) : Function
  • 28. PROBLÉMY S ČÍSLY
  • 29. OPERÁTORY A DYNAMICKÉ TYPY Operátor sčítání / operátor zřetězení "Angular" + ".cz" = "Angular.cz" 35 + 7 = 42 Význam operátoru závisí na kontextu Pokud je jeden z operandů string, jedná se o zřetězení 1 + "1" = "11" "1" + 1 = "11"
  • 30. NUMBER - SPECIÁLNÍ HODNOTY "Barcamp " + 2015 = "Barcamp 2015" NaN ‐ Not a Number. "Barcamp " - 2015 = NaN "Barcamp " * 2015 = NaN "Barcamp " / 2015 = NaN Dělení nulou nevyvolá žádnou chybu. 10 / 0 = Infinity
  • 31. A TO JE VŠECHNO? NENÍ, ALE TOTO BYLA NEJPROBLEMATIČTĚJŠÍ MÍSTA JS není takové strašidlo, když mu rozumíte!
  • 32. ANGULAR.CZ/BARCAMP-HK

Related Documents