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