how_to_learn_javascript_properly / javascript

Java para JavaScript: notas de como aprender JavaScript corretamente

fundo

Eu sou um desenvolvedor Java mergulhando em JavaScript usando How To Learn JavaScript Properly e o recurso do curso reddit .

Estou usando o livro Professional JavaScript For Web Developers, 3rd Edition, que pode ser adquirido na Amazon e está disponível gratuitamente aqui . Salvo indicação em contrário, todos os números de página são deste livro.

Estarei adicionando dicas, truques e coisas interessantes da perspectiva de um desenvolvedor Java aprendendo JavaScript. Isso será atualizado regularmente.

Semana 1 e 2

nulo vs indefinido

(Pg. 33)
var car = null;   //null
var horse;         //undefined
car == horse;   //true
car === horse; //false

analisando números

(Pág. 40)

usar parseInt()e em parseFloat()vez de Number().

var num = parseInt("1234blue"); //1234

especifique a raiz ao analisar.

(Pg. 41)
var num1 = parseInt("10", 2);     //2 - parsed as binary
var num2 = parseInt("10", 8);     //8 - parsed as octal
var num3 = parseInt("10", 10);   //10 - parsed as decimal
var num4 = parseInt("10", 16);   //16 - parsed as hexadecimal

funções

declaração de função

function add(num1, num2) {
     return num1 + num2;
}

e

expressão de função

var add = function(num1, num2) {
     return num1 + num2;
}

codecademia

O editor do Codecademy está bem se você conhece alguns atalhos. No OS X , os atalhos são geralmente emacsformais.

  • cntrl-a – início da linha.
  • cntrl-e – fim da linha.
  • cntrl-k – matar até o fim da linha.
  • cntrl-n – descer uma linha.
  • cntrl-p – mais uma linha.
  • cntrl-d – exclui um caractere para frente.
  • command-return – execute o código.
  • option-p – vá para a próxima.

Semana 3 e 4

diversão com matrizes

arrays são muito semelhantes aos do java, mas possuem alguns métodos adicionais.

var numbers = [1,2,3,4];
var num = numbers[1]; //num = 2

array como pilha

numbers.push(5);
numbers.push(5,6,7);
numbers.pop();

array como fila

numbers.push(5,6,7);
numbers.shift();

Aplique

function add(num1, num2) {
    return num1 + num2;
}

var numArray = [1,2];

pode passar a matriz diretamente para a addfunção usandoapply

add.apply(this, numArray);

um exemplo real com Math. Veja como obter o resultado maxde um array.

(Pág. 167)
var values = [1,2,3,4,5,6,7,8];
var max = Math.max.apply(Math, values);

thisé o contexto. O contexto pode ser alterado para algum outro objeto diferente deste. Aqui usamos call, que é o mesmo que apply, mas leva argumentos diretamente em vez de como um array.

add.call(this, 1,2);
(Pág. 145)
window.color = "red";
var o = { color: "blue" };

function sayColor() {
    alert(this.color);
}

sayColor(); //red

sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue

objetos

criação de objeto simples

(Pág. 173)
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function() {
   alert(this.name);
};

criação de objeto simples com notação literal de objeto (padrão preferido)

var person = {
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",

    sayName: function() {
         alert(this.name);
    };

OOP

padrão de construtor / protótipo:

(Pg. 197)

O padrão de construtor define propriedades de instância, enquanto o padrão de protótipo define métodos e propriedades compartilhadas, mas todos eles compartilham referências a métodos, conservando memória. Esse padrão permite que os argumentos sejam passados ​​para o construtor também, combinando com eficácia as melhores partes de cada padrão.

Os outros padrões e as vantagens disso são complexos demais para este contexto. Consulte o Capítulo 6 para obter mais detalhes.

function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.friends = ["Shelby", "Court"];
}

Person.prototype = {
  constructor : Person,
  sayName : function() {
     alert(this.name);
  }
};

var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

person1.friends.push("Van");

person1.friends; // "Shelby, Court, Van"
person2.friends; // "Shelby, Court"
person1.friends === person2.friends //false
person1.sayName === person2.sayName //true

herança: Herança de combinação

(Pág. 209)

Herança de combinação (às vezes também chamada de herança pseudoclássica) combina encadeamento de protótipo e roubo de construtor para obter o melhor de cada abordagem. A ideia básica é usar encadeamento de protótipo para herdar propriedades e métodos no protótipo e usar roubo de construtor para herdar propriedades de instância. Isso permite a reutilização da função definindo métodos no protótipo e permite que cada instância tenha suas próprias propriedades.

function SuperType(name){
  this.name = name;
  this.colors = [“red”, “blue”, “green”];
}

SuperType.prototype.sayName = function(){ 
  alert(this.name);
};

function SubType(name, age){
  //inherit properties SuperType.call(this, name);
  this.age = age; }
  //inherit methods
  SubType.prototype = new SuperType();
  SubType.prototype.sayAge = function(){ alert(this.age);
};

var instance1 = new SubType(“Nicholas”, 29); 
instance1.colors.push(“black”); 
alert(instance1.colors); //”red,blue,green,black”     
instance1.sayName(); //"Nicholas"
instance1.sayAge(); //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors);  //"red, blue, green"
instance2.sayName(); //"Greg"
instance2.sayAge(); //27

Related Posts