Qual é a diferença entre escopo e contexto no Javascript?

1. Por que é importante entender a diferença?: nesta classe, vou explicar a diferença entre escopo e contexto e JavaScript. Eu também vou ajudá-lo a entender por que o contexto de escopo às vezes pode parecer a mesma coisa mesmo que eles não sejam. E também explicarei como tomar melhores decisões sobre o contexto de escopo ao planejar seu código. A terceira pergunta que temos de responder é. Por que é tão importante entender a diferença entre escopo e contexto em JavaScript ? Bem, como desenvolvedor, você gasta a maior parte do tempo fazendo uma de duas coisas desenvolvendo ou solucionando problemas . E quando se trata de desenvolvimento, se você tem uma forte compreensão da diferença entre escopo e contexto, você vai escrever código que é mais limpo e fácil de manter. E isso porque você tomará melhores decisões sobre como aproveitar melhor, o escopo e o contexto em seu código quando se trata de solução de problemas. Se você entender a diferença entre escopo e contexto, você fará o melhor uso do seu tempo e tomará as etapas corretas de solução de problemas para resolver o problema mais rapidamente. Então, mais adiante neste curso, falará sobre como tomar melhores decisões sobre como aproveitar escopo e o contexto em seu código. Por isso, neste momento, só quero concentrar-me na resolução de problemas. Vamos dar uma olhada em um fluxo de trabalho de solução de problemas típico. Então, digamos, tenha um problema ou um bug. Agora, na maioria dos casos, você descobre o bug e imediatamente começa a tomar medidas para solucionar esse problema. E se você realmente não entender a diferença entre escopo no contexto, você pode achar que suas etapas de solução de problemas estão em todo o lugar. Uma coisa leva você a outra, e um minuto você acha que é um problema com a variável. E então talvez seja um problema de contexto porque é uma propriedade de um objeto. Mas então você não tem certeza, e isso leva você a um caminho diferente. E neste 0.1 coisa que é claro é que não temos ah, plano de jogo muito focado e são etapas de solução de problemas não são, hum, realmente nos levando a qualquer lugar de uma maneira lógica. Portanto, o problema aqui é que, sem uma compreensão realmente sólida de uma diferença entre escopo e contexto, você pode descobrir que sua solução de problemas pode levar muito tempo. Pode ser desfocado, e há uma chance de que você nunca consiga resolver o problema. Eu acho que há uma maneira melhor de fazer isso, então quando você começa com um problema ou um bug. Se a primeira coisa que você faz é perguntar a si mesmo, isso é um problema de escopo ou contexto? Agora, se você fizer essa pergunta a si mesmo, mas primeiro, antes de tomar quaisquer etapas de solução de problemas, se você tiver conhecimento para responder a essa pergunta, se entender a diferença entre escopo e contexto e você pode responder a esta pergunta com confiança, então você pode tomar a decisão certa. E uma vez que você sabe a resposta para essa pergunta , as etapas de solução de problemas que você executa em mais lógica. Eles estão mais focados, e você pode resolver seu problema muito mais rapidamente. Então, quando se trata de solução de problemas, entender as diferentes equipes, contexto de escopo ajuda você a solucionar o problema com mais facilidade. E é importante que, quando você começar a solucionar um problema, você queira fazer uma pergunta a si mesmo. Isso é um escopo ou um contexto? Problemas do primeiro passo é determinar se o problema é um escopo ou um problema de contexto. A segunda etapa é seguir as etapas apropriadas de solução de problemas com base na resposta à primeira parte e, quando você executar as etapas apropriadas de solução de problemas, você finalmente resolverá seus problemas mais rapidamente 2. Qual é a diferença entre escopo e contexto em JavaScript?: Então a próxima pergunta que precisamos responder é qual é a diferença entre escopo e contexto em JavaScript? Bem, escopo é a visibilidade de variáveis, e contexto é o objeto ao qual um método pertence. Então, se você colocá-los lado a lado, podemos pensar sobre isso dessa maneira. O escopo é uma variável de visibilidade, e você pode se perguntar, você sabe, o que é esse escopo de uma variável? Ou como é variável, escopo e com contexto, qual é o objeto ao qual o método pertence? De vez em quando, você pode se perguntar, O que é este ou em que contexto este método é executado? Então, quando você pensa em escopo, pense em variáveis. E quando você pensa em contexto, pense em métodos. Vamos olhar para um exemplo, apenas vamos começar com uma espécie de abordagem de pseudo-código. Tenho estas três coisas na tela. Eu tenho Sam uma ou três e função, e essas são apenas três coisas, e agora eles estão apenas flutuando no espaço, e eu não tenho como obtê-las. Então Sam é uma string, e 123 é um número, e disfunção é uma função. Agora vamos apenas fingir que esta função é uma função, porque ela realmente não está correta. Sintaxe JavaScript. Mas, de novo, é só um pseudo código. Por enquanto, é só fingir que é uma função. Ok, então eu tenho que definir este número e disfunção, mas eu realmente não tenho nenhuma maneira de me apoderar dessas coisas. Não consigo pôr as mãos neles. Eles só estão lá. Eu precisava de uma maneira de me referir a eles, então precisamos. Precisamos nos referir a esses valores de uma forma, dando-lhes algum tipo de nome. Então vamos chamar o nome do Sam. Vamos chamar 123 contagem e foi chamado The Function Greet. Então, fazendo isso, agora tenho uma maneira de me referir a cada uma dessas coisas. Então, quando eu alavanco o escopo, eu posso criar variáveis para cada uma dessas coisas que eu posso salvar. Nosso nome é igual a Sam Var Count é igual a 123 e bar grego é igual a função. E se eu estivesse indo para o contexto de alavancagem, eu poderia criar um objeto. Vamos apenas dizer que os objetos chamados O B J e eu poderia dar propriedades a esse objeto porque objetos têm propriedades e eu poderia dar a ele uma propriedade de nome que Sam e eu poderíamos dar-lhe. Propriedade da conta. Isso é 123 e eu poderia dar-lhe uma propriedade grega. Isso é disfunção. Ou eu poderia misturá-lo Alavancagem, escopo e contato para que eu pudesse salvar nosso nome é igual a Sam e O B j contagem de pontos vai 123 e 4. Grego é igual a função. Então vamos ver como isso realmente funciona em código JavaScript. Então, voltando ao escopo se eu quisesse criar variáveis para essas coisas que eu tinha usado de nossa palavra-chave e eu salvar nosso nome é igual a Sam Farr Count é igual a 123 e nossa grande função igual e dentro da função grega Isler do que valores de nome. Então eu estou criando identificadores para esses valores criando variáveis. Agora, se eu quisesse alavancar o contexto, eu poderia criar uma variável não b J. É um objeto. E então eu dou essa propriedade de objeto. Então o nome B j ponto é Sam e O. P. J contagem de pontos é 123 e mais. ganância de Jadot é uma função em alerta máximo. Este nome de ações que alertaria Sam. Agora vamos falar um pouco mais detalhadamente sobre o que esta palavra-chave significa. Mas agora mesmo. Basta ter em mente que quando se trata de contexto, a palavra-chave this é realmente importante e que esta chave foram refere-se ao objeto que um método pertence. Agora. Se eu fosse meio que misturar e usar escopo e contexto, eu poderia dizer “abra Jason”. Uma variável e nome é uma variável, mas sobre conta jade é uma propriedade e, em seguida, ninguém ponto greet também é uma propriedade. É também um método quando objetos propriedade é um método são, função ah, e então é chamado de métodos. Objetos têm propriedades, mas quando uma propriedade é uma função, é um método. Neste caso, ele alerta o nome variável auto tipo de três maneiras toe realmente duas maneiras de olhar para ele. Você pode aproveitar o escopo e criar variáveis. Você pode aproveitar o contexto e criar propriedades de objeto, ou você certamente poderia misturar e combinar. Então, mais uma vez, escopo é a visibilidade das variáveis. E quando você pensa em escopo, pense que variáveis e contexto é o objeto ao qual um método pertence, e quando você pensa em contatos, pense em métodos 3. Software necessário: Há algumas suposições que estou fazendo sobre você. Eu suponho que você já conhece um NPM instalado em sua máquina que você tem um editor de texto decente e, em seguida, você tem um navegador da Web. Se você não tem todas essas três coisas configuradas em seu computador já, você é importante que você pare agora e cuide disso antes de continuar com o curso. Agora, se você precisa instalar não, você pode simplesmente ir para conhecer J s dot órgão Donald installer para o seu sistema operacional. Eu recomendo, no entanto, que você use um gerenciador de pacotes para instalar nó. Isso garante que você pode instalar a versão mais recente do observado em P. M. E, em seguida, no futuro, você pode atualizar sua versão de nota. Se você estiver usando um Mac, você pode usar homebrew, o que eu recomendo, e se você estiver usando janelas, você pode usar chocolatey ou colher. Se você precisa de um editor de texto, eu recomendo Visual studio Code, que funciona tanto em Mac e Windows ou texto sublime, que também é um excelente editor de texto que funciona em Mac e Windows também. Se você precisa de um navegador da Web, eu recomendo o Google Chrome ou Mozilla Firefox, ambos funcionando no Mac OS e no Windows 4. Fazer a configuração: Certo, vamos configurar o código de exemplo na sua máquina. Vamos fazer três coisas. Primeiro, irá baixar o código de exemplo. Em seguida, irá configurar o projeto usando o NPM, e depois disso, vou demonstrar o servidor Web local. Então, primeiro, vamos começar baixando o código de exemplo. Assim como uma pré-visualização, vou orientá-lo através das etapas de clicar neste link na página da classe Web, que iniciará o download do arquivo ZIP. E então, depois de ter baixado esse arquivo zip, você vai descompactar esse arquivo. Abra essa pasta no seu aplicativo de terminal. Você executará a instalação do NPM para instalar dependências. Então você vai executar o NPM. Comece a iniciar o servidor Web local e aponte o browser para o anfitrião local 3000. Nesse ponto, você verá a página Web de exemplo do servidor Web local em seus navegadores. Vamos realmente caminhar por esses passos juntos agora mesmo. Role para baixo em direção à parte inferior da página e clique em seu projeto. No lado direito, você verá um link chamado Escopo versus exemplos de contato dot sip. Clique nesse link para iniciar o download, mova para a dobra que tem o arquivo zip baixado. Eu tenho o meu na minha área de trabalho só para manter as coisas simples. Descompacte esse arquivo. Abra seu aplicativo de terminal e mova para essa pasta. Em seguida, execute a instalação do Command NPM. Isso fará o download de todas as dependências do projeto. Quando isso terminar, precisaremos iniciar o servidor Web. Então, quando você estiver NPM stoles concluída, execute o comando MPM start. Você verá uma mensagem informando que os servidores Web em execução na porta 3000 do host local. Então abra seu navegador e aponte seu navegador para o host local 3000 e você verá o exemplo. Página da Web. OK, agora que você tem o código de exemplo definido em sua máquina, eu vou percorrer esta pequena página da Web que, juntos, vai usar como, ah para nossas discussões sobre os diferentes conceitos nesta classe e alguns dos exemplos de código. Esta é uma página muito, muito simples que eu montei não faz muito, mas é principalmente que vamos estar usando para demonstrar os exemplos de código em muitas das lições. Então, primeiro no canto superior esquerdo, se você clicar em mostrar exemplos, mas você verá que há links para todos os exemplos do curso, e isso permite que você execute os exemplos de código sem ter uma cópia e colar. Você pode apenas executá-lo lá mesmo do navegador. Então, se você rolar para baixo e clicar no que diz método encadeamento, nós não vamos realmente entrar nisso agora. Mas, um, esse exemplo em particular realmente faz todo o código funcionar para os EUA um, esse exemplo em particular realmente faz todo o código funcionar para os EUA Então agora eu só quero mostrar a vocês como a página funciona. Esta é uma equipe de vendas fictícia de 10 pessoas, e para cada pessoa de vendas, eu posso clicar no botão de seleção e eu posso clicar no botão de seleção. Então, quando eu clicar em selecionar que você pode ver a pessoa de vendas selecionou o você eu muda um pouco e Aiken de Select it. E eu também posso simplesmente excluir manualmente cada pessoa de vendas da página clicando no botão excluir e para essa pessoa de vendas. E quando eu seleciono um ou mais vendedores, o botão excluir selecionado no canto superior direito mostra e quando eu clico que qualquer pessoa de vendas que selecionou é excluída, então, se eu selecionar, digamos, tumb ou e clique em excluir os selecionados para excluir. E à medida que você exclui vendedores, a contagem, a contagem total de vendedores diminui. Coisas muito simples. Mas você sabe que será uma espécie de percorrer alguns exemplos de código e estamos usando isso para basear nossos exemplos fora. E em qualquer momento, se você quiser recarregar a página, basta clicar no botão recarregar página e começar do zero. Se abrires, os teus empregos podem consolar. Você também verá uma mensagem sempre que carregar um exemplo de código que apenas informa exatamente qual arquivo foi carregado. Então você pode ter certeza de que, por exemplo, estou carregando exemplos de escopo global dois. E vejo isso no console, então avise que está executando o exemplo certo no caso de não ter certeza. 5. Onde encontrar o código de exemplo: Para grande parte desta classe você estará seguindo junto com o código de exemplo. Então vamos tirar um segundo para descobrir onde. Para encontrar estes exemplos. Abra seu editor de texto. Estou usando o código do Visual Studio e movo para a pasta Projeto. Abra a pasta W W W. Abra a pasta Js, Abra a pasta Exemplos na pasta Exemplos. Você encontrará um número de subpastas e cada subpasta dos arquivos de exemplo para esse assunto específico. Por exemplo, na pasta Escopo Global encontrará os exemplos para escopo global e na pasta da escola privada encontrará exemplos para escopo privado e assim por diante. Vamos investigar isso especificamente um pouco mais tarde, mas eu só queria mostrar onde encontrar o código de exemplo. 6. Detalhes de espaço - três os os a de espaço de espaço: Mas vamos falar sobre o escopo em um pouco mais de detalhes, como discutimos anteriormente. escopo é a visibilidade das variáveis, e há três tipos de escopo. Há escopo global, há escopo privado, e há escopo de nível de bloco. 7. Âmbito de global - discussão: vamos voltar e falar um pouco mais especificamente sobre o escopo global. O escopo global também é conhecido como o objeto de janela ou escopo mais externo ou um escopo de nível superior. Basicamente, escopo global é qualquer código que não está em uma função. Então, por exemplo, eu tenho algum código aqui à esquerda. E como você pode ver, eu tenho um par de variáveis no topo, e eu tenho duas funções comida e bar e, em seguida, na parte inferior do poderia executar essas funções. Assim, as variáveis velocidade e saudação e as funções flu e bar e a execução dessas funções são código global. Eles são definidos no escopo global, e isso é porque eles não estão definidos em uma função. Então o código que está dentro das funções de alimentos e barras não é código global porque esse código é definido dentro de uma função. Então, neste caso, eu tenho uma variável chamada aplicativo, e este aplicativo é uma variável privada porque ela é definida dentro de uma função. Portanto, é realmente importante lembrar que o escopo global é qualquer código que não é definido na função ah 8. Âmbito global - demonstração: abra a pasta Exemplos e, em seguida, abra a subpasta global Escopo. Agora vejamos o exemplo do Big. Âmbito global um. Aqui eu tenho uma velocidade de frio variável global. Eu sei que isso é global porque não está em uma função é encontrar fora de uma função. Então eu declaro a velocidade variável, que é igual a 25 Eu tenho uma declaração de log console fora colocando essa variável e nós devemos obter 25 no console. Então, se eu clicar em mostrar exemplos e, em seguida, o exemplo de escopo global um, podemos ver que temos Global Street 25. Não é uma grande surpresa. Então vamos olhar para o escopo global número dois. Então, mais uma vez eu tenho a velocidade variável global que é igual a 25. Mas então eu tenho essa função dentro da função. Eu também saída na velocidade do console a partir de alimentos, que é a variável de velocidade global definida on-line três e, em seguida, on-line. Nove. Eu tenho o log do console afirmou mais saída, o valor da variável global e on-line 10 Executar fu, que também produz a variável global. Então vamos dar uma olhada em mostrar exemplos de escopo global para, e eu vejo a velocidade de duas mensagens do escopo global. 25 velocidade da comida 25. Coisas muito simples. Mas o ponto aqui é que uma variável global é maravilhas para encontrar no escopo global, e sabemos que estamos no escopo global. Se não estivermos em uma função. Velocidade variável não é definida em uma função, o que significa que é global, mesmo que nós acessá-lo na função on-line. Seis. Esta variável de velocidade aqui ainda está referindo a velocidade global, e então estamos colocando aqui. Então lembre-se que a variável global é aquela que é definida fora de uma função. 9. Âmbito de privada - discussão: e em seguida é escopo privado. Escopo privado também é conhecido como escopo local ou escopo de função. Escopo privado é alcançado usando a palavra-chave VAR dentro de uma função. Então, se exemplo nesta função eu criar uma variável chamada Speed e é privado porque eu usei de nossa palavra-chave, é assim tão simples. Se eu usei de nossa palavra-chave dentro de uma função, essa variável que estou criando torna-se privada para essa função. Agora, é importante apontar algo muito, muito crítico sobre JavaScript, e isso é escopo lexical. O escopo lexical é a maneira como o escopo se comporta em JavaScript em que inter funções podem ver para fora. Mas as funções externas não podem ver dentro. E o que eu quero dizer especificamente é, neste caso, nós temos três funções externa, média e interna, e a inter função, que é a função enorme, está aninhada. Está aninhado duas vezes. Está aninhado dentro do meio e intermediários aninhados de dentro para fora. Então, a partir da função interna, essa função tem acesso às variáveis de barra e comida. Porque a função inter pode ver para fora, ele pode ver quaisquer variáveis declaradas fora de si mesmo. Assim, a função inter tem um pouco de acesso. Tem acesso aos seus próprios banhos privados. Variável. Tem acesso à variável bar, e tem acesso à variável alimentar. Mas o oposto não é verdade, modo que as funções externa e média não são capazes de ver dentro, Assim, a função externa tem acesso a sua própria variável de comida privada. Mas ele não pode ver dentro da função do meio que não pode ver a variável bar, e ele não pode ver a variável bass porque está dentro da função inter. Então, mais uma vez, as funções podem ver para fora, mas não podem ver dentro. E esse é o escopo lexical em JavaScript. E é realmente importante entender que porque é a maneira como o escopo se comporta e JavaScript, e JavaScript, quando você declara uma variável usando palavra-chave Navarre, essa variável se torna privada para essa função, e nada fora dessa função tem acesso a essa variável. Mas essa função pode ver quaisquer variáveis definidas fora de si mesma. 10. Âmbito de privada - demonstração: abra a pasta Exemplos e, em seguida, abra a subpasta de escopo privado. Vejamos o âmbito privado um. Isto é praticamente o que tivemos no último exemplo global. Temos uma velocidade de frio variável global quando temos essa função chamada comida, mas estamos acessando a velocidade global dentro dessa função. Então ele acabou com 25 consoles duas vezes. Vamos mostrar exemplos de Escopo Privado um e queremos subir com 25 no Cônsul duas vezes. Ok, então quando você vai para a área privada você vai ver que as coisas foram um pouco diferentes. Eu tenho minha velocidade global aqui, mas então, dentro desta função, eu tenho uma variável privada, e uma variável privada é criada usando a palavra-chave var dentro de uma função. Então, quando usamos a palavra-chave var para definir variável dentro de uma função que variável torna-se privado dessa função. Portanto, esta versão de velocidade não está disponível fora desta função. Quer executar a linha número oito? Eu tenho a versão privada da velocidade desta velocidade aqui na linha número oito, faz referência a esta velocidade on-line número seis. Onde está esta velocidade número on-line 11 referências a velocidade global número on-line três. Então eu deveria entrar no meu console. A velocidade global é de 25, então devo dizer a carga. A velocidade local é de 100. E vamos mostrar exemplos de escopo privado para. E é exatamente isso. Velocidades globais. 25 lanças privadas 100. Então o ponto aqui é que agora, ou temos, estamos criando uma variável privada também conhecida como variável local. Mas usando a palavra-chave var, vamos olhar para o escopo privado. Três. Então aqui eu tenho um exemplo de escopo lexical. Assim, com o escopo lexical, funções podem ver para fora, mas não aqui. Na linha número oito disfunção bar I acesso à variável de velocidade. Mas esta variável de velocidade resolve a esta velocidade. Então, quando eu ver esta declaração de registro do console número nove on-line, ele vai dizer barra 100. E isso porque esta barra de funções pode ver fora de si mesma. Ele pode ver que a velocidade variável que a primeira velocidade variável de multas é igual a 100 Então aqui barras executadas e esta declaração de bloqueio cônsul encontra a versão da velocidade é igual a 100. Além disso, observei um registro do cônsul on-line 13 velocidade de referência. Ele também aumenta com a versão de velocidade igual a 100 porque novamente, dentro desta função, velocidade é igual a 100. Esta função pode ver fora de si mesma, e sua declaração de log console está dentro do escopo de alimentos. Assim, tanto as declarações do Conselho de alimentos bar sairão 100. E, em seguida, esta declaração de bloqueio do console irá produzir 25 porque aqui a velocidade resolve para 25 a versão global da velocidade. Esses olham para o exemplo, número três para escopo privado. Então vemos Global 25 bar 104 100. Então, se olharmos para o último exemplo de escopo privado, é um pouco diferente, porque aqui dentro da função bar, estamos declarando uma velocidade variável privada. Tão online. 11 esta velocidade resolve a esta velocidade, que é 500. Então Bar agora tem sua própria versão privada de velocidade, que significa que esta versão de referência rápida sobre a vida 15 será 100 porque estamos acessando o primeiro em sentido de velocidade. Nós confinados em alimentos e a versão privada de velocidade e comida é igual a 100. Mas no bar a versão privada da velocidade é igual a 500. E isso porque usamos nossa palavra-chave para definir velocidade, o que cria uma versão privada da velocidade. Então agora devemos ter, uh, aqui Global 25. Quando executarmos comida, vamos com o Bar 500 Full 100. Então vamos olhar para mostrar exemplos, escopo privado. Exemplo. Quatro. Isso é o que temos. Nós temos global 25 Bar 500 alimentos 100. Então a principal coisa aqui que eu só quero apontar é essa ferramenta. Duas coisas. Um quando usamos de nossa palavra-chave, nós criamos uma variável privada. É um dedo particular ou local que função, e também que as funções podem ver fora de si mesmas. É uma mira léxica fria. Então, esta função de bar. Se fôssemos tirar a palavra-chave var, tirar esta linha, isso iria produzir 100 em vez de 500 porque seria, nós diríamos, Ei, eu não tenho uma velocidade de frio variável privada. Deixe-me ver se eu posso encontrar um, e ele iria olhar fora de si mesmo e olhar para este escopo e encontrar esta versão de velocidade. Mas aqui desde que declaramos variável privada chamada velocidade. Esta velocidade resolve para 500 a velocidade resolve para 100 neste resolve para 25 porque com escopo lexical, funções podem ver para fora. Mas eles não podem ver. E mais uma vez, a palavra-chave VAR cria uma variável privada ou local apenas para a função em que foi definida. 11. Âmbito de bloco - discussão: O tipo final de escopo em JavaScript é escopo de bloco, então escopo de bloco é alcançado usando as palavras-chave let ou const dentro de um bloco. Agora ele foi introduzido na versão Atmos Script 2015 do script Java. Então, antes da ec rescript 2015 tínhamos dois tipos de escopo, global e privada. E depois que ec rescript 2015 foi lançado, temos três tipos de escopo global, privado e escopo de nível de bloco. Então você pode estar se perguntando o que é um poço preto, este é um bloco de blocos está abrindo e fechando chaves. E dentro dessas chaves encaracoladas você coloca seu casaco e ele o código que você coloca dentro dessas chaves, um casaco nível de bloco. Então, por exemplo, eu tenho essa variável. Eu e eu declaramos isso usando a palavra-chave let ambos. Então, usando a palavra-chave let dentro de um bloco, eu torna-se escopo para esse bloco. Agora, eu também poderia ter outra variável I que é definida neste caso globalmente porque mais uma vez , se qualquer código que não está definido em uma função é definido globalmente, então aqui eu tenho essa variável global chamada I E então eu tenho essa outra variável chamada I que é igual a 50 dentro do bloco. E esses dois podem coexistir muito felizes porque o 1º 1 é globalmente escopo e o 2º 1 é escopo de bloco. Então eu também poderia usar a constante que você era para criar aquela segunda variável I as diferenças . Se eu usasse a palavra-chave let, eu poderia virar sobre ela que variável a próxima linha de bilhetes de código. Deixaram que eu fosse igual a 50. E então eu poderia dizer, deixe-me igualar 5000. Sem problema. Mas quando uso uma palavra de vigarista, isso é uma constante. Então, uma vez que faço isso, não posso tentar mudar. Eu sou eu. Então, se eu disser constante Artigo 50 e depois dizer que vem, eu é igual a 5000 Eu vou ter um erro porque eu não posso substituir os olhos. Então a equipe diferente deixou e Const. É que ambos criam variáveis de nível de bloco ou escopo de bloco. Mas, Const. Quando você usa essa palavra-chave, você não pode substituí-la. Então, mais uma vez, há três maneiras diferentes agora de criar uma variável. Há var, que cria escopo privado. Há let que cria, ah, ah, nível de bloco ou uma variável de escopo de bloco, e há a palavra-chave Const, que também cria uma variável de escopo de bloco. Mas essa atribuição de valor não pode ser alterada 12. Âmbito de bloco - demonstração: abra a pasta Exemplos e, em seguida, abra a subpasta de escopo de bloco. Vejamos os blocos, exemplo Hope. Um. Você ouve sobre esta variável global I, que é igual a 100, então eu tenho um bloco de código aqui e ele disse O bloco eu saída o valor de I e, em seguida, no lado do bloco eu colocar para fora o valor por novamente. Vejamos o exemplo de bloco Número um. Então eu vejo 100 duas vezes para A e B, e isso faz sentido porque eu não estou fazendo nada de especial aqui. Eu só estou colocando o valor de I duas vezes uma vez no bloco de uma vez fora do bloco do meu ponto aqui. Isso é porque eu não fiz nada especial dentro do Plock? Eu ainda tenho 100 por isso é olhar para o exemplo preto número dois. Eu tenho uma variável global chamada I, que é igual a 100. Mas, em seguida, dentro do meu bloco, eu tenho uma variável de escopo de nível de bloco I, que é igual a 50 e saída que no console. Então esta versão de I é diferente desta versão de I porque esta é tem escopo de nível de bloco . Na verdade, é escopo apenas para este bloco, então eu sou igual a 50 no bloco. Mas eu tinha 100 anos fora do quarteirão. Então, quando eu olho para o exemplo de escopo de bloco para eu obter 50 e 100. Então, o ponto principal aqui estava usando a palavra-chave let para criar uma variável de escopo de nível de bloco , que não entra em conflito com o global porque é escopo aqui para o bloco estava procurando escopo de bloco. Exemplo. Três. Então aqui eu faço exatamente a mesma coisa. Mas em vez de usar a palavra-chave let, eu uso a palavra-chave constante para criar este bloco. Variável com escopo I Então, se eu executar blocos? Exemplo. Três mesma coisa. 15 100 escopo de bloco aberto. Exemplo. Número quatro. Então aqui estão duas variáveis globais i NJ I começa zero n. J. J. começou 100. Eu tenho um loop for e no incremento de quatro loop I. Mas eu também incrementa J. Então o que devemos acabar com é loop onde as saídas do conselho são iguais a zero e 101 202 e assim por diante. Vamos dar uma olhada no exemplo de escopo de bloco para e é isso que acabamos com. Então o ponto que estou fazendo aqui é que não estamos aproveitando o escopo do bloco aqui. Estamos implementando o I NJ dentro da lista negra. Vamos ver se podemos corrigir esse exemplo. Cinco. O que fazemos é que é muito parecido, exceto que dentro do nosso bloco, definimos o J para ser atingido apenas no bloco dele. Então agora J é igual a 50 e nós incrementamos perseguição. O que vamos acabar com é um loop onde as saídas do conselho são de 0 51 1 51 a 51 3 51 e assim por diante porque em cada loop de iteração estavam definindo uma nova variável que tinha escopo apenas para este bloco e incrementando nele apenas um. Então, se formos dois quarteirões, vá o exemplo cinco. Isso é o que temos. 51 51 51 para 51. Ilustrando que Jay está indo para este quarteirão e todos os fechaduras interacionais. Nós obtemos uma nova versão do J. Estamos criando uma nova versão do J usando a palavra-chave let e é escopo apenas para este bloco , enquanto eu é escopo global. Então ele mudou em cada iteração, também obter escopo de bloco. Exemplo. Seis. Aqui estamos fazendo exatamente a mesma coisa. Onley estava definindo J com a palavra-chave constante em vez da palavra-chave let. Mas isso será um problema porque com a palavra conseqüente, não podemos sobrescrever o valor que criamos uma vez que criamos J e dizemos que é igual a um não podemos virar dizer J é igual a ser porque com a palavra-chave constante, estamos criando um constante. Então esta tentativa de incrementar j irá lançar um tipo Er uh, olhe, exemplo número seis escopo bloco Exemplo número seis. Você pode ver na atribuição de erro tipo tribunal uma variável constante. É o que esse ditado diz: “ Criaste uma constante aqui e ele virou-se e tentou mudá-la. Não podemos fazer isso. Então, a palavra-chave Const funciona da mesma maneira que let palavra-chave. Ele cria uma variável com escopo de nível de bloco. Mas uma vez que você cria que variavelmente não pode mudar, você não pode substituí-lo. Se você olhar um escopo de bloco exemplos sete. Fazemos a mesma coisa, mas não tentamos mudar o Jay. Deixamos do jeito que está. Então vamos obter a saída do conselho de 0 51 52 53 15 Assim por diante. Então, um show. Exemplos bloqueiam o escopo. Sete. Isso é exatamente o que temos. 0 51 52 50 E isso é porque criamos a variável de nível de bloco J, que é igual a 50. E isso é bom. É agora. Jay não entra em conflito com esta versão do James Global, mas nós simplesmente não a mudamos. Então, a coisa a lembrar sobre deixar Const. É que com lead, você pode criar uma variável que tem escopo de nível bloqueado e você pode alterá-lo, enquanto que com Const. Você não pode mudá-lo. Uma vez que você criou, você deve deixá-lo em paz. É uma constante, mas ambos os let e cons criam variáveis com escopo de nível de bloco. 13. Contexto - discussão: No início desta aula, fizemos a pergunta muito importante. O que é contexto em JavaScript? E descobrimos que a resposta era, contexto é o objeto ao qual um método pertence. Essa discussão foi de níveis bastante altos. Vamos cavar um pouco mais fundo. Aqui. Eu tenho este objeto chamado conta, e ele tem duas propriedades número de conta, que é um número e obter número de conta, que é uma função em JavaScript quando uma propriedade é uma função. Também é chamado de método que acontece de ser verdadeiro para uma série de idiomas. Mas aqui para obter o número da conta. Propriedade é um método porque é uma função, e essa função retorna o valor da propriedade número da conta deste objeto Então, neste caso, iria retornar 12345 Agora poderíamos ter dito em nosso número de conta get, método retorna o número da conta ponto da conta, mas isso não é muito elegante. Então o que fazemos é dizer, retornar este número de conta inicial agora desde obter número de conta é um método o JavaScript. Esta palavra-chave dentro desse método refere-se ao objeto ao qual esse método pertence, e esse método pertence ao objeto conta. Assim, o método get account number retorna a propriedade account number de qualquer objeto a que pertence, que acontece a ser o objeto account. Então, quando dizemos esse número de conta coisas, estamos realmente vendo o número da conta ponto da conta. Portanto, é muito importante lembrar que quando se trata de contexto, o JavaScript esta palavra-chave se refere ao objeto ao qual um método pertence. Eu estava cavando um pouco mais fundo e olhar para alguns exemplos de código reais. 14. Contexto - demonstração: em sua pasta Exemplos, Abra a subpasta de contexto e vamos olhar para o contexto. Exemplo básico. Aqui temos dois objetos cheios e bar. Cada um desses objetos tem duas propriedades. Uma propriedade de saudação e uma propriedade grega. Agora com objetos. Quando uma propriedade passa a ser uma função, ela é chamada de método. Então cada um desses objetos tem um método de saudação, então a ganância do ponto de comida ou o método grego de comida retorna este estoque verde. Agora, em um método que essa palavra-chave é muito importante, ele se refere à função o objeto ao qual um método pertence para que essa chave estivesse na linha. Número cinco refere-se a alimentos porque este método saudação pertence a este alimento objeto. Então, mais uma vez, o roteiro do trabalho. Esta palavra-chave dentro de um método refere-se ao objeto ao qual esse método pertence on-line. Número cinco. Isso tem ponto greening resolve para alimentos estão criando on-line número 13. Esta saudação de estoque resolve a leitura de Bardach, então nossas saídas de log cônsul devem ser iguais. Eu estou cheio e eu sou bar porque lembrando comida, artéria e grau bar. Então vamos ver isso em ação. Se eu abrir o local de contexto do escopo do bloco. Exemplo. Vejo que estou cheio e estou no bar, e é exatamente o que esperamos. Agora há algo que podemos fazer que pode tornar isso um pouco mais claro dentro do método de saudação Barda. Vou colocar um conselho dura-declarações. Eu vou dizer conselho durante isso, eu vou apenas inspecionar isso para que pudéssemos apenas obter um talvez um pouco mais profundo do que isso significa on-line número 13. Então agora sempre que executamos o código, eu vejo este objeto no meu console e eu poderia ver que ele tem duas propriedades fluir, que é uma função e saudação. Eu sou um bar se eu fizer isso. Se eu pegar isso e movê-lo para dentro da comida, comida é gananciosa, gananciosa. Eu não volto a executar? Este código agora é objeto. Você pode ver que tem um método grego e uma saudação. Eu sou comida. Então, a coisa a lembrar sobre o contexto é que ele é o objeto ao qual um método pertence tão dentro de um método. O script Java. Esta palavra-chave pode ser usada para fazer referência ao objeto ao qual esse método pertence aqui, dentro da comida, que esta palavra-chave faz referência aqui dentro da barra que esta palavra-chave faz referência lá. Então, este estoque de saudação resolve para Bardot saudação e este estoque de saudação on-line. Cinco Resolves para a comida são saudações. 15. Quando se "se "feel" a mesma - discussão: às vezes o contexto de escopo pode parecer a mesma coisa. Então você pode se perguntar, contexto Everth é a mesma coisa? E a resposta é não. Exceto que há momentos em que o contexto de escopo pode parecer a mesma coisa. Vamos falar sobre Global implícita e Global implícita é algo que acontece quando você omite a palavra-chave VAR. Então, por exemplo, no lado esquerdo eu estou criando essa função comida fria, e eu crio uma variável de velocidade dizendo, var velocidade é igual a cinco. Então, quando eu faço essa velocidade está no âmbito privado da função alimentar. Velocidade agora é uma variável privada à direita. Estou a criar a função alimentar outra vez, mas só estou a dizer que a velocidade é igual a cinco. Eu omiti bem a palavra-chave VAR, omitindo o var. A velocidade da palavra-chave agora é uma variável global porque nossa palavra-chave foi omitida. Na verdade, velocidade não é apenas uma variável global, é o que é chamado de global implícito. Estamos implicitamente criando uma variável global, omitindo a palavra-chave var. Além dessa velocidade agora é propriedade do objeto de janela. Isso é certo. Quando você cria uma variável global implícita ou explicitamente, você cria uma propriedade no objeto de janela, portanto, dizendo que velocidade é igual a cinco dentro de uma função. Também estou dizendo que a velocidade do ponto da janela é igual a cinco. Ambos realizaram exatamente a mesma coisa. Na verdade, eu também posso economizar nossa velocidade igual a cinco no escopo global, e ele realiza exatamente a mesma coisa. Na verdade, posso até dizer que a velocidade é igual a cinco no escopo global e isso faz exatamente a mesma coisa. Então, é super importante saber que o que estamos fazendo à direita dizendo velocidade é igual cinco Quando omitimos a palavra-chave var que estamos fazendo, duas coisas estavam criando um global implícito. Estamos criando uma velocidade fria variável global, e também estamos criando uma propriedade no objeto window chamado speed porque qualquer variável global também se torna uma propriedade fora do objeto window. E este é um exemplo de um. Âmbito e contexto começam a parecer a mesma coisa porque estamos criando variáveis desse escopo. Mas estamos trabalhando com um objeto ou dando propriedades a um objeto. E se nós maneira iria criar uma função ou método chamado janela obter velocidade, poderíamos dizer retornar esta velocidade ponto e ele iria funcionar. Então ele está entrando nessa área difusa onde o contexto de escopo não será a mesma coisa às vezes pode parecer a mesma coisa, e é importante entender que eles não são. Mas estamos entrando em uma área cinza, cinza onde parece um pouco confuso. Agora. Se eu fosse colocar a palavra-chave VAR de volta nesta função e salvar nossa velocidade é igual a cinco velocidade agora está de volta no escopo privado da função completa novamente. E é. Não há mais uma variável global chamada speed e Speed não é mais uma propriedade do objeto window. Agora vamos falar sobre o JavaScript, essa palavra-chave dentro de funções globais. aviso de isenção de responsabilidade para os próximos minutos. Estamos falando de JavaScript no navegador. Há outro contexto, como Node, mas por enquanto, estamos apenas falando de JavaScript como ele é executado no navegador. E também há algo chamado modo estrito, que poderia mudar drasticamente a conversa que estamos sobre o dedo do pé tem então apenas estar ciente disso , Hum definitivamente vai aprender mais sobre o modo estrito em alguns minutos. Nós olhamos para os exemplos de código, mas apenas para o próximo minuto de tentar esquecer o modo estrito e apenas tenha em mente que estamos falando de empregos. Comece a correr no navegador. Ok. Fim da isenção de responsabilidade. Agora, isto dentro da função global. Portanto, dentro de uma função global, o javascript da palavra-chave this é igual ao objeto window. Então, no lado direito, um criou essa função chamada comida, e eu referenciei isso. E quando eu mencionei isso, eu estou realmente referenciando janela dentro de uma função global. O JavaScript. Esta palavra-chave sempre fará referência ao objeto window. Então, se eu disser essa velocidade de ponto, é como dizer velocidade de ponto de janela. Se eu disser que essa velocidade de partida é igual a cinco, estou realmente dizendo que a velocidade de ponto da janela é igual a cinco. E não só isso, também estou criando uma variável global porque dizer que sem dúvida a velocidade é igual a cinco é como dizer no escopo global da nossa velocidade é igual a cinco ou a velocidade igual a cinco. Esta é uma daquelas situações em que as linhas entre escopo e contexto ficam um pouco desfocadas e podem ser confusas. Eles não são exatamente a mesma coisa, mas eles se aproximam muito nesta situação. Então, basta ter em mente que em uma função declarada globalmente ou função definida, o JavaScript, esta palavra-chave faz referência ao objeto janela, e você está essencialmente também criando. Quando você adiciona uma propriedade ao objeto window, você está criando uma variável global. Eu acho que isso vai fazer um pouco mais de sentido quando olharmos para alguns exemplos de código, então vamos olhar para algum código. 16. Quando "se sentar" do mesmo - Código - parte 1: na pasta Exemplos, Abra a subpasta intitulada Escopo e Contexto parecem iguais. E vamos olhar para o primeiro arquivo de exemplo. Copie este exemplo Um código que é nomeado cria uma variável de velocidade e mostra no console. Copie esse código e cole-o em seus trabalhos. Bom conselho. E vemos que a saída que obtemos é 100. Certo, vamos dar a volta. Então, neste exemplo, estamos criando uma variável privada, velocidade fria dentro deste alimento função sem colocar no console e apenas executar alimentos. Vemos 100. Então não há nada de especial lá. Mas apenas Teoh estabeleceu que queremos usar a palavra-chave var para criar uma variável privada . E já conversamos sobre isso várias vezes nesta aula. Então, quando você vai para baixo para o exemplo, ser aquele que é ah, que diz o que acontece se você esquecer a palavra-chave var aqui online? 15. Eu esqueço a palavra-chave var I na linha quatro de var usado, mas on-line 15 Eu apenas omiti-lo, Então eu estou dizendo velocidade é igual a 100 Eu velocidade de saída e executar alimentos. Então, Então, o que acontece se esquecermos a palavra-chave da barra, mas vou copiar este código, e vou colar isto na primeira página grátis dos consoles e recebo 100 de novo. Então ainda temos 100. Sabemos que criamos a variável. Nós produzimos, mas acho que algo diferente acontece aqui. Bem, algo aconteceu aqui. Há algo que acontece com essa variável de velocidade. O que acontece é que a variável de velocidade se torna o que é chamado de global implícita e implícita é uma variável em JavaScript baseado no navegador, onde quando você omite nossa palavra-chave essa variável se torna uma propriedade fora do objeto de janela, ela torna-se uma variável global. E lembre-se, é realmente uma informação super importante é que uma variável global é uma propriedade dos objetos da janela. Então, se eu digitar velocidade no meu console, vejo 100. Na verdade, se eu digitar janela tem velocidade, eu fico com 100. Na verdade, se eu digitar janela e inspecionar o objeto da janela e eu rolar todo o caminho para baixo e eu olhar, eu poderia ver que há uma velocidade corretamente aqui. Então o ponto aqui é que quando você omite a palavra-chave var, você cria o que é chamado de global implícito. Torna-se uma variável global, e você fez isso implicitamente. Criar um gráfico AMP implícito Global é realmente a mesma coisa que declarar o móvel a variável global. Então as Linhas 14 e 17 são exatamente as mesmas. Eles fazem exatamente a mesma coisa. Ambos criam um global muito bem. A única diferença está online. 14. Estou fazendo isso explicitamente. Estou dizendo que a velocidade var é igual a 100 Eu estou fazendo isso no escopo global estava on-line 17. Eu estou fazendo isso implicitamente, e eu estou dizendo, bem, velocidade, foi 100. E porque eu estou em uma função a omissão das palavras-chave var diz, Oh, vai ser um global. Mas a outra coisa que aconteceu foi que descobrimos alguns segundos atrás é que a criação e uma variável global também cria uma propriedade do objeto de janela com o mesmo nome, então as linhas 14 e 15 são exatamente as mesmas. Eles realizam exatamente a mesma coisa. Var velocidade é igual a 100 janela ponto velocidade ah é igual a 100. Ambos criam uma variável global que também é uma propriedade dos objetos da janela. Então esta não é uma situação em que o escopo e o contexto quase se fundiram. Eles se sentem como a mesma coisa, e de certa forma você pode quase pensar neles como a mesma coisa. Depende de como você quer debater isso, mas é realmente o tipo de encontro, e eles certamente sentem o mesmo porque nós temos uma variável global foi sem dúvida sobre isso. Mas isso muito bem se torna uma propriedade do objeto da janela. E você também pode dizer que isso é exatamente a mesma coisa. A linha 16 faz exatamente a mesma coisa que as linhas 14 ou 15 porque ao deixar de fora a palavra-chave distante em 16 estou criando um global implícito. Só estou fazendo isso no espaço global. Então todas essas três coisas realizaram exatamente a mesma coisa. Eles criam uma variável global, e essa variável global se torna a propriedade do objeto de janela em uma peça incrivelmente importante para a informação ter em mente, porque quando você está trabalhando com JavaScript baseado em navegador, o objeto de janela é um objeto muito importante. Variáveis globais são um conceito importante para estar ciente de sua geralmente ruim. Há muitas, hum, definitivamente há muitas propriedades problemáticas do objeto janela, mas criar variáveis globais intencionalmente é algo que você deseja evitar. Mas é importante entender que quando você omite a palavra-chave var dentro de uma função, você cria o que é chamado de global implícito. É uma variável global, você está fazendo isso implicitamente, e essa variável também se torna uma propriedade do objeto window. Qualquer variável global também é uma propriedade do objeto window. 17. Quando "se sentar" do mesmo - Código - parte 2: Agora vejamos o exemplo. Vê aquele que diz: “ O que é isto? Então eu tenho este alimento função novamente. E dentro da comida, eu crio uma variável. Então isso é bom. Estou usando a palavra-chave var novamente, o que eu acho que é melhor. Então eu estou criando uma variável privada dentro da comida. Então a velocidade é particular para esta função, e eu alertar esta velocidade Stott, ok? E então eu executo comida, então devemos receber um alerta. Mas a questão é, qual será o valor que vemos no alerta? Essa é a pergunta. Então, vamos tentar. É copiar este código e ir para o script de trabalho. Cônsul, acelere esse casaco. E quando você executa o código, vemos indefinido para os alertas. Esta velocidade de ponto é indefinida. Certo, vamos ver se conseguimos descobrir o que está acontecendo. Bem, mais uma vez, temos essa velocidade variável privada e alertamos essa velocidade de partida. Bem, quando eu vejo algo, isso é algo que eu penso, objeto dot propriedade. Então essa velocidade de ponto não é a mesma coisa que velocidade porque se ele quisesse velocidade, nós só conseguiríamos velocidade. Mas não temos velocidade, ficamos indefinidos, e não estamos alertando velocidade. Estamos aprendendo essa velocidade. Então, como já falamos sobre muitas vezes em sua classe, esse script de trabalho esta palavra-chave se refere ao objeto ao qual um método pertence. Bem, esta função alimentar não é realmente esta função alimentar não é realmente um método. Ou é? Talvez não seja Vamos copiar este código novamente e vamos executar o código. E então vamos ver o que acontece se escrevermos Foo, hein? Então eu só digitei fu no meu console. Eu entendo parece o código da nossa função. Parece exatamente o mesmo que o código da nossa função. Bem, acontece que, e se eu digitar comida de janela, eu pego o código da nossa função. Então, acontece que Fu é uma propriedade do objeto janela. E a razão é porque estamos declarando alimentos no escopo global aqui estavam no escopo global, não estavam dentro de uma função onde estamos dentro de uma função aqui nas linhas 26 ou 28. Mas a declaração de função real do total on-line 25 está no escopo global. Então, quando criamos uma função global, estamos criando uma variável global. E como discutimos alguns minutos atrás, uma variável global também é uma propriedade dos objetos da janela. Então, neste momento, a comida é uma propriedade do objeto da janela. Ok, então isso significa que a palavra-chave this se refere ao objeto janela. Então, quando eu digo esta velocidade ponto, eu estou pedindo a propriedade speed dos objetos da janela. Então alerta esta velocidade começa será exatamente a mesma coisa que dizer janela de alerta linhas velocidade ponto 28 29 são exatamente a mesma coisa. Exatamente a mesma coisa. Então a situação é que não temos uma propriedade de velocidade na janela Não neste exemplo. O exemplo anterior que fizemos. Mas aqui não temos porque esta velocidade é privada. On-line 26. É uma velocidade privada, mas a velocidade da janela não existe. E se eu fosse vir aqui e dizer águias de velocidade var, digamos 5000. Copie este código e atualize a página e eu vou acelerar esse código. E agora vejo 5000. Como eu vejo 5000 com a razão é porque agora nós criamos uma variável global chamada velocidade. Esta velocidade de ponto é igual a este ponto é velocidade de ponto janela Então janela faz velocidade a velocidade global é 5000. Então, neste caso, obtemos um valor, que é o que é bom. Mas a questão original não envolvia uma variável de velocidade global. Então, neste caso, on-line 28 esta velocidade de início ou velocidade de ponto da janela é indefinida. Nunca definimos uma velocidade de ponto de janela. E isso significa que o alerta no 28 produz indefinido. Não há nenhuma propriedade de velocidade de ponto de janela. 18. Quando "se sentar" do mesmo - Código - parte 3: Agora dê uma olhada. No exemplo D uh, onde ele diz, O que é isso no modo estrito? Então, nesta situação, eu estou fazendo algo seu 36 on-line dizendo uso rigoroso. E isso basicamente diz para o mecanismo JavaScript para a execução desta função, use o modo estrito. E a diferença aqui é que enquanto esta função for executada, nós estaremos em modo estrito para que o comportamento que você verá seja diferente no cônsul. Copie este código. Ele é colado em seu console, e nós temos não pode re velocidade propriedade de indefinido. Então, a velocidade entre a multa. Isso significa que o objeto do qual estamos tentando obter uma propriedade speed é indefinido. Então essa velocidade não é que este ponto Speedos sob achado é que isso é indefinido. E a razão é porque ao usar um JavaScript baseado em humor rigoroso e navegador quando estamos no modo estrito, não podemos acessar o objeto da janela usando isso, um, partir de uma função global, é apenas um dos as características do modo estrito. Então, vou continuar fora do modo estrito. Mas eu só queria salientar que é importante saber que quando você está usando o modo estrito , você não pode acessar o objeto window usando isso dentro de uma função global 19. Quando "se sentar" do mesmo - Código - parte 4: Vejamos o exemplo E. O chamado Food era agora um construtor. Vejamos o exemplo E. Então online 49. Eu tenho a função completa, mas você pode notar que eu usei o F maiúsculo quando eu nomeei Food, não apenas em minúsculas F Oh, mas Capitol Foo. Agora isso não muda essencialmente nada, mas é uma convenção que a maioria dos programadores usa, que você quer capitalizar a primeira letra de uma função quando você quer que ela seja um construtor. E eu quero ser construído porque online 56 eu não estou apenas executando comida. Eu picado está enchendo. Estou dizendo que Barbu é igual a comida nova. E se você já trabalhou com funções construtoras funk de construção em tudo script de trabalho, você sabe que quando você em vez ela comeu um construtor, você faz executado assim fu será executado. Mas é um pouco diferente porque barrar o valor de ser a instância da classe alimentar. comida estava essencialmente agindo como uma classe aqui, e o bar vai ter uma instância da classe. Então, dentro de nosso construtor, eu crio uma variável de velocidade para particular para aquele construtor, e eu alerto essa velocidade de ponto então vamos executar este código em nosso console e vamos ver o que acontece. Então eu alertei, e eu fico indefinido. Por que é isso? Bem, se você voltar para o código, Will, Will, meu primeiro pensamento pode ter sido tão bem, eu crio essa variável de velocidade. Quando estou em Stan, ela está comendo? A execução do produtor de alimentos não deveria ser um exemplo de comida? Será que deveria. Mas o problema é que você pode pensar que a palavra que isso faz referência, hum, a exemplo da comida e ele faz. É comida verdadeira. A barra Isto é igual a barra, que significa que quando você em vez de forma para usar a barra esta palavra-chave dentro das preferências do construtor a instância que está sendo retornada para que isso seja verdade. Mas a velocidade não é uma propriedade do construtor. É uma variável, e essa é uma das áreas onde o contexto de escopo pode parecer a mesma coisa. Mas neste caso, eles não são a mesma coisa. Velocidade é uma variável quando você pensa variáveis, você pensa escopo , mas neste caso, estamos tentando fazer referência A. Estamos tentando referenciar a propriedade speed desta variável, mas desta instância mas a instância não tem uma variável de velocidade. Tem uma velocidade. Não tem uma propriedade speed como uma variável de velocidade. Eso esta velocidade ponto é essencialmente indefinida. Se eu dissesse, um, vamos ver, uh, vamos ver o retorno, hum, velocidade cinco mil. E então eu alertei a velocidade Bardot. Deve funcionar. Então vamos copiar este código e colá-lo e obter 5000. A razão pela qual temos 5000 é porque agora a comida da classe tem uma barra de propriedades propagação acaba com a propriedade de velocidade. Na verdade, se eu fosse fazer ah, um console durante eu vou, Eu apenas digitar barra em um no console. Vejo que recebo um objeto com uma propriedade de velocidade. Então, nesse caso, funcionaria. Agora, a instância da comida tem uma propriedade de velocidade. Outra maneira de fazer isso seria se eu quisesse manter o alerta dentro do construtor. Eu poderia dizer que Food dot pro protótipo Dot velocidade é igual a, digamos, 10.000 só para provar o nosso caso aqui. Vou atualizar a página e espero não dizer não. Veja, lá vai você. Tipo de. Certo, então vamos atualizar a página. E agora eu tenho 10.000 E a razão é porque mesmo que eu não declare uma propriedade speed quando eu crio o construtor, assim que eu crio o construtor, eu crio uma propriedade speed no objeto protótipo. Agora prototipagem é outra vez. Isso é Ah, isso é combustível para uma outra classe. Mas o ponto aqui é que eu estou estendendo o construtor de alimentos aqui com eu estou dando um protótipo estão dando a colocar a propriedade de velocidade em seu objeto protótipo, que significa que quando eu em vez disso ela comeu. Foo Bar terá uma propriedade de velocidade, então esta velocidade de ponto resolve para 10.000. Então, mas a pergunta original não tinha um protótipo, e a razão pela qual ficamos indefinidos é porque esta classe ou construtor tem uma variável de velocidade , mas não uma propriedade speed. 20. Quando "se sentar" do mesmo - Código - parte 5: Agora olhe, por exemplo, se o chamado Food é apenas uma função novamente. Então ah Fu está de volta a ser uma função. Não é um construtor. Eu não mancha. Ela comeu. E on-line 61 Eu alerta velocidade igual a 100 ou eu digo que velocidade é igual a 100. E em seguida, no 63 eu alerto esta velocidade ponto. Então copie esse código e atualize a página e cole esse código no seu navegador e obtemos 100. Então, até agora, em muitos desses exemplos que temos definido. Mas, neste caso, temos 100. E a razão é se você se lembra que ao omitir a palavra-chave var, eu acabo com um global implícito. Então, mais uma vez, omitir a palavra-chave var é praticamente a mesma coisa que fazer isso, que também é exatamente a mesma coisa que fazer isso, que também é exatamente a mesma coisa que fazer essa linha 60 61 62 ou tudo exatamente a mesma coisa . Mas, independentemente Online 63. Ao omitir a palavra-chave var, eu crio um global implícito e criamos uma propriedade no objeto janela chamado speed, que significa que o Online 64. Quando acessarmos essa velocidade, temos seis. Ficamos doentes, recebemos 100 porque estamos basicamente a pedir a janela tem velocidade. Então este é um caso mais uma vez em que a linha entre o escopo do contexto de contato pode se sentir difusa porque estamos criando uma variável aqui na Linha 62. Não há dúvida sobre isso, mas estamos criando um global implícito e implicando global tornar-se propriedades do objeto de janela em JavaScript baseado em navegador. Então é aqui que o seu alcance. Mas, de certa forma, também é contexto porque estamos alcançando a propriedade de um objeto, e podemos acessar isso dentro dessa função, hum, e referenciar o objeto window. 21. Quando "se sentar" do mesmo - Código - parte 6: no escopo no contexto parecem a mesma subpasta. Abrir o contexto de escopo do arquivo parece o mesmo para, como você já viu várias vezes na classe aqui. Estamos iterando todas essas pessoas de vendas, e estamos usando cada método em cada aliado, e estamos criando uma referência para o aliado específico ou item de lista. Então estamos fazendo isso criando uma variável chamada item, e isso é igual a isso. E como sabemos, esse retorno de chamada é executado no contexto do item da lista. Então isso faz sentido usarmos este envoltório com Jake cansado e estamos definindo um item igual . E então estamos dizendo Item, encontrar um botão de seleção e, em seguida, estamos configurando o clique de um alerta para manipulador de eventos clique para esse botão de seleção. Então, se você olhar para o próximo arquivo, escopo e contexto parecem os mesmos. Três. Estamos realizando a mesma coisa que estamos fazendo de forma diferente. Onde obter um porão deste segundo argumento que é passado para a função de retorno chamada Dom Element, e nós estamos embrulhando com Jake item de fornecimento cansado é igual a Dom Element Rapid Jake cansado. Então vamos dar uma olhada no que Dom Element realmente é. Então, de volta em qualquer página da Web. Execute o exemplo. Âmbito bem, fotografando ao definir o contexto, sentir o mesmo. Três. Ok, então eu tenho um monte de saídas de console, e há quase a mesma coisa. Mas você pode ver sua pessoa de vendas aliada zero ls pessoa de vendas. Um também é pessoa para e assim por diante. Então o que está acontecendo é que em cada um desses casos estavam colocando um elemento dom. Então, o ponto aqui é que este elemento dom que você vê no console representa cada um dos itens da lista em cada um dos vendedores elementos Dom, embora iterando sobre. Então esta chamada volta quando você chama cada mensagem. O retorno de chamada recebe dois argumentos. Primeiro argumento é índice, que é o índice numérico do elemento, eo segundo argumento é o próprio elemento. Então, neste caso, é meio que ele sente que é uma espécie de onde o contexto de escopo se sente como a mesma coisa em que estamos criando uma variável. Mas o que estamos definindo a variável para é o elemento dom atual sobre o qual estavam iterando , que realmente é mais uma coisa de contexto porque é como quando usamos a palavra isso antes . É o contexto deste método. Fora desta função é o momento dominante que estamos iterando, que são elementos dom. Então esta é uma situação em que é uma espécie de escopo no contexto na mesma linha on-line 10 item é definitivamente uma variável que escopo, mas então nós estamos definindo igual a um objeto, que é o contexto do qual ou contexto em que esta função está sendo executado. Agora, se você olhar para o escopo do arquivo no contexto dos mesmos quatro, estamos fazendo algo um pouco diferente aqui embaixo. Se você olhar, vamos olhar para trás para três novamente e ver como nós, uh, executamos uh, o método de alternância de classe. Nós dissemos pessoa de vendas sublinhado Plus índice irá indexar uma variável, então estamos usando escopo aqui para obter um porão do elemento atual. Então, a pessoa de vendas zero diz que a pessoa quer essa pessoa assim por diante. Um, mas no exemplo, número quatro estamos apenas dizendo que o item estava usando o método do item que usamos aparecer, que também é variável. Mas de certa forma, é como onde o contexto de escopo tipo de ter essa linha difusa porque estamos definindo a variável igual ao contexto em que esta função é executada. Então, de certa forma, estamos usando escopo e contexto aqui ao mesmo tempo. É um item variável é variável, mas esse item com variável item variável é definido para o contexto em que esta função está sendo executada. 22. Tomando melhores decisões - discussão: Um dos principais objetivos deste curso foi ser capaz de tomar melhores decisões sobre nosso código usando nosso conhecimento de escopo e contexto. Então, ao fazer isso, provavelmente há algumas perguntas que podem vir à mente primeiro. Por exemplo, quando devo aproveitar o escopo e quando devo aproveitar o contexto? Bem, antes que você possa realmente responder essas perguntas, precisamos pensar em uma pergunta mais importante, que é? Qual é o problema que você está tentando resolver ao planejar seu código a qualquer momento? Qual é o problema, ou o quê? O que você está tentando alcançar? E provavelmente você vai estar tentando resolver problemas que se relacionam com, Você sabe, o tipo de coisas que aprendemos nesses grandes livros que lemos anti padrões, coisas como código repetitivo ou valores codificados ou funções inchadas. Estes são apenas exemplos dos tipos de problemas que não queremos encontrar conforme você planeja e nosso código. Então, a qualquer momento, uma vez que você esteja claro sobre isso, o problema que você está tentando resolver, então você pode continuar respondendo a esta pergunta, que é qual é a ferramenta certa para este trabalho. E, claro, existem muitos tipos diferentes de ferramentas. Há ferramentas para cada trabalho, mas você precisa descobrir qual é a ferramenta certa para o trabalho que você tem em mãos. E uma vez que você tenha escolhido a ferramenta certa, então você pode começar a planejar seu código. E decidir não deve alavancar o escopo. Eu deveria Leverett contexto para este problema em particular. Então vamos nos dar um passo adiante e realmente olhar para alguns exemplos de código para, ah, realmente tipo de entender o que isso significa. 23. Tomando melhores decisões - demonstração: na pasta Exemplos. Abra a subpasta de planejamento e vamos dar uma olhada no exemplo de planejamento um. Então você tem algum código que deve parecer familiar para você. Hum, iterando sobre o pessoal de vendas, e eu configurei um monte de manipuladores de eventos cliques. Você vai notar. Estou dizendo que tenho um casaco repetido. Então vamos fazer uma pesquisa para o código que eu estou dizendo é repetido para estas duas instâncias dele. Então, há dois lugares no meu código aqui na linha 27 linha 47 onde eu quero o comprimento de todos esses vendedores selecionados. Então o que isso significa é que, hum, se você for executar o método de exemplo encadeamento, é exatamente onde a maçã, todo o código está funcionando. Então, quando eu, hum, selecionar vendedores quando eu vou aqui e clique no botão excluir selecionado que exclui todos os próprios, todos os vendedores que são selecionados e eu sei disso porque quando eu inspeciono qualquer um dos esses aliados em particular, você pode ver que tem a classe selecionada. Este tem uma classe selecionada, e se eu removesse essa classe, ele não apareceria mais selecionado. Então aqui estava dizendo, Vendedores, Ally selecionou o comprimento de todos esses elementos. Então há dois casos em que eu quero saber o comprimento dos aliados selecionados elementos ou como aliados Maney selecionaram elementos que existem. Mas o problema aqui é que temos código repetido. Estou literalmente digitando entre aspas, vendedores libra, espaço l ponto selecionado duas vezes. E o que acontece se eu mudar o elemento da pessoa de vendas? Vendedores I d Teoh você sabe, vendedores. Tudo o que dizer É que, você sabe, eu vou por alguma razão mudar o nome de que eu d sete. Eu tenho que ir a cada um desses e eu tenho que ir assim, e isso é um negócio confuso. Não queremos fazer coisas assim. É extremamente difícil de administrar. E pode haver dezenas ou centenas de arquivos em nosso código onde isso é ou que o literal I d está configurando. Nós não queremos isso. Então, outra maneira de abordagens seria, também se você olhar para explicar o exemplo para definir um vendedor variável. Então, este vendedor de sinal de dólar variável representa o elemento Dom Dom ao vivo. Este elemento esta variável aqui representa este elemento aqui. A ideia de pessoas de vendas. Então agora temos uma referência a esse elemento. Por isso, não temos de continuar a escrever isto constantemente. E se mudarmos o nome deste “Ah “, na nossa marca até “ah “, você sabe, as pessoas de vendas hífen tudo. Então poderíamos fazer essa mudança aqui uma vez e uma pequena cascata para o nosso código. Então isso está funcionando melhor. Porque agora estamos apenas dizendo que os vendedores de sinais de dólar ponto encontrar l eu selecionei. E a mesma coisa aqui que é um pouco mais eficiente, mas ainda temos alguns códigos repetidos. Ainda estavam literalmente digitando l i ponto selecionado e eu fui selecionado. E se fizermos esses aliados mandarem? Ou se mudarmos a classe selecionada para eu sou selecionado para que s'mais redigitando, hum , eu , hum, selecionado e eu tenho que pegar essa mudança e eu vou fazer isso aqui em baixo, e isso é mais uma vez confuso negócios. Não queremos fazer coisas assim. Então acho que há uma maneira melhor de fazer isso. Se formos para plantar Exemplo 3. Você pode ver que o que fizemos aqui é que temos nosso cifrão. Muito variável de vendedores. E então temos uma função de método chamada get vendespeople length e que retorna o comprimento de todos os vendedores selecionados. Então estamos dizendo que os vendedores de sinal de roubo ponto encontrar estavam usando o método de busca deste objeto passando um aliado. E ah, na verdade, isso está fazendo com que todas as pessoas de vendas não durem. Então, quantas pessoas de vendas há? E então queremos descobrir o número de pessoas de vendas selecionadas que existem. Então estamos dizendo que os vendedores não encontram L. Eu fui selecionado. Então aqui é apenas encontrar l. um comprimento de ponto. Aqui é encontrar l um ponto selecionado comprimento, mas em ambos os casos estavam executando uma função dessa forma. Quando queremos saber o número de pessoas de vendas, basta chamar a função, obter o comprimento dos vendedores, é apenas assim tão simples. E então queremos saber o número de vendedores selecionados atualmente. Nós apenas chamamos a função, obter o comprimento do vendedor selecionado. Fazemos isso duas vezes, e assim, se algo mudar em nosso código, se mudarmos essa ideia para vendedores, não importa. Fazemos essa mudança bem ali, e é isso. Não nos preocupamos com isso. E se pudéssemos mudar os Aliados que têm os vendedores para dibs. Poderíamos fazer essa mudança lá, e não precisamos fazer isso em outro lugar. Ou se nós nomeamos. Se fôssemos nomeados o que. Se nós renomeamos a classe que indica que algo está selecionado para Eu sou selecionado, nós apenas fazer essa mudança aqui e é isso. Todo mundo chamando essa função. Eles não estão se preocupando com isso. Eles estão chamando essa função disfunções, cuidando de como esse conjunto para que você possa re fator o dia todo. E nós poderíamos realmente nos livrar de todas essas pequenas regras que estamos usando nosso co porque nós temos um monte delas. E isso é tudo de novo tipo de negócio bagunçado porque isso são as cordas de ar que temos que mudar minha mão se alguma dessas definições mudar. Então o ponto principal que estou fazendo aqui é que nós queremos. Agora que entendemos a diferença no escopo no contexto, podemos fazer coisas como criar um escopo variável que podemos usar em todo o nosso código. Ou podemos fazer coisas como criar métodos de alavancagem em objetos, contexto para refatorar um código ou código planejador de uma forma que seja mais inteligente e fácil de gerenciar. 24. Um pouco mais sobre o texto: Vamos falar um pouco mais sobre contexto. Deixei a capa duas coisas primeiro, mudar de contexto e, em seguida, isto contra isto embrulhado com Jake Weary. 25. Como mudar o contexto com .call() e .apply (): Então vamos descobrir o que significa alternar contexto em JavaScript. Anteriormente, aprendemos que o contexto se refere ao objeto ao qual um método pertence, mas às vezes podemos querer fazer um método pensar que pertence a um objeto diferente. Por exemplo, quando o lado esquerdo da tela, eu tenho um objeto segurar alimentos no lado direito da tela. Tenho um objeto chamado Bar. Cada um desses objetos tem uma propriedade de saudação, e cada um desses objetos também tem uma propriedade grega. Agora, mais uma vez e JavaScript quando uma propriedade é uma função, é chamado de método. Então, em cada caso, o método grego retorna esta saudação de estoque. Então, se eu executasse a ganância de pontos de comida, eu teria que eu estou cheio. E se eu fosse para obter executar saudação Bardot, Eu teria que eu sou Bar, e em cada caso, o método grego interage diretamente com a propriedade saudação desse objeto. Cada método de saudação é executado no contexto de seu objeto. Food dot ganância é executado no contexto da comida, e Bardot cumprimentar é executado no contexto de bar Bem, há uma maneira que enfraquecer salto dentro e podemos mudar o contexto de cada método. É chamado de mudança de contexto, para que possamos fazer o método food dot greet. Acho que pertence ao bar e podemos fazer o método de saudação Bardot. Acho que pertence à comida porque você pode ver aqui Alimentos concordam, está agora à direita. Tem aquela caixa azul. E quando executar comida ponto ganância, eu tenho que pedir emprestado um. Executar a ganância de Bardot. Entendo que sou comida. Isso pode parecer um pouco confuso, um pouco estranho, então vamos entrar em algum código e podemos ver como isso realmente funciona. Na pasta Exemplos. Abra o contexto da pasta e, em seguida, abra o carvão de contexto de arquivo e aplique a eu tenho dois objetos aqui, full e bar, e ambos os objetos têm uma propriedade de saudação, e ambos os objetos têm um método de saudação em ambos os casos que retornou o valor dessa propriedade de saudação de objetos. Então, se eu executar comida dot grego, eu deveria obter eu sou comida. E se eu executasse o Grego Bardot, eu deveria ficar com o bar. Vamos nos certificar que isso funciona como esperamos. Então copie os dois objetos. Payson, você console JavaScript e agora eu vou executar comida ponto verde e eu tenho que eu sou comida. E se eu executar, executar a ganância de Bardot, eu entendo que eu sou barras. É o que esperamos que aconteça aqui na Linha 17. Copie este código e execute isso em seu console JavaScript. Então algo muito estranho aconteceu aqui. Eu executei comida, Doc Greet e eu sou Bar, o que realmente não faz sentido, mas tem um pouco mais acontecendo aqui, eu disse. Barra de chamada de grau de comida. O que está acontecendo é que estou usando o método de chamada para mudar o contexto do médico alimentar. Óptimo método. Então os impostos sobre o pecado. É objeto ponto método ponto chamar novo contexto. Então chamada Dockery comida, mas fazê-lo na saída no contexto de bar. E se eu dissesse que o bar Dockery ponto chamar, uh, comida eu teria. Eu sou comida. Estou a executar o Grego Bardot, mas estou a comer porque estou a dizer que o Bardot concorda. Chamada no contexto de alimentos para que isso aconteça com o método de chamada é você tomar temporariamente um método e movê-lo para o contexto de outro objeto. Não é literalmente o que está acontecendo, mas é efetivamente o que está acontecendo. Então, quando eu digo comida concordou uma barra de chamadas executando este método. Mas eu estou fazendo isso. Acho que pertence a este objeto. E quando digo que o grego Bardot chama foo, estou a executar o diploma de bar, mas estou a fazê-lo. Acho que pertence à comida só por enquanto. Então, se você copiar esta linha 20 aqui, é na verdade a linha 18. Se eu reabrir este arquivo então linha 18 e eu correr que eu recebo a mesma coisa. Se eu executar food dot greet, aplicar e bar eu recebo que eu sou bar porque eu mudei o contexto da comida. Concordo em barrar agora a chamada e aplicar método fazer exatamente a mesma coisa. A única diferença é passar argumentos. Digamos que o acordo alimentar que esperava argumentos A e B e eu quero passar aqueles Bem, se eu quisesse fazer isso com chamada, eu passaria os argumentos em uma lista separada por vírgulas. E se eu quisesse fazer isso com aplicar, passei os argumentos como uma matriz. Então, com a comida concordou uma chamada. Passo-lhe o contexto do novo contacto. Nós apenas bar vírgula e, em seguida, todos os meus argumentos e com comida concordou que se aplicam. Eu passo barra e, em seguida, uma matriz de quaisquer argumentos. Mas em ambos os casos, os métodos de chamada e aplicação permitem que você alterne o contexto em que um método é executado. 26. de método - discussão: Então, em JavaScript é um conceito chamado método encadeamento. Na verdade, não é específico o script Java. Você vai descobrir que este padrão em vários idiomas, mas é algo que é muito bom de se estar ciente, e também pode ajudá-lo a escrever um código que é um pouco mais expressivo. Então, no lado esquerdo da página, eu tenho este objeto chamado APP, e este objeto APP tem três métodos e ele iniciar e configurar. Nós realmente não nos importamos com o que eles fazem. Vamos fingir que fazem algo mágico e incrível. Mas o principal é que temos um objeto com três métodos, e no lado direito da página, eu executar esses métodos dizendo app dot nele app dot start e app dot set up. Então tudo isso faz todo o sentido. Parece um caminho muito bom e sólido de morrer. Mas e se, além do funk do, esses métodos fazendo o que quer que eles façam? E se todos eles retornassem um valor muito específico? E se todos devolveram isto? Bem, sabemos que em JavaScript a ação esta palavra-chave refere-se ao objeto ao qual um método pertence Então, em cada um desses casos em retornar APP, método de unidade retorna aplicativo, o método de início retorna AP e um conjunto de retorna o aplicativo. Isso significa que no lado direito posso mudar a forma como escrevo o meu código. Eu poderia fazer algo assim onde eu digo aplicativo ponto nele ponto início ponto configurar. E a razão que funciona é porque cada vez que eu executar um desses métodos, ele está retornando aplicativo que me permite executar diretamente outro método nesse objeto. Então, quando eu digo apt fora nele, que retorna diretamente para fora, o que me permite dizer dot start e então o método start retorna aplicativo que me permite dizer dot set up Então outra maneira de olhar para isso seria Pense sobre a conexão direta entre este e o aplicativo. Você sabe, no método de unidade, eu estou devolvendo isso, o que significa que eu estou retornando aplicativo que me permite chamar diretamente o método de início. E então quando eu chamei um método de início, eu estou devolvendo isso, que me permite chamar o método de configuração, e isso me permite que eu poderia até mesmo Shane outro método aqui e criou um método de comida fria e, em seguida, Um bar ético e eu sou o Topázio ético e eu poderia mudar o dia todo. Mas esse padrão, se você olhar para o código à direita, parece um pouco diferente do que dizer apt out, não é? App dot start app que configurar o código talvez um pouco mais expressivo. E se você for realmente criativo, você pode escrever código que talvez seja mais fácil de gerenciar. Então, se não for obrigatório, que você faça o treinamento de método. É simplesmente um padrão que é bom estar ciente, e pode ser muito útil um momento. Então vamos ver se podemos obter uma melhor compreensão do método encadeamento se realmente olharmos alguns exemplos de código. 27. de método - demonstração: na pasta Exemplos, Abra a subpasta de contexto e olhar para o arquivo chamado Encadeamento de método. Agora aqui eu tenho todo o aplicativo, mas eu mudei o código drasticamente. Hum, onde é mais cedo? Acabamos de ter um tipo de Jaco Rico definido de uma forma mais processual. Aqui eu criei um objeto chamado APP e, em seguida, criaram diferentes métodos chamados nele e Start e Dom configurar e etcetera. Então o código é muito mais orientado a objetos. É um pouco mais limpo, fácil de ler usuário para gerenciar, mas eu fiz algo aqui em baixo que é um padrão que eu quero apenas discutir. Por alguns minutos. Estou fazendo algo chamado Treinamento de Método, então estou chamando o método de configuração Dom. O bind, método do manipulador de eventos de página Recarregar, o bind, o método de manipulador de eventos selecionado lead e o método de evento de compra de itens de usuário Taylor. Mas em cada caso, eu não estou dizendo aplicativo ponto esse método como você esperaria. Eu só estou dizendo aplicativo dot app dot dom configurar ponto comprando recarregável blah dot bond Beliable, uh dot Bind. Então eu estou chamando aplicativo, mas então eu estou apenas chamando métodos diferentes no aplicativo. Então, como é que eu posso pular usando aplicativo dot app dot apt para fora toda vez? Bem, vamos dar uma olhada em cada um desses métodos. Vejamos o método de configuração do dom aqui. Então Dom configurar tem uma linha interessante. Ele faz um monte de coisas que nós não estamos realmente preocupados agora, mas ele retorna isso E se nós nos lembramos, o que é o script Java? Esta palavra-chave refere-se ao objeto ao qual um método pertence e o método de configuração Dom pertence ao aplicativo. Objetos deste método retorna este ou retorna aplicativo. Então, quando eu executar este código aqui em Londres 21 aqui eu acabar com o aplicativo para que eu pudesse apenas virar e chamar o método manipulador de eventos binds Recarregar página. E, em seguida, quando esse método executa a compra reload manipulador de eventos de página, eu retornei isso. Então, desde a execução dessa função retorna aplicativo, eu posso virar e chamado de compra excluir manipulador de eventos selecionados e assim por diante. Então, se cada método retorna o objeto do aplicativo, isso significa que eu posso virar e chamar outro método nesse objeto. Isso é chamado de encadeamento método e ele não efetivamente altera seu código em termos do que seu casaco faz. Mas permite que você escreva código que pode ser mais fácil de ler e um pouco mais expressivo . Porque se eu alguém escreveu este código e eu herdei, a primeira coisa que eu iria Seeiso isso no método tem um número deste aplicativo. Object tem uma série de métodos e eu estou chamando todos eles aqui. E todos esses métodos retornaram o objeto do aplicativo, isso é certo. Não há dúvida em minha mente, porque eu sei que você não poderia fazer isso. Você não poderia método Shane assim se esses métodos não retornassem o aplicativo, objeto e método encadeamento é realmente fácil. É só que você só precisa retornar o objeto ao qual esse método pertence de cada um dos métodos permitindo que você encadear métodos fora de uma única referência a um objeto 28. "isso" de x de: Vamos deter um momento para discutir a diferença entre isso versus isso Embrulhado com Jay Query. Agora, se você não tem interesse em Jake onde você poderia se sentir livre para pular esta palestra, Mas eu acho que a maioria dos desenvolvedores Front e Web Eu trabalhei com J Query até certo ponto e provavelmente trabalhar com em uma base regular. Definitivamente vale a pena tomar um minuto para discutir a diferença entre esses dois Rios sentados e alguns dos problemas que você pode encontrar em sua pasta Exemplos. Abra a subpasta Contexto e, em seguida, abra o arquivo de contexto este versus este. Então aqui estou iterando sobre cada uma das pessoas de vendas don elementos ou os itens de lista em uma nova geração de cada método. Estou criando um manipulador de eventos de clique e no clique de um manipulador, estou dizendo que este ponto esconde. Então vamos primeiro executar o código e ver o que conseguimos. Então vá para mostrar exemplos e contexto. Esta pressa é esta. Então agora eu rodei o código e clique no botão de seleção e eu recebo um erro este ponto Ocultar não é uma função. Certo, qual é o problema? Vamos ver se conseguimos descobrir. Então a primeira coisa que quero fazer é desativar ou comentar o número cinco. Já que isso está lançando um erro, não vai nos ajudar. E, em seguida, eu vou colar em instruções dir console. A 1ª é que estou inspecionando o roteiro do trabalho. Esta palavra-chave no 2º 1 é que estou esperando o script de trabalho, esta palavra-chave embrulhada com Jay Query. Então vamos salvar esse arquivo e, em seguida, vamos apenas atualizar a página e clicar no botão de seleção, e eu acho que você consola suas declarações. Vejamos o 1º 1 O 1º 1 é um elemento dom. É um elemento dom JavaScript raw, e o 2º 1 é um elemento dom embrulhado com Jake cansado. A diferença é que o 2º 1 é o 1º embrulhado com Jake Weary Hope que faz sentido. Mas para o 1º 1, vamos rolar um pouco para baixo e podemos ver que há uma propriedade de estilo , e essa propriedade de estilo tem uma propriedade de exibição em exibição. Está cantando, ajustado para uma corda vazia. Ok, então vamos falar sobre isso em um segundo. Então a resposta curta é que este é o elemento Dom bruto que está sendo iterado atualmente sobre que foi neste caso foi clicado. Onde está isso representa aquele elemento Dom embrulhado com Jake Weary. Então, é como pegar a si mesmo e se colocar em um casaco. Ainda és tu, mas estás embrulhado com um casaco. Hum, então vamos olhar para o, hum se você olhar para o arquivo, entrar em contato com isso contra isso para o que eu vou fazer é dizer que este ponto estilo que mostra é igual nenhum. Então, se você executar o contexto isso versus isso para e, em seguida, clique no botão de seleção, você pode ver o botão desaparece. E se eu clicar em outros botões, eles simplesmente desaparecem. Por que é isso? Bem, se você se lembra que fizemos o diretório de ponto cônsul isso Nós vimos que este trabalho vai palavra-chave, que é um elemento Dom, tem uma propriedade style e uma propriedade style tem uma propriedade display, e nós estamos apenas definindo como freiras. O ponto que estou fazendo aqui é apenas para ilustrar que o JavaScript esta palavra-chave dentro deste manipulador de eventos clique é apenas um elemento dom raw. Não tem nada a ver com Jay Query. Se entrarmos em contato com isso contra esses três, algo um pouco diferente, é que estamos dizendo que isso está embrulhado com Jake. exibição de pontos cansados é igual a freiras. Vamos ver como isso funciona. Então, se formos mostrar exemplos de código contexto, isso versus é três e, em seguida, clicamos no botão de seleção. Recebemos um erro não é possível definir a exibição da propriedade de indefinido. E isso porque esse rapper Jay Query não tem uma propriedade de estilo. Lembre-se, é o JavaScript, esta palavra-chave ou é o elemento dom bruto, mas é embrulhado com J. Crew, por isso tem propriedades e métodos diferentes. Se você abrir o contexto, isso contra quatro. A diferença é que agora estamos vendo este ponto alto. Então, se você executar contexto, este Versace é quatro e, em seguida, selecione o botão. Desaparece e não há erro. E isso é porque Jake Weary ou este rápido Jake Weary, tem um método de esconder. Então, a principal coisa a ter em mente é que o JavaScript, essa palavra-chave por si só, inclinada dentro de um manipulador de eventos de clique é apenas o elemento raw, uh, dom javascript. E tem um certo conjunto de propriedades e métodos. Onde está esta jangada com Jay Query? Isso é um objeto de consulta J e é basicamente tomar este objeto e envolvê-lo dentro de J Query, que lhe dá diferentes propriedades e métodos. Então você pode estar pensando, bem, eu uso uma consulta e uso esse rapper Jay Query, e está tudo bem. Bem, há algumas situações em que Jake, vamos devolver isso. E você acha que vai ser esse rap com Jake cansado como quando você está criando um plugue J Coury . Há alguns cenários complicados, então 99,9% do tempo, você estará lidando com esse rascunho com Jay Query, e tudo bem. Mas duas coisas. Um. É muito bom entender a diferença e para isso vai surgir. Haverá um momento em que você acha que está recebendo o seu e você está recebendo o outro ou você quer converter um para o outro, e tudo bem. Mas você só pode ir por esse caminho se você realmente entender o dente. A diferença entre essas duas coisas 29. Um pouco mais sobre a solução de problemas: anteriormente, discutimos a importância de compreender um escopo e contexto de rotina diferentes no que diz respeito à solução de problemas. Então, agora que temos uma compreensão realmente sólida da diferença entre os dois, vamos aplicar esse conhecimento e alguns exemplos de código e ver como ele pode nos ajudar a resolver problemas . 30. Solução de problemas de um problema de espaço: na pasta Exemplos. Abra a subpasta de solução de problemas e vejamos um exemplo de solução de problemas. Então aqui eu vou reiterar sobre todas essas pessoas de vendas listam itens, e eu estou fazendo isso em uma espécie de uma maneira antiga e que eu estou criando uma variável de olho e estabelecendo uma referência para a venda. Os itens de lista na lista de elementos dom vendedores usando o documento um seletor de consulta todos. Não é particularmente extravagante, mas há uma razão para eu estar fazendo assim. Então eu criei um loop de quatro, que é novamente apenas uma maneira muito antiga de iterar algo. E dentro desse loop de quatro, estou procurando a referência do criador para o vendedor. Então eu digo var item é igual aos olhos da pessoa de vendas. Então, primeiro vai ser a pessoa de vendas zero pessoa de vendas, uma pessoa de vendas para e assim por diante. E então eu estou dizendo item, encontrar que esses botões de seleção vai encontrar um botão de seleção para esse item. E então eu configurou um manipulador de eventos de clique para esse item. Então, no final do usuário clica que botão de seleção, Eu vou usar essa variável Ah, fina como variável item para encontrar o botão de seleção e mostrá-lo Eu vou primeiro esconder o botão de seleção mostrou um botão de antipatia. Alterna uma classe selecionada. Então vamos ver como nos saímos aqui. Eu vou mostrar exemplos e ir para o exemplo de solução de problemas Número um. OK, então rode esse código. E então eu cliquei na primeira peça. Primeiro botão de seleção. Então o diesel é deleta como o botão mostra o selecionado o botão de seleção, e eu cliquei um de distância. Mas eu não estou vendo o botão de seleção para cada item da lista, e ele não está alternando. A classe selecionada do lado esquerdo não está ficando verde como eu esperava, então se diminuirmos um pouco, eu quero mostrar algo realmente estranho. Isso está acontecendo aqui. Como eu poderia assistir o que acontece, eu clicar em cada botão de seleção. O último item da lista está alternando. Está ficando verde e o verde não verde, e eles não são verdes. Então, por alguma razão, cada vez que clicamos em um botão de seleção e tendo alguns problemas, e o problema principal é que não estamos vendo o botão de seleção para esse item, e o último elemento na lista é alternar, que não é o que queremos. Queremos que o eu sou que estamos clicando para ser Tongling. Então está dormindo. Descobrir o problema. Bem, a primeira pergunta que precisamos fazer a si mesmo é, isso é um problema de escopo ou um problema de contexto? Sempre a pergunta mais importante. Então eu estou pensando sobre as coisas, e eu estou pensando, bem, a coisa estranha que estava acontecendo foi o último elemento na lista era criança, mas nenhum dos outros estava, e eu estou iterando sobre uma lista Estou usando uma variável que conta. Eu comecei zero e vai até o valor das pessoas de vendas que comprimento ou diz-lhe sem comprimento menos um. Então eu estou pensando que bem, se o último se eu for incremental e somente o último elemento estiver alternando, então talvez haja um problema com eu e eu, hum, é variável, isso é para Claro. Então, quando eu penso em variáveis, eu penso em escopo. Então, por que não fazemos isso? Uh, vamos colocar um console. , Declaração do conselho, manipulador de eventos do Insider Click estava saindo. Coloque o valor de I. Então eu estou pensando que em cada clique, eu deveria mostrá-lo se eu clicar no primeiro elemento da lista eu deveria ver você sabe que eu é igual zero. Se eu clicar na segunda agência Element I é igual a um Se eu clicar no nono elemento em U C, I é igual a nove e assim por diante porque este manipulador de eventos rápido está fazendo referência, Você sabe, eu criamos este objeto de item fazendo referência aos vendedores I Então nós definitivamente precisa saber que estamos recebendo o valor correto de I para cada clique. Então, vamos atualizar a página e ver como nos saímos. Então eu vou começar a clicar e quando eu clicar em cada put e eu notei que ele apenas diz que eu é igual a 10 Toda vez que eu igual a 10 eu estou pensando que eu devo dizer que eu igual a zero. Eu é igual a um. Eu igual a dois é igual a três. Mas eu sou igual a 10. E ele meio que se alinha com o que estamos vendo, que é o último item na lista está alternando e não o item estava clicando com o último item na lista. Então eu estou pensando que eu não é o que nós pensamos que ele iss e acontece que isso é correto, porque o que acontece é que mesmo onde nós estamos iterando sobre, eu vou de 0 a 9. O problema é que este manipulador de eventos clique pode acontecer. Você sabe, a adoração acontece em, você sabe, microssegundos mas milissegundos, mas o clique de aprimorar o usuário pode clicar no botão em um minuto, 10 minutos ou 10 horas. Mas esse dedo de referência eu não olhos não descontado com cada geração desta lista. Todos eles disparam, e quando você começa a clicar nos botões, eu tenho 10 anos. Então precisamos de uma maneira de proteger I ou criar uma versão com escopo de I. Então, se voltarmos para a página e executarmos o exemplo de solução de problemas Número 2 e começarmos a clicar , acho que você notará que tudo funciona exatamente como esperado. Se você clicar em um elemento, o botão de seleção mostra e tacos verde e o último elemento só se comporta dessa forma se você clicar nele. Então estamos recebendo o comportamento que esperávamos. A questão é por quê? Bem, a razão que isso aconteceu é porque se você olhar para o exemplo de solução de problemas para o que fizemos foi usar uma expressão de função chamada imediata ou uma função imediata aqui, e nós obtemos este item, nós passá-lo na função e, em seguida, temos o nosso código. Então, basicamente, nosso código obtém uma versão com escopo privado desse item, e isso preserva que quando o elemento o botão de seleção é realmente clicado. Nós temos eu zero eu um eu dois ou três agora eu não quero obter realmente muito em funções imediatas e fechamentos, porque isso é definitivamente coisas que nós poderíamos ter uma classe inteira sobre. Mas o que estou dizendo aqui é que nos perguntamos a nós mesmos. Isso é um problema de escopo ou um problema de contexto? E através de um pouco de lógica, determinamos que era um problema de escopo e que nos permitia pesquisar rapidamente e descobrir onde o problema estava acontecendo e como resolvê-lo, mesmo que não tivéssemos a resposta de como resolver agora, pelo menos descobrindo qual é o problema. Não era um problema de contexto. Era um problema de alcance. E essa é a coisa que é realmente importante neste caso, foi determinar que, para este exemplo, este era um problema de escopo e foi resolvido criando a versão com escopo apropriado de I ou este objeto de item que queríamos passar para nosso manipulador de eventos de clique 31. Como resolver um problema de de texto: abra o exemplo de solução de problemas do arquivo. Três. Então aqui eu criei um objeto chamado App, e este objeto APP tem duas propriedades. O 1º 1 é um método chamado Mostrar Excluir selecionado e que apenas mostra que excluir botão ah selecionado . E o segundo método é chamado de vendedores Ally it aerator. E isso é usado como um er iterado para cada pessoa de vendas aliados. Então aqui em baixo, lembrando cada método sobre os vendedores. A Ally. Então isso acontece 10 vezes, e cada vez que acontece, estamos passando um aplicativo que os vendedores que aeram. Então isso vai ser executado 10 vezes. E quando ele é executado cada uma em cada execução que estamos configurando. Ah, clique no manipulador de eventos para o botão de seleção de itens da lista. Então, vamos executar o exemplo Número três e ver como fazemos isso exemplo de solução de problemas Número três. Ok, então nós rodamos o código e então eu vou selecionar um dos botões e eu recebo um erro. Ok, então vamos dar uma olhada neste tipo de erro er, isso parou. Mostrou que o lead selecionado não é uma função. Bem, qual é a primeira pergunta que queremos fazer a nós mesmos quando solucionarmos problemas? Não perguntaremos a nós mesmos. É um problema de alcance? Ou é um problema de contexto? E eu tenho que dizer que sempre que eu vejo o JavaScript, esta palavra-chave em um erro, eu praticamente sinto como se fosse um sorteio morto. É, é muito improvável. Não é um problema de contexto, porque eu vejo a palavra isso. Então não , pode ser escopo. Mas eu vou para o contexto sobre este aqui porque eu vejo essa palavra-chave Então, hum, até onde começar, eu acho que eu vou apenas copiar este código. E quando eu ir para o nosso código, eu não vou fazer é procurar por aquele pedaço exato do código e ver onde ele nos leva, e ele nos leva para a linha 22. Então eu acho que é aí que o nosso problema está, pelo menos, começando lá. Então, por que não comento essa linha de código, impeço que o problema aconteça, e então o que eu vou fazer é pensar Bem, se o problema é, eles pararam. Mostrar exclusão selecionada. Temos que saber mais sobre isso. O que é isto? On-line 22. Bem, eu vou colocar um “fazer “sujeira de um cônsul aqui, e nós podemos inspecionar isso só para meio que descobrir. É isso realmente o que pensamos que ISS E lembre-se, quando vemos a palavra-chave isso pensamos contexto, assim é o contexto. O que achamos que é online. 22. Então salve isso e vamos voltar e atualizar a página e, em seguida, clique no botão de seleção. E eu vejo algo aqui no console, etc Mas não selecione. Então isso me parece um elemento dom. Quero dizer, eu vejo propriedades como crianças sabe e crianças e lista de classes e, hum, esta propriedade estilo. Então este é um dominó ele. Na verdade, é o elemento que acabou de ser clicado. Então isso significa que eu estou pensando on-line 22 que este contexto é este objeto aplicativo. E eu poderia chamar este dublê de liderança de ombro selecionado. Mas acontece que este 22 on-line realmente resolve para o botão que foi apenas clicado . Este botão aqui e que faz todo o sentido porque este é o manipulador de eventos clique , eo manipulador de eventos click é executado no contexto do momento em que foi clicado. , Então, acontece que isso não é o que presumimos que era. O contexto é diferente do que pensávamos que era. Descobrimos isso fazendo sujeira do conselho, então precisamos consertar isso. Então, vamos dar uma olhada no exemplo de solução de problemas. Número quatro. Primeiro, vamos executá-lo e ver como ele funciona. Então, se você descer o exemplo de solução de problemas, Número quatro executar esse código e nós clicar em selecionar. E em cada caso, quando clicamos no botão de seleção, o botão de seleção desaparece. De select mostra e o elemento que as classes selecionadas alternam. Tudo funciona como esperávamos. Vamos descobrir o porquê. Bem, o que aconteceu no meu número? Ligado na solução de problemas? Exemplo Fours Online 22. Em vez de dizer que este pensamento mostrar excluir selecionado, dissemos APP não deve mostrar excluir selecionado. E a razão que funciona é porque APP é uma variável global em por causa do lexical. Escopo esta função é função de retorno de chamada tem acesso às variáveis definidas fora dela. Ele pode ver fora de si mesmo. Então nós apenas referência aplicativo em vez disso e dizemos aplicativo que mostram excluir selecionado e ele funciona bem. Agora, parte da maneira que resolvemos isso é se você se lembra de um exemplo. Número três. Acabamos de passar um aplicativo de referência que os vendedores que aerador para cada iteração de vendedores aliado. Mas aqui exemplo em antes de uma das coisas que também fizemos é que passamos uma função de retorno de chamada aqui e, em seguida, executamos em que Vendedores iterado. E essa é também uma forma de ajudarmos a resolver o problema. Porque agora aplicativo que vendedores que aerador não está sendo executado no contexto do botão está apenas sendo executado. Então, e que tipo de soa estranho? Não quero me aprofundar muito nisso. Mas o ponto que eu estou fazendo aqui é que nós mudamos o contexto em que o aplicativo que os vendedores, ele aerador está sendo executado. E nós também simplesmente referenciar a variável global aplicativo aparecem Teoh resolver o nosso problema. Agora, se você olhar exemplo em cinco, há outra maneira de fazer isso, que é? Nós estabelecemos uma referência a isso criando uma variável chamada me e aqui na linha 21 nós me referenciamos . Então o que acontece é, mais uma vez, mudamos o contexto no qual o aplicativo que os vendedores que estão sendo executados agora está sendo executado no contexto do aplicativo. Então isso significa que aqui em cima temos referência à variável app um, mas podemos referenciá-lo por isso, por exemplo, de eu era para uma declaração do conselho Durst aparecer nesta linha na linha 17. Podemos ver o que é isso em cada execução de disfunção. Então eu vou para o exemplo de solução de problemas. Número cinco. Executa isso e eu recebo 10 objetos do meu console e cada objeto é idêntico. É o objeto do aplicativo. Ele tem que mostrar excluir método selecionado eo vendedor iterado método. São sempre o mesmo objeto. E a razão pela qual vemos isso é porque quando executamos seu tempo, cada vez que sua função é executada, este 17 on-line resolve para aplicativo. E isso é bom. Nós gostamos disso porque, em seguida, podemos definir uma referência a este que é eu criar variável. E esta função pode ver fora de si mesma por causa do escopo lexical. Então, podemos dizer que me mostrou excluir selecionado. Agora isso é um pouco hacky. E se você descobriu ECC rescript 2015 você pode saber agora que funções de seta gordura essencialmente procurou ajudar a resolver este problema. Então esse é definitivamente um tópico para uma outra aula. Podemos entrar no fogo de funções. Mas, por enquanto, o ponto que estou tentando dizer é que queremos ter problemas para resolver nossos problemas. Caminho procurado. Primeiro determine se é um problema de escopo ou um problema de contexto. E assim que soubermos a resposta a essa pergunta, podemos meio que aprofundar e usar diferentes técnicas para resolver o problema. Mas saber que tipo de problema é realmente faz uma grande diferença em termos de descobrir como você vai descobrir onde o problema começou e como resolvê-lo ? 32. Projeto de classe: Antes de irmos, gostaria de falar sobre o nosso projeto da turma. Este projeto de classe vem em duas partes. A primeira parte é construir dinamicamente a equipe de vendas Acme Travel, e a segunda parte é refatorar o exemplo. Código da página da Web. Vamos falar sobre a primeira parte. Primeiro, construindo o ato. Nós viajamos equipe de vendas dinamicamente. Então agora a página da Web exemplo que você viu para a última hora ou assim é tem HTML para a equipe de vendas de viagens Acme que HTML é codificado duro índice teatral dot html Arquivo tem sempre mercado que você vê no lado esquerdo, e que é renderizada no U I quando a página é carregada. Não estou muito entusiasmado com essa abordagem porque se quiséssemos fazer algumas mudanças, isso envolveria cavar o HTML. E eu acho que isso é meio bagunçado para um pedido de trabalho. Eu gostaria de, você sabe , controlar tudo com script Java. Então, o que eu estou procurando para você fazer é cortar essa abordagem e converter as informações da equipe de vendas de viagens de acne para Jason Data e, em seguida, executar esse Jason Data através de algum código JavaScript e seu JavaScript poderia então preencher e na lista de pedidos e, em seguida, renderizar uma lista não ordenada na página da Web. Isso pode parecer um desafio, mas acho que passamos muito tempo discutindo a diferença entre escopo no contexto e JavaScript, e você pode aproveitar esse conhecimento para realizar essa tarefa. Eu acho que você tem as ferramentas que você precisa para fazê-lo. Parte dois do nosso projeto de classe envolve re fatoração do código de página da Web exemplo. O que eu quero dizer especificamente é que eu estou procurando por você para eliminar código repetitivo, remover valores codificados no script Java e, em seguida, cortar funções inchadas. Então, se entrarmos em algum código, eu posso mostrar exatamente o que estou entendendo aqui com ambas as partes do projeto da classe, dê uma olhada no índice de arquivos dessa equipe etária. Agora, na parte inferior desse arquivo, você verá uma referência ao aplicativo dot Js. Vamos olhar em Js barra ap dot Js Então, em jazz app dot Js Este é o código que não discutimos este código nesta classe, mas é o código que é executado por trás das cenas que apenas tipo de constrói este aplicativo . Ele fornece principalmente esses recursos. Ele permite que você carregue o revestimento, execute o código, exemplos diretamente da página. Isso é principalmente isso. Hum, mas o que eu faço é correr naquele início em um aplicativo que começo eu chamo exemplos de upload apt. O Jason. Tão apto. Faça upload de exemplos. Jason, eu faço uma chamada do Ajax para este arquivo. Então vamos copiar isso e olhar para o arquivo. E se eu cortar o resto e vir aqui, você pode ver que este é o Jason real que eu recebo. Então esse Jason representa o que você vê no dom aqui. Todos estes exemplos é thes lista itis deixar este ordenou uma lista de exemplo. Os links de código são gerados dinamicamente em tempo real. E eu estou usando ah, Js exemplos ponto Jason. Então esse código que você vê aqui é exatamente o que você vê aqui. Certo, então o que acontece é que eu carrego o Jason. E então, quando isso for bem sucedido, esse método é chamado, e eu iterei os exemplos de exemplos no Jason e para cada exemplo, eu construo uma lista que eu sou, e eu posso provar isso talvez apenas dependendo de uma string aqui onde eu digo nome de ponto de exemplo . E se atualizarmos a página, perceberá que recebo a palavra holo depois de cada item aqui. Então, um, o ponto aqui é que eu sou apenas isso está mostrando a vocês que é aqui que essa lista de links de exemplo é criada. E como eu criar cada item da lista que eu anexei a você l ponto exemplo Sophie, nós inspecionar a página, Você verá que há uma ONU ordenou uma lista com os exemplos de classe. Estes são exemplos ul dot aqui, então eu estou construindo aqui. Então seu projeto, seu primeiro projeto, seria fazer exatamente a mesma coisa com a lista de vendedores. Então, esta marcação, certo? Aqui na página, todas essas pessoas de vendas que você vê que estão na verdade codificadas no HTML. Aqui na página, Se você olhar para trás no índice, que HTML, esta é a sua lista de vendedores começa aqui mesmo online. 29. Então, a pessoa de vendas zero diz avisos de pessoa e assim por diante. Mas estes são os vendedores. Aqui está um vendedor em particular, Bobby Carney. E se eu olhar para a primeira pessoa, é Bobby Carney. Então seu projeto seria tomar este mercado, que é realmente, hum, é bagunçado, certo? Porque se eu quiser mudar a forma como esses itens de lista são construídos, eu tenho que alterar cada um desses tempos de lista na marcação. Marcação codificada não é muito boa nesse tipo de situações. É melhor. Geralmente é melhor fazê-lo dinamicamente, que você tenha mais controle. Então veja se você pode descobrir uma maneira de tomar exatamente a mesma abordagem. Pegue esses itens da lista, os dados e esses itens da lista Primeiro, coloque-os em Jason. Deseja converter esta informação aqui para cada pessoa de vendas? Você quer converter essa informação para Jason que está formatada de uma forma semelhante a esta. E então você quer chamar isso de perseguição e assim como nós fazemos aqui e quando você chama isso de Jason com Ajax, então você quer construir os aliados para cada pessoa de vendas, e você quer enfiar na página para que você primeiro comece pegando Este aqui. Encomendei uma lista e você vai esvaziá-la. Quem gosta disso. Se eu salvar isso agora, recarregue a página. Não temos pessoal de vendas, por isso é arrancado os lábios. Então você quer cortar essa lista e você quer pegar isso para listar esta marca e você quer converter isso para Jason e então você quer puxá-lo para a página, construído dinamicamente fazendo isso. Não deve ser muito difícil, mas exigirá que você aproveite a compreensão fora do escopo e contexto que você ganhou nesta classe para criar o grupo de empregos que cria dinamicamente essa lista de vendedores em seu Exemplos pasta, abra o contato alguma pasta e, em seguida, selecione um método de arquivo Encadeamento Agora, Como eu mencionei anteriormente , este , uh, arquivo contém uma versão fator re de todo o nosso código que temos olhado nesta classe, e é um pouco mais claro e, na minha opinião, mais fácil ler. Mas eu estou usando este arquivo particular porque ele contém o código completo do aplicativo. Então, se executarmos este arquivo neste exemplo no treinamento método de página, ele nos permite fazer tudo. Podemos selecionar uma pessoa de vendas e de selecionar uma pessoa de vendas, selecionar vários vendedores, enfraquecer, excluir cada pessoa de vendas individualmente, ou podemos selecionar vários vendedores e excluir os selecionados. E à medida que excluímos vendedores, a contagem total da equipe de vendas diminui. E a qualquer momento podemos recarregar a página. Então, mas há duas coisas neste código que eu acho que poderia realmente usar para melhorar. Em primeiro lugar, há um monte de cordas revestidas duras. Por exemplo, temos um aliado pessoal de vendas e recipiente total de pessoas de vendas. Quero dizer, são só cordas. E se eu quiser mudar essa referência se eu quiser mudar os vendedores de ID, bem, quantas vezes isso aparece no meu código? Aparece cinco vezes no meu código. Então, se eu viesse aqui e os burros e talvez em nossa marcação, nós mudamos, você sabe, pessoas de vendas para equipe Bem, então eu tenho que descobrir quantas vezes nas minhas vendas de código, as pessoas de vendas ocorre e eu tenho que mudar cada um deles para equipe, e isso é realmente entediante. E não queremos fazer isso. Queria que pudéssemos fazer algo assim. Mude isso aqui e bum. Muda todos os lugares ou todos que fazem referência a esse elemento. Só isso fica com esse eso que não queremos. Não queremos ter esses valores de string codificados aqui. Queremos encontrar uma maneira melhor de fazer isso. E a segunda coisa é que nós também temos algum código repetido quando se trata de, hum, nós temos funções que realmente grandes que têm código repetido, como itens de usuário bind, manipuladores de eventos. Bem, isso vai da linha 74 Reboque, um de vinte anos. São quase 50 linhas de código para uma função, o que é muito. E muito disso é que estamos vendo outono, o item que encontrar algo no item clique que encontrar algo mais no clique e item que encontrar algo mais no clique. Então eu estou pensando que cada um destes poderia ser dividido em uma sub-função se, e então este poderia ser dividido em uma sub-função, e então este poderia ser dividido em uma sub-função. E em cada caso, todas essas funções definitivamente precisam de argumentos. Então você vai ter que, ah, descobrir uma maneira de passar cada função, os argumentos que ela precisa para fazer o que tem que fazer. Mas isso é muito mais fácil de ler. Quero dizer, este bind itens de usuário, manipuladores de eventos Método agora tem 14 linhas de código em oposição a 50. É uma grande diferença é que também é mais fácil de ler. E se decidirmos que queremos mudar a forma como o código é composto, poderíamos fazer isso. Mas é muito mais fácil de olhar e gerenciar. Então, as duas coisas que você deseja fazer em seu segundo projeto é remover todos os liberais de cadeia de caracteres codificados em todo o nosso código. Você pode configurá-los como variáveis ou propriedades de um objeto que depende completamente de você. Há mais de uma maneira de ir sobre isso, e nós estávamos procurando é como você decidir que você quer toe re fator o código para se livrar de todos esses liberais cadeia codificado rígido. E a segunda coisa é, é que queremos re fatorar quaisquer funções grandes como esta, modo que o código dentro de é dividido em funções menores. Mas você definitivamente vai ter que alavancar sua nova compreensão sua nova compreensão profunda da diferença entre escopo no contexto, a fim de fornecer essas funções os argumentos que eles precisam para fazer o trabalho que você está pedindo a eles para dio Bom com o projeto da classe. Estou ansioso para ver o que você inventou. Se você tiver alguma dúvida ou se sentir como se estivesse preso em algum lugar, não se esqueça de entrar em contato. E eu vou te acompanhar e fazer tudo o que puder para te ajudar. 33. Obrigado!: obrigado por se inscrever nesta classe onde aprendemos sobre a diferença com equipes, escopo e contexto em JavaScript. Espero que isso tenha sido útil para você. Junte-se a mim no blogueiro dot kevin Chisholm dot com, onde você vai encontrar toneladas de artigos e editoriais sobre muitos tópicos diferentes desenvolvedores Web . Obrigado novamente por rolar, e eu vou vê-lo na próxima vez que devemos.