Hoje, na terceira parte da tradução do manual JavaScript, falaremos sobre diferentes maneiras de declarar variáveis, sobre tipos de dados, expressões e sobre os recursos de trabalhar com objetos.
→
Parte 1: primeiro programa, recursos de linguagem, padrões→
Parte 2: estilo do código e estrutura do programa→
Parte 3: variáveis, tipos de dados, expressões, objetos→
Parte 4: recursos→
Parte 5: matrizes e loops→
Parte 6: exceções, ponto e vírgula, literais curinga→
Parte 7: modo estrito, esta palavra-chave, eventos, módulos, cálculos matemáticos→
Parte 8: Visão geral dos recursos do ES6→
Parte 9: Visão geral dos padrões ES7, ES8 e ES9
Variáveis
Uma variável é um identificador ao qual é atribuído um valor. A variável pode ser acessada no programa, trabalhando desta maneira com o valor atribuído a ela.
Uma variável no próprio JavaScript não contém informações sobre o tipo de valores que serão armazenados nela. Isso significa que, escrevendo para uma variável, por exemplo, uma string, você pode escrever um número mais tarde. Essa operação não causará um erro no programa. É por isso que o JavaScript às vezes é chamado de linguagem "não digitada".
Antes de usar uma variável, ela deve ser declarada usando a palavra-chave
var ou
let . Quando se trata de constante, a palavra-chave
const é usada. É possível declarar uma variável e atribuir um determinado valor sem o uso dessas palavras-chave, mas isso não é recomendado.
▍ Palavra-chave var
Antes do padrão ES2015, o uso da palavra-chave
var era a única maneira de declarar variáveis.
var a = 0
Se
var omitido nesta construção, o valor será atribuído a uma variável não declarada. O resultado desta operação depende do modo em que o programa está sendo executado.
Portanto, se o chamado modo estrito estiver ativado, isso causará um erro. Se o modo estrito não estiver ativado, uma declaração implícita de variável ocorrerá e será atribuída ao objeto global. Em particular, isso significa que uma variável que é implicitamente declarada dessa maneira em uma determinada função estará disponível mesmo depois que a função concluir seu trabalho. Normalmente, espera-se que as variáveis declaradas nas funções não "ultrapassem" seus limites. É assim:
function notVar() { bNotVar = 1 // } notVar() console.log(bNotVar)
1 chegará ao console, normalmente ninguém espera esse comportamento do programa, a expressão
bNotVar = 1 não parece uma tentativa de declarar e inicializar uma variável, mas como uma tentativa de acessar uma variável localizada em um escopo externo da função (isso é bastante normal). Como resultado, a declaração implícita de variáveis confunde quem lê o código e pode levar a um comportamento inesperado do programa. Mais tarde, falaremos sobre funções e escopos, por enquanto, sempre tente usar palavras-chave especializadas quando o significado de uma expressão for declarar uma variável. Se, neste exemplo, o corpo da função for reescrito como
var bNotVar = 1 , uma tentativa de iniciar o fragmento de código acima resultará em uma mensagem de erro (pode ser vista no console do navegador).
Pode parecer, por exemplo, com isto:
Uncaught ReferenceError: bNotVar is not defined . Seu significado se resume ao fato de que o programa não pode trabalhar com uma variável inexistente. É muito melhor, quando você inicia o programa, ver essa mensagem de erro do que escrever um código incompreensível que possa se comportar inesperadamente.
Se, ao declarar uma variável, ela não for inicializada, nenhum valor for atribuído, será automaticamente atribuído o valor
undefined .
var a //typeof a === 'undefined'
As variáveis declaradas usando a palavra-chave
var podem ser declaradas repetidamente novamente atribuindo novos valores a elas (mas isso pode confundir alguém que lê o código).
var a = 1 var a = 2
Você pode declarar várias variáveis em uma expressão:
var a = 1, b = 2
O escopo de uma variável é chamado de escopo do programa no qual essa variável é acessível (visível).
Uma variável inicializada com a palavra-chave
var fora de uma função é atribuída a um objeto global. Ele tem um escopo global e pode ser acessado de qualquer lugar do programa. Se uma variável é declarada usando a palavra-chave
var dentro de uma função, ela é visível apenas dentro dessa função, sendo uma variável local para ela.
Se uma variável for declarada em uma função usando
var cujo nome corresponda ao nome de uma determinada variável do escopo global, ela "substituirá" a variável global. Ou seja, ao acessar uma variável dentro da função, ela usará sua versão local.
É importante entender que os blocos (áreas de código entre chaves) não criam novas áreas de visibilidade. Um novo escopo é criado quando a função é chamada. A palavra-chave
var possui o chamado escopo funcional, não o bloco.
Se uma variável é declarada no código da função, ela é visível para todo o código da função. Mesmo se uma variável for declarada com
var no final do código da função, você poderá consultá-la no início do código, pois o mecanismo de aumento de variáveis (elevação) funciona em JavaScript. Esse mecanismo "gera" declarações de variáveis, mas não as operações de sua inicialização. Isso pode ser uma fonte de confusão, portanto, é uma regra declarar variáveis no início de uma função.
▍ Palavra-chave let
A palavra-chave let apareceu no ES2015, que, de maneira simplificada, pode ser chamada de versão em bloco da
var . O escopo das variáveis declaradas usando a palavra-chave
let é limitado ao bloco, operador ou expressão em que é declarada, bem como aos blocos aninhados.
Se a palavra "deixar" em si não parece muito clara, pode-se imaginar que a palavra "deixe" seja usada. Em seguida, a expressão
let color = 'red' pode ser traduzida para o inglês assim: “deixe a cor ser vermelha”, e para o russo assim: 'deixe a cor ser vermelha'.
Ao usar a palavra-chave
let , você pode se livrar das ambiguidades associadas à palavra-chave
var (por exemplo, não será possível declarar a mesma variável duas vezes com
let ). O uso de
let outside da função, digamos, ao inicializar loops, não cria variáveis globais.
Por exemplo, esse código causará um erro:
for (let i = 0; i < 5; i++) { console.log(i) } console.log(i)
Se, quando o loop for inicializado, o contador
i será declarado usando a palavra-chave
var , então estarei disponível fora do loop após a conclusão.
Atualmente, ao desenvolver programas JS baseados em padrões modernos, você pode abandonar completamente
var e usar apenas as palavras-chave
let e
const .
▍Palavras-chave const
Variáveis declaradas usando as palavras-chave
var ou
let podem ser substituídas. Se
const usado em vez dessas palavras-chave, você não poderá atribuir um novo valor a uma constante declarada e inicializada com sua ajuda.
const a = 'test'
Neste exemplo, a constante
a não pode ser atribuída a um novo valor. Mas deve-se notar que, se
a não é um valor primitivo, como um número, mas um objeto, o uso da palavra-chave
const não protege esse objeto de alterações.
Quando eles dizem que um objeto é gravado em uma variável, na verdade eles significam que a variável se refere ao objeto. Este link não pode ser alterado e o objeto ao qual o link leva pode ser alterado.
A palavra-chave
const não torna os objetos imutáveis. Simplesmente protege contra alterações nas referências escritas nas constantes correspondentes. Aqui está o que parece:
const obj = {} console.log(obj.a) obj.a = 1 // console.log(obj.a) //obj = 5 //
Na constante
obj , na inicialização, um novo objeto vazio é gravado. Tentar acessar sua propriedade
a , que não existe, não causa um erro. O console fica
undefined . Depois disso, adicionamos uma nova propriedade ao objeto e tentamos acessá-lo novamente. Desta vez, o valor dessa propriedade -
1 - chega ao console. Se você descomentar a última linha do exemplo, uma tentativa de executar esse código levará a um erro.
A palavra-chave
const é muito semelhante a
let , em particular, ter um escopo de bloco.
Em condições modernas, é perfeitamente aceitável usar a palavra-chave
const , recorrer à
let apenas em casos especiais, declarar todas as entidades cujos valores não estão planejados para serem alterados. Porque A questão é que é melhor procurar usar as construções mais simples possíveis disponíveis para não complicar os programas e evitar erros.
Tipos de dados
Às vezes, o JavaScript é chamado de linguagem "não digitada", mas isso não é verdade. É verdade que você pode gravar valores de tipos diferentes em variáveis, mas existem tipos de dados em JavaScript. Em particular, estamos falando de tipos de dados primitivos e de objetos.
Para determinar o tipo de dados de um determinado valor, você pode usar o operador
typeof . Retorna uma string indicando o tipo de operando.
Types Tipos de dados primitivos
Aqui está uma lista de tipos de dados JavaScript primitivos:
numberstring (string)boolean (booleano)null (valor null especial)undefined (valor especial undefined )symbol (símbolo, usado em casos especiais, apareceu no ES6)
Aqui, os nomes dos tipos de dados são fornecidos na forma em que o operador
typeof retorna.
Vamos falar sobre os tipos de dados mais usados nesta lista.
Digite o número
Os valores do
number do tipo no JavaScript são representados como números de ponto flutuante de precisão dupla de 64 bits.
No código, literais numéricos são representados como números inteiros e fracionais no sistema decimal. Você pode usar outros métodos para registrar números. Por exemplo, se no início de um literal numérico houver um prefixo
0x - ele será percebido como um número escrito na notação hexadecimal. Os números também podem ser escritos em notação exponencial (nesses números, você pode encontrar a letra
e ).
Aqui estão exemplos de entradas inteiras:
10 5354576767321 0xCC //
Aqui estão os números fracionários.
3.14 .1234 5.2e4 //5.2 * 10^4
Literais numéricos (esse comportamento também é característico de alguns outros tipos primitivos), quando você tenta acessá-los como objetos, automaticamente, durante a operação, são convertidos nos objetos correspondentes, chamados "wrappers de objetos". Nesse caso, estamos falando do
Number invólucro de objeto.
Aqui, por exemplo, parece uma tentativa de acessar a variável
a , na qual um literal numérico é gravado, como um objeto, no console do Google Chrome.
Dica de ferramenta Quebra de objeto de númeroSe, por exemplo, você usar o
toString() de um objeto do tipo
Number , ele retornará uma representação de string do número. Parece o comando correspondente que pode ser executado no console do navegador (e no código regular) da seguinte forma:
a.toString()
Observe os colchetes duplos após o nome do método. Se você não colocá-los, o sistema não fornecerá um erro, mas, em vez da saída esperada, o console exibirá algo que não se parece com uma representação de seqüência do número 5.
O objeto
Number global pode ser usado na forma de um construtor, criando novos números com sua ajuda (embora quase nunca seja usado nesse formato), mas também pode ser usado como uma entidade independente sem criar instâncias (ou seja, alguns números representados a partir dele). ajuda). Por exemplo, sua propriedade
Number.MAX_VALUE contém o valor numérico máximo que pode ser representado em JavaScript.
Tipo string
Valores do tipo
string são sequências de caracteres. Esses valores são especificados como literais de cadeia de caracteres entre aspas simples ou duplas.
'A string' "Another string"
Os valores de sequência podem ser divididos em várias partes usando o caractere barra invertida.
"A \ string"
Uma sequência pode conter as chamadas sequências de escape que são interpretadas quando a sequência é impressa no console. Por exemplo, a sequência
\n significa um caractere de nova linha. O caractere de barra invertida também pode ser usado para adicionar aspas a seqüências de caracteres colocadas na mesma aspas. Escolher o caractere de citação com
\ faz com que o sistema não o perceba como um caractere especial.
'I\'ma developer'
As cadeias podem ser concatenadas usando o operador
+ .
"A " + "string"
Literais de modelo
O ES2015 introduziu os chamados literais de padrão, ou cadeias de caracteres de padrão. Eles são strings entre backticks (
` ) e possuem algumas propriedades interessantes.
`a string`
Por exemplo, em literais de modelo, você pode substituir certos valores resultantes da avaliação de expressões JavaScript.
`a string with ${something}` `a string with ${something+somethingElse}` `a string with ${obj.something()}`
O uso de aspas facilita a gravação de literais de cadeias multilinhas:
`a string with ${something}`
Digite booleano
O JavaScript possui algumas palavras reservadas usadas ao trabalhar com valores booleanos - eles são
true (verdadeiros) e
false (falsos). Operações de comparação, como
== ,
=== ,
< ,
> , retornam
true ou
false .
Expressões lógicas são usadas em construções como
if e
while , ajudando a controlar o progresso de um programa.
Deve-se observar que, onde se espera
true ou
false , você pode usar outros valores que são automaticamente considerados pelo idioma como verdadeiro (verdade) ou falso (falso).
Em particular, os seguintes são valores falsos:
0 -0 NaN undefined null '' //
Os valores restantes são verdadeiros.
Tipo nulo
JavaScript tem um valor
null especial que indica a ausência de um valor. Significados semelhantes são usados em outros idiomas.
Tipo indefinido
O valor
undefined gravado em uma determinada variável indica que essa variável não foi inicializada e não há valor para ela.
Este valor é retornado automaticamente de funções cujos resultados não são retornados explicitamente usando a palavra-chave
return . Se a função aceitar um parâmetro que, quando chamado, não for especificado, também será definido como
undefined .
Para verificar o valor
undefined , você pode usar a seguinte construção.
typeof variable === 'undefined'
▍ Objetos
Todos os valores que não são primitivos têm um tipo de objeto. Estamos falando de funções, matrizes, sobre o que chamamos de "objetos" e de muitas outras entidades. Todos esses tipos de dados são baseados no tipo de
object e, embora sejam diferentes em muitos aspectos, eles têm muito em comum.
Expressões
Expressões são fragmentos de código que podem ser processados e obtidos com base nos cálculos realizados um determinado valor. JavaScript possui várias categorias de expressões.
Expressões aritméticas
Expressões cujos resultados de cálculo são números se enquadram nessa categoria.
1 / 2 i++ i -= 2 i * 2
Expressões de string
O resultado da avaliação de tais expressões são cadeias de caracteres.
'A ' + 'string' 'A ' += 'string'
Expressões primárias
Literais, constantes e referências a identificadores se enquadram nessa categoria.
2 0.02 'something' true false this // , undefined i // i
Isso também inclui algumas das palavras-chave e construções de JavaScript.
function class function* // yield // / yield* // async function* // await // /pattern/i // () //
Expressões de inicialização de matriz e objeto
[] // {} // [1,2,3] {a: 1, b: 2} {a: {b: 1}}
Expressões lógicas
Nas expressões lógicas, são utilizados operadores lógicos, o resultado do cálculo são valores lógicos.
a && b a || b !a
Expressões de acesso à propriedade
Essas expressões permitem acessar as propriedades e os métodos dos objetos.
object.property // ( ) object[property] object['property']
Expressões de criação de objeto
new object() new a(1) new MyRectangle('name', 2, {a: 4})
Expressões de declaração de função
function() {} function(a, b) { return a * b } (a, b) => a * b a => a * 2 () => { return 2 }
Expressões de chamada
Tais expressões são usadas para chamar funções ou métodos de objetos.
ax(2) window.resize()
Trabalhar com objetos
Já encontramos objetos acima, falando sobre literais de objetos, sobre como chamar seus métodos, sobre como acessar suas propriedades. Aqui, falamos sobre objetos com mais detalhes, em particular, considere o mecanismo de herança do protótipo e o uso da palavra-chave
class .
▍ Herança do protótipo
O JavaScript se destaca entre as linguagens de programação modernas, pois suporta a herança de protótipo. A maioria das linguagens orientadas a objetos usa um modelo de herança baseado em classe.
Cada objeto JavaScript possui uma propriedade especial (
__proto__ ) que aponta para outro objeto que é seu protótipo. Um objeto herda as propriedades e métodos do protótipo.
Suponha que tenhamos um objeto criado usando um literal de objeto.
const car = {}
Ou criamos um objeto usando o construtor
Object .
const car = new Object()
Em qualquer um desses casos, o protótipo do objeto
car será
Object.prototype .
Se você criar uma matriz que também seja um objeto, seu protótipo será um objeto
Array.prototype .
const list = [] // const list = new Array()
Você pode verificar isso da seguinte maneira.
car.__proto__ == Object.prototype //true car.__proto__ == new Object().__proto__ //true list.__proto__ == Object.prototype //false list.__proto__ == Array.prototype //true list.__proto__ == new Array().__proto__ //true
Aqui usamos a propriedade
__proto__ , que não precisa estar disponível para o desenvolvedor, mas geralmente você pode acessá-la. Deve-se notar que uma maneira mais confiável de obter um protótipo de um objeto é usar o método
getPrototypeOf() do
Object global.
Object.getPrototypeOf(new Object())
Todas as propriedades e métodos do protótipo são acessíveis ao objeto que possui esse protótipo. Aqui, por exemplo, se parece com a lista deles para uma matriz.
Dica de matrizO protótipo básico para todos os objetos é
Object.prototype .
Array.prototype.__proto__ == Object.prototype
Object.prototype não possui um protótipo.
O que vimos acima é um exemplo de uma cadeia de protótipos.
Ao tentar acessar uma propriedade ou método de um objeto, se o objeto em si não tiver essa propriedade ou método, eles serão pesquisados em seu protótipo, depois no protótipo do protótipo e assim por diante, até que o desejado seja encontrado ou até a cadeia de protótipos não termina.
Além de criar objetos usando o
new operador e literais de objetos ou literais de matriz, você pode criar uma instância de um objeto usando o método
Object.create() . O primeiro argumento passado para esse método é um objeto que se tornará o protótipo do objeto criado usando-o.
const car = Object.create(Object.prototype)
Você pode verificar se um objeto faz parte da cadeia de protótipos de outro objeto usando o método
isPrototypeOf() .
const list = [] Array.prototype.isPrototypeOf(list)
Funções de construtor
Acima, criamos novos objetos usando as funções de construtor já disponíveis no idioma (quando são chamadas, a
new palavra-chave é usada). . .
function Person(name) { this.name = name } Person.prototype.hello = function() { console.log(this.name) } let person = new Person('Flavio') person.hello() console.log(Person.prototype.isPrototypeOf(person))
-. ,
this .
name , . . - ,
name , .
,
name , . , , ,
hello() . ,
Person hello() ( ).
▍
ES6 JavaScript «».
JavaScript . , JS . , , , « » . , , , , , .
.
class Person { constructor(name) { this.name = name } hello() { return 'Hello, I am ' + this.name + '.' } }
,
new ClassIdentifier() .
constructor , .
.
hello() — , , .
Person .
const flavio = new Person('Flavio') flavio.hello()
,
. , , , , .
, ( ) , , -, .
class Programmer extends Person { hello() { return super.hello() + ' I am a programmer.' } } const flavio = new Programmer('Flavio') flavio.hello()
hello() Hello, I am Flavio. I am a programmer .
(), .
super .
, , , , , . (
static ) , .
JavaScript , (, ) . , , .
,
get set . — , , . -, — .
class Person { constructor(name) { this.userName = name } set name(value) { this.userName = value } get name() { return this.userName } }
Sumário
, , JavaScript. .
Caros leitores! JS, , class.
