Javascript - Entendendo a Linguagem

Apresentação de um techtalk explicando como funciona a linguagem Javascript.

Transcript

1. JavaScript Entendendo a linguagem
2. Introdução Valores primitivos: • String; • Número; • Booleano; • Null; • Undefined; Valores Complexos: Todo o resto.
3. Introdução Valores Primitivos: • São armazenados e comparados por valor: var mandioca = "mandioca" var outraMandioca = mandioca outraMandioca = "aipim" mandioca => "mandioca" outraMandioca => "aipim" Objetos: • São armazenados e comparados por referência: var rapaz = { beijaRapaz: false } var rapazCampineiro = rapaz rapazCampineiro.beijaRapaz = true rapaz.beijaRapaz => true rapazCampineira.beijaRapaz => true
4. Introdução Valores Primitivos: • São armazenados e comparados por valor: Objetos: • São armazenados e comparados por referência: var picanha = "picanha" picanha === "picanha" => true picanha === "maminha" => false var limbo = {} var void = limbo limbo === void => true limbo === {} => false
5. Objetos var object = {} => Object var object = new Object => Object
6. Objeto - Propriedades var objeto = { chave: "valor", "outraChave": function() {}, maisUmaChave: {} } var objeto = {} objeto.chave = true objeto["outraChave"] = 12345 delete objeto.outrachave
7. Objetos - Array var vetor = [1234, "lol", true, null, function() {}, {}] var vetor = { 0: 1234, 1: "wut", 2: false, 3: null, 4: function() {}, 5: {} }
8. Objetos - Valores primitivos "oh really?".toUpperCase() => "OH REALLY?" (12345).toExponential() => "1.2345e+4" true.toString() => "true"
9. Operador typeof var objeto = {} typeof objeto => "object" var numero = 2134.5 typeof numero => "number"
10. Funções function doSomething (arg1, arg2, arg3) { var sum = arg1 + arg2 + arg3; return sum; } doSomething(1, 2, 3); => 6 doSomething.name; => "doSomething"
11. Funções var doSomething = function (arg1, arg2, arg3) { arg1 + arg2 + arg3; } doSomething(1, 2, 3); => undefined doSomething.name; => ""
12. Funções var doSomething = function doSomething (arg1, arg2) { var sum = arguments[0] + arguments[1]; return sum; } doSomething(1, 2); => 3
13. Funções var doSomething = function() { something = doSomethingInside(arguments[0], arguments[1]); function doSomethingInside(arg1 + arg2) { return arg1 + arg2; } return something; } doSomething(2, 4); => 6
14. Funções - Construtores var Politic = function (name) { this.name = name; this.integrity = null; this.honesty = null; } var politic = new Politic("Paulo Maluf") politic.name => "Paulo Maluf" politic.honesty => null politic.constructor => function(name) { this.name = name; this.integrity = null; ... }
15. Funções Construtores Pré-definidos • Number() • String() • Boolean() • Object() • Array() • Function() • Date() • RegExp() • Error()
16. Operador instanceof function Horse() {}; noobHorse = new Horse; noobHorse instanceof Horse => true noobHorse instanceof String => false
17. Funções - this var returnThis = function () { return this; } var obejecto = { returnThis: function() { return this }; } returnThis(); => DOMWindow obejecto.returnThis => Object
18. Funções - this var getThis = function() { return this } getThis() => DOMWindow var object = {} object.getThis = getThis object.getThis() => Object
19. Funções - this object = { getThis: function() { var self = this; (function() { self = this; })(); return self; } } object.getThis() => DOMWindow
20. Chamadas de Funções • Como uma função; var asFunction = function() {} asFunction() • Como um método; var object = { method: function() {} } object.method() • Como um construtor; var Constructor = function() {} new Constructor
21. Chamadas de Funções • Usando apply() ou call(); var someFunction = function(x, y) { return x + y + this.z; } var someObject = { z: 1 } someFunction.call(someObject, 1, 2) => 4 someFunction.apply(someObject, [1, 2]) => 4
22. Escopo var lol = 0; // global scope var bar = 0; //global scope wut = function() { var lol = 1; // wut scope var foo = function() { lol = 2; // wut scope bar = 3; // global scope blebers = 4; // global scope }); } eval("var lol = 5"); // eval scope
23. Closure var counter = function() { var count = 0; return function() { return count += 1 }; }(); counter() => 1 counter() => 2
24. voidObject = {}; voidObject.toString(); => "[object Object]" Herança Via Protótipo
25. Herança Via Protótipo var Lol = function() {}; Lol.prototype.wut = function() { return "I am in Lol Prototype"; }; Object.prototype.bla = function() { return "I am in Object Prototype"; }; var lol = new Lol; lol.wut; => "I am in Lol Prototype" lol.bla; => "I am in Object Prototype"
26. Herança Via Protótipo var Lol = function() {}; var lol = new Lol;
27. Herança Via Protótipo var Lol = function() {}; var Wut = function() {}; Lol.prototype.bar = "something"; Wut.prototype.foo = "another thing"; var lol = new Lol; lol.__proto__ = new Wut; lol.bar; => "something" lol.foo; => "another thing"