Masterização do JavaScript 5: Fundamentos críticos de objetos

1. Apresentação: Já concluímos uma seção sobre fundamentos críticos. No entanto, nesta seção, quero abordar os fundamentos críticos específicos dos objetos. Nesta seção, após uma rápida análise superficial da natureza dos objetos em JavaScript, lidaremos principalmente com o conceito de protótipos. Entender protótipos em JavaScript é absolutamente essencial. Alguns falam sobre protótipos como um pilar do JavaScript e isso realmente faz muito sentido. protótipos estão associados a objetos. E, como discutimos anteriormente, os objetos estão em toda parte em JavaScript. Isso também faz protótipos em todos os lugares. À medida que entrarmos nos protótipos, primeiro exploraremos o que são e como afetam os objetos. Abordaremos as vantagens dos protótipos, da cadeia de protótipos e das maneiras pelas quais podemos trabalhar com propriedades e métodos fornecidos pelos protótipos. Acho que não posso exagerar a importância de entender protótipos em JavaScript. Portanto, mesmo que você ache que tem uma boa compreensão sobre esse assunto, eu ainda o encorajaria a ler esta seção de revisão. Tudo bem, isso é informação introdutória suficiente. Vamos começar e começar. 2. A natureza dos objetos: Se você já tem uma compreensão completa da natureza dos objetos em JavaScript, pode pular esse tópico. Eu o incluí porque antes de começar a falar sobre protótipos, quero ter certeza de que a natureza dos objetos seja compreendida. Isso é especialmente importante para aqueles que podem estar acessando o JavaScript de outra linguagem. Já usamos objetos várias vezes neste curso. Portanto, pode parecer um pouco estranho cobrir a natureza dos objetos. Agora. No entanto, há muitos que trabalham com objetos em JavaScript sem entendê-los completamente. Às vezes, é melhor ter alguma experiência com objetos antes de mergulhar na verdadeira natureza dos objetos, que é o que estamos fazendo nesta seção. Simplificando, um objeto é um valor composto. Ele reúne vários dados , primitivos ou outros objetos em uma única referência. Um objeto é uma coleção não ordenada de propriedades, e cada propriedade tem um nome e um valor. O nome da propriedade geralmente é uma string, mas também pode ser montada. O valor pode ser qualquer tipo de dados disponível em JavaScript. Então, falamos sobre propriedades como tendo pares nome-valor. Agora, antes de prosseguirmos, deixe-me começar a criar um objeto. Alguns declaram a variável. Em seguida, vou definir esse objeto usando um objeto literal. Então, primeiro nome F, vou colocar informações sobre mim aqui neste objeto. Então, basicamente, agora, o que temos são duas propriedades e a propriedade do nome F e uma propriedade de alanina. E observe que cada uma dessas propriedades tem um nome e um valor. No caso desses dois, os valores são cadeias de caracteres. Agora, quando você está definindo um objeto, cada propriedade deve ser separada por uma vírgula, o que eu fiz aqui. Agora, o nome às vezes é chamado de chave. Portanto, também falamos sobre propriedades como um par de valores-chave. Agora, inclua um tipo de dados diferente. Aqui está uma propriedade que armazena um número. Então o nome é pontuação, o valor é 90. E uma propriedade que armazena um booleano. Agora dissemos que o valor de uma propriedade pode ser qualquer tipo de dados disponível em JavaScript. Assim, podemos fazer outro tipo de objeto, por exemplo, uma matriz. Então, se eu fizer questionários aqui e depois configurá-los como uma matriz, e ele contém apenas algumas informações do questionário, basicamente questionários, os questionários que foram respondidos uma porcaria, algo assim. Aí eu tenho uma matriz. Outro tipo de objeto pode ser qualquer um dos objetos integrados que estão disponíveis em JavaScript. Um desses cursos, objeto até o momento. Então, esse objeto é criado em Eu apenas crio um novo objeto de data e isso se torna o valor dessa propriedade. Então, é claro que podemos ter apenas um objeto padrão, digamos, ter um endereço aqui. E isso é um objeto e contém propriedades dentro dele. Vamos ver, 45 principais e depois cidade. Portanto, temos vários tipos de dados diferentes associados às propriedades. Agora, a única coisa que ainda não adicionamos é que não adicionamos uma função a uma propriedade. E quando o valor é uma função, chamamos isso de método. Então, basicamente, uma propriedade de objeto que aponta para uma função como um método. Agora, os métodos podem ser configurados de duas maneiras diferentes. Digamos que eu quisesse uma propriedade fullName e esse será um método que aponta para uma função. Então, aqui está uma maneira de configurá-lo. Isto é, essa é a maneira tradicional. Nós apenas definimos uma função aqui. Agora estou usando isso para me referir ao objeto. Estou pegando fname e estou apenas concatenando isso com o nome Helen. Então eu uso isso novamente. Como eu disse, há duas maneiras de definir um método para anexar uma função a uma propriedade. Essa é a maneira tradicional. Mas em uma versão recente do script de Ekman, eles simplificaram isso para que eu possa definir o mesmo método. Muito mais simples de fazer. Agora, aqui criamos um objeto usando um objeto literal. É assim que chamamos isso. Mas há várias maneiras de criar objetos em JavaScript. Por exemplo, toda vez que criamos uma função, um objeto é criado usando o construtor da função. E isso é apenas um tipo especial de objeto. Toda vez que criamos uma matriz, um objeto é criado usando o construtor de matriz, que é um tipo especial de objeto. Então, há muitas maneiras diferentes de criar objetos. Mas mesmo quando estamos criando um objeto padrão, como eu fiz aqui. Há várias maneiras de fazer isso. E abordaremos muitas dessas maneiras diferentes de fazer isso quando examinarmos a seção sobre estruturação de código usando objetos e princípios orientados aplicados ao JavaScript. Então é isso que abordaremos algumas dessas diferentes maneiras de criar objetos, porque eles se tornam padrões. Se você estiver estruturando seu código usando objetos. Agora, vamos salvar esse objeto e dar uma olhada nele. Isso daqui a pouco e abra o console aqui. E apenas faça OBJ. E aí podemos ver o objeto e todas as suas diferentes propriedades, os pares de valores do nome, que vemos dentro desse objeto. Agora, para acessar um valor associado a uma propriedade, tradicionalmente usamos a sintaxe de pontos. Então, eu posso acessar o F9 assim e ele exibe o valor dessa propriedade específica. Mas não estamos limitados apenas à sintaxe de pontos. Também podemos usar colchetes. E isso se torna muito útil quando precisamos fazer certas coisas programaticamente. Então, por exemplo, se eu passar um endereço de string dentro de colchetes, ele procurará o endereço de ponto OBJ e retornará o valor dessa propriedade, como podemos ver lá. Agora, isso também pode ser usado ao atribuir valores a um objeto. Então, deixe-me voltar ao Visual Studio Code aqui. E aqui, vou primeiro definir algumas variáveis. Um deles é o nome dos dados. Vou definir isso como igual a uma sequência final. E depois o outro. Vamos começar com o Data Val. E vamos definir isso igual a 80. Agora vamos usar esses valores para criar outra propriedade no objeto OBJ. Agora poderíamos fazer isso literalmente dentro desse objeto. Nós poderíamos fazer isso assim. Eu coloquei colchetes e depois o nome dos dados, é isso que eu quero. Quero que final seja o nome do par de valores do nome. E então eu coloquei colchetes em volta dele. Então eu coloquei o cólon assim. E então eu posso simplesmente associar o valor a ele. Agora vamos salvar isso e dar uma olhada no objeto. Certifique-se de que estamos realmente vendo isso. Então, se eu abrir esse objeto e obtermos o final e é 80, e isso funcionou para nós. Agora, outra forma poderia ter sido atribuí-lo aqui. Eu poderia fazer OBJ. Em seguida, dentro dos colchetes, o nome dos dados. Você pode ver agora que ele está recuperando o valor para que possamos usá-lo para recuperar ou podemos usá-lo para definir. Se eu definir para 90. O que acontece? Diferencia maiúsculas de minúsculas Aí vamos nós. O placar agora mostra 90. Agora, outra coisa que nos mostra é que os objetos são mutáveis, o que significa que podem ser alterados. Agora, mesmo se tivéssemos definido esse objeto com a palavra-chave const, isso faria com que não pudéssemos atribuir outro valor a essa variável. Isso é tudo o que aconteceria. Ainda podemos alterar todas as propriedades dentro do objeto porque os objetos são mutáveis. Portanto, usar const não nos impedirá de alterar as propriedades dentro de um objeto. Agora, existem alguns comandos para nos ajudar a criar objetos para que sejam mais imutáveis, para que não possamos alterá-los. Para introduzir isso, precisamos estar cientes de que cada propriedade contém atributos. Os atributos são associados cada propriedade em um objeto, e esses atributos determinam o que podemos fazer com essa propriedade. Então, deixe-me analisar os três atributos principais. Um é gravável. Portanto, o atributo gravável determina se o valor pode ser alterado ou não. Portanto, se um conjunto gravável tiver como padrão o nome F, não posso alterar esse valor. Não vai permitir que eu mude isso. Tudo bem, também há um, um atributo configurável. E o atributo configurável determina duas coisas. Primeiro, ele determina se podemos ou não excluir a propriedade do objeto. Então, se for falso, não podemos excluí-lo. A outra coisa que determina é se podemos alterar os atributos dessa propriedade. Então, uma vez que os atributos são definidos, se definirmos configurável como falso, não podemos alterar esses atributos. Isso é o que isso vai nos impedir de fazer. Agora, há uma ressalva nisso. Se definirmos configurable como falhas, podemos mudar writable para false. mecanismo Javascript permite isso, mas esse é o único cenário em que poderíamos realmente fazer uma alteração de configurável se fosse falsa. Agora, o último atributo que preciso mencionar é enumerável. Agora, o atributo enumerável determina que a propriedade seja retornada por determinadas ações. Por exemplo, um loop For-in não mostrará uma propriedade com um atributo de inúmeros padrões definidos, mas simplesmente não aparecerá. Agora, por padrão, para esse objeto que criamos aqui, por padrão, todos eles são definidos como verdadeiros. E podemos ver isso com um simples comando de JavaScript. Deixe-me salvar o que fiz lá. Este é um método estático de construtor de objetos. É um descritor de propriedade própria, é bem longo. Então, se passarmos o OBJ e depois passarmos a propriedade para a qual queremos ver seus atributos. Vamos fazer o nome F. Ele retornará as informações sobre isso. Então, o valor é que Steve nos mostra e, em seguida, gravável é definido como verdadeiro, inumerável é definido como verdadeiro e configurável é definido como verdadeiro, para possamos ver o que são. E, por padrão, é isso que é atribuído a cada propriedade, verdadeira, verdadeira e verdadeira. Agora, como você pode mudar isso? Bem, vamos definir uma nova propriedade. Deixe-me fazer isso dentro do Visual Studio Code para que você tenha um registro dele. Propriedade definida. E então, mais uma vez, esse é um método estático, então a propriedade do objeto é definida pelo ponto. E então passamos pelo objeto. E então passamos pela propriedade. Queremos continuar agindo. Eu vou criar um novo. Então, vou fazer BD no aniversário. Agora, o terceiro parâmetro é um objeto. E esse objeto tem os atributos que queremos definir. Um é o valor. Vou definir isso para mim 25. Então, podemos fazer as propriedades graváveis, configuráveis e inúmeras sobre as quais falamos. Então, vamos fazer o Writable. E vamos definir isso como falso. Vou definir esses padrões em todos eles, pois isso ocorre porque true é o padrão. Tudo bem, vamos guardar isso. E agora vamos ver o que obtemos. Então, vamos dar uma olhada no OBJ. Podemos abri-lo e ver que agora existe uma propriedade de data B e está definida para 25 de maio. Podemos exibi-lo? Obj cão? Claro. Nós podemos exibi-lo. Podemos mudar isso? Bem, vamos tentar. Isso. Será j dot v. Vamos definir isso como igual a 25 de junho. Parece que isso muda. E isso é o que eu acho que é um problema com isso. Parece que isso muda. Mas quando exibimos o OBJ novamente e o abrimos, ou quando damos uma olhada a propriedade BD do OBJ ainda está definida com seu valor original, então isso não nos permite alterar isso. Agora, o que acontece com a propriedade configurável? Vamos tentar alterar essa mesma propriedade novamente, vou copiar no mesmo comando. Vamos tentar configurá-lo novamente. E vamos definir writable como true. Agora, se eu pressionar Return, perceber que recebemos um tipo de erro ou não conseguimos definir a propriedade, isso não nos permitirá fazer isso. Agora, mais uma coisa que eu quero mostrar apenas um loop para. Então, vamos deixar i. E então vamos apenas console.log. Eu gosto disso. Portanto, há um loop for-in para percorrer todas as propriedades do objeto. Agora, se examinarmos isso, não vemos um BD porque não é enumerável. Vamos tentar mais uma coisa. Aqui está outro método estático. E isso recuperará as chaves. As chaves dos pares de valores-chave. A chave da propriedade. Também chamamos esse nome, mas mencionei que também se chamava chaves. Então, se mostrarmos isso, basicamente o que isso faz é criar uma matriz. Mas observe que o dia B está faltando e isso porque o atributo enumerável está definido como falso. Agora, há um comando semelhante, object dot values, que recupera os valores e os coloca em uma matriz como essa. Então, alguns métodos estáticos interessantes que você deve conhecer. Basicamente, usando esses comandos diferentes para mostrar a natureza dos objetos, quais objetos são semelhantes em JavaScript. E com essa base, estamos prontos para começar a falar sobre protótipos, um conceito muito importante quando se trata de objetos em JavaScript. Então, vamos seguir em frente. 3. O que é um protótipo e porquê?: À medida que mergulhamos nos protótipos, primeiro precisamos falar sobre o que é um protótipo e por que ele é importante. Então, primeiro, o que é um protótipo? Agora, quase todo objeto JavaScript tem um segundo objeto associado a ele. Esse segundo objeto é chamado de objeto protótipo. E o objeto JavaScript pode emprestar propriedades desse objeto de protótipo. Agora, antes de nos aprofundarmos nesses detalhes examinando exemplos em código real, vamos pensar sobre o poder desse conceito. Digamos que tivéssemos quatro objetos de usuário, como estamos mostrando aqui. Usuário um, usuário, dois, usuário, três, usuário, pois cada um deles tem uma propriedade de nome F, propriedade de nome N e L. E eles têm valores diferentes para essas propriedades, como podemos ver, porque seus nomes são diferentes. Mas digamos que cada um desses objetos precise de um método de nome completo. Um método de nome completo que retornará o FirstName concatenado com o sobrenome. Assim, podemos definir um método falso em cada um desses objetos. Mas isso não parece muito eficiente. Colocando cada objeto que usa mais memória e estamos nos repetindo. Há algumas coisas que apenas tornam isso ineficiente. Portanto, a maneira ideal é colocar esse método no objeto do protótipo. Agora, com o método no objeto de protótipo , cada objeto do usuário pode emprestar esse método sempre que quiser, sempre que precisar. E está apenas em um só lugar. Se precisarmos fazer uma alteração nele, faremos uma alteração no objeto protótipo que muda disponível para todos os objetos que usam esse objeto como objeto de protótipo. Então, há muitas vantagens. Agora, neste exemplo, estou mostrando o empréstimo de um método, uma função associada a uma propriedade. Então, um método, se eu inserir nome completo do usuário com um ponto e invocá-lo no meu código. Quando o código é executado, o mecanismo de JavaScript examinará primeiro o objeto do usuário. Ele procurará uma propriedade de nome completo que possa invocar usar como um método. Quando não o encontra. Ele examinará o protótipo do objeto. O primeiro lugar onde ele vai procurar. E se o encontrar lá, ele o agarrará e o invocará. Então é assim que os objetos estão emprestando propriedades do objeto protótipo. O mecanismo de JavaScript examinará primeiro o objeto em si, não conseguirá encontrá-lo. Em seguida, ele aparecerá no protótipo. Mas e se o protótipo tivesse uma propriedade aqui em nosso objeto protótipo? E se eu tivesse uma propriedade de f, fname e lname? O que aconteceria então? O objeto usaria sua própria propriedade vespertina e a propriedade do nome L? E a resposta é sim, é claro que, com base no que descrevemos, o mecanismo de JavaScript encontraria com base no que descrevemos, é claro que, com base no que descrevemos, o mecanismo de JavaScript encontraria essa propriedade no uso de um objeto. Não será necessário retirá-lo do objeto protótipo. Portanto, esse é outro recurso poderoso dos protótipos. Podemos ter propriedades no objeto protótipo e substituí-las nos objetos locais individuais. Portanto, isso fornece a flexibilidade que estamos procurando. Agora, eu disse que quase todo objeto JavaScript tem um objeto protótipo do qual ele empresta propriedades. Portanto, há situações em que podemos ter um objeto sem um objeto protótipo. Para que isso acontecesse, porém, você, como desenvolvedor, teria que forçá-lo. Portanto, qualquer objeto criado por meios regulares, vamos vincular a um objeto protótipo. Isso significa matrizes, datas, funções, objetos JavaScript regulares, todos eles têm objetos de protótipo. E no próximo tópico, começaremos a analisar alguns deles e analisar os protótipos reais e o que eles fornecem a esses objetos. Então, vamos seguir em frente. 4. Objetos de protótipo estão em todo o lugar: Como quase todo objeto tem um protótipo, vamos ver alguns objetos. Veja o protótipo e o que o objeto ganha com esse protótipo. Agora, vamos começar com uma matriz. Agora vou fazer tudo isso no console porque esses serão apenas alguns comandos simples e eu vou entrar. Então, faremos isso aqui. Então, deixe-me começar criando uma matriz. Então, uma matriz muito simples, só vai ter três números, desta forma. Vou seguir em frente e pressionar Return. Agora, deixe-me dar uma olhada nessa matriz aqui no console. Podemos ver os elementos da matriz. Mas observe que aqui embaixo temos o que parece ser uma propriedade, sublinhado, sublinhado. Sublinhado, sublinhado será. Esse é um link para o objeto do protótipo. Então, se abrirmos isso, podemos ver o que o protótipo fornece para matrizes. Agora, com matrizes, com esse tipo de objeto específico, há várias coisas fornecidas pelo protótipo. Você pode ver que todos os métodos que obtemos que podem ser usados com uma matriz estão contidos aqui. Então, por exemplo, digamos que quiséssemos adicionar um valor a essa matriz. Então, arrume e empurre. Vamos adicionar quatro a essa matriz. Agora, quando analisamos a taxa, agora temos outro item lá. Agora, de onde veio esse método push? Como podemos usar isso? Bem, você sem dúvida vê para onde isso está indo. Ela vem dos objetos do protótipo. Então, se rolarmos até aqui o suficiente, podemos ver o empurrão. É por isso que podemos usar o push. Assim, cada matriz criada teve acesso a esse método. E cada matriz não precisa usar memória armazenando todos esses métodos. Eles são todos armazenados no objeto do protótipo e, em seguida, eles têm acesso a eles. Eles podem emprestá-los quando necessário. Tudo bem, agora vamos ver algumas outras maneiras de exibir o protótipo. Acabei de usar o que é fornecido com o navegador Chrome e a maneira como ele exibe as coisas. E eu consigo abri-lo e depois ver o objeto do protótipo. Mas também poderíamos fazer isso. Aquela coisa que parece uma propriedade da eu estava falando. Dois sublinhados proto, dois sublinhados que também estão disponíveis para exibir o protótipo. E podemos ver que parece semelhante. O que eu estava vendo antes. Agora, antes de enlouquecer com esse sublinhado, sublinhado, sublinhado, sublinhado. Deixe-me mencionar essa forma específica de acesso. O protótipo não deve ser usado. Estou apenas mostrando isso aqui por causa de diferentes maneiras de dar uma olhada em um protótipo, mas ele não deve ser usado. Nunca fez parte da especificação inicial do script Ekman. Acabou de ser adicionado pelos navegadores e acabou se tornando popular com o passar dos anos. E depois foi adicionado à especificação posteriormente. Mas ainda estava desencorajado. Use-o, então é mais aconselhável usar o protótipo object dot get , do qual vamos dar uma olhada. E mais tarde, quando analisarmos a configuração do protótipo, veremos em breve os comandos para fazer isso. Portanto, com o objeto dot get prototype of, também podemos ver os protótipos. Então, vamos fazer isso. Dentro dos parênteses. Esse é um método estático. Então, coloque o protótipo do die-gap dentro dos parênteses. Colocamos o objeto, nesse caso, a matriz que criamos. E abrimos isso e podemos ver o mesmo tipo de coisa que víamos antes quando você olha para o protótipo. Então, essa é outra maneira de ver o protótipo de um objeto. E observe todos os recursos que adicionamos a uma matriz por causa do protótipo. Ok, vamos fazer uma diferente. Vamos marcar um encontro. Então, vou declarar uma variável de data e, em seguida, criar uma nova data para a data de hoje. Agora, devido à forma como as datas são configuradas, eu simplesmente não consigo inserir uma data como essa e poder ver o protótipo que basicamente é só usar o método toString para exibir a data em um formato de string. Isso é o que isso faz por mim. Mas eu posso fazer um console dot DIR. E aí eu posso abrir e ver mais sobre isso. Então, aqui está nosso protótipo que aponta para o objeto protótipo. E você pode ver que todos os diferentes métodos que as datas também têm. Há vários deles. Portanto, faz sentido que estejam no objeto do protótipo e não em cada data individual. Então, por causa do protótipo, mais uma vez, por causa desse objeto de protótipo, podemos datar, pontuar, obter data e, basicamente, obter o dia do mês. Podemos usar qualquer um desses métodos disponíveis. Então, todos os objetos JavaScript integrados que fazem parte do JavaScript têm protótipos com eles. Analisamos apenas dois, mas todos eles têm prototipagem. Você pode experimentar com isso, você pode tentar isso. E eu encorajo você a passar algum tempo criando alguns dos diferentes objetos embutidos que estão disponíveis e simplesmente abri-los. Dê uma olhada no protótipo, veja o que está disponível no protótipo. Agora, e quanto aos objetos JavaScript simples? Isso é o que eu quero ver a seguir. Então, deixe-me criar apenas objetos JavaScript simples. Eu vou ter um nome de propriedade. Mal criei isso. E não é um objeto JavaScript embutido, então ele vem com um protótipo quando eu crio assim? Bem, vamos descobrir. Vamos abrir isso. Vemos a propriedade e, com certeza, ela também tem um protótipo. E se eu abrir isso, há algumas coisas que eu obtenho como parte de um objeto JavaScript simples. Observe que existe um método para criar um protótipo. Essa é uma forma de verificar se algum objeto é um protótipo de outro objeto. Portanto, há algumas coisas que obtemos com o objeto protótipo que vem com um objeto JavaScript simples. Em uma delas está o valor de. Lá, obtemos o valor. Agora vamos usar essa propriedade própria aqui. E vamos ver o que é retornado pelo valor de. Essa é a matemática que acabamos de usar. É falso, então não é propriedade própria da OBJ. Essa é outra forma de indicar que algo que estamos usando não faz parte do objeto do protótipo. Porque esse método ou essa propriedade que é um método não é uma propriedade própria do OBJ. Está obtendo isso do protótipo. Agora, mais uma coisa que eu quero mostrar antes de seguirmos para cá. Se eu olhar para a matriz novamente, venho até o objeto protótipo. Eu abri isso e rolo para baixo até a parte inferior. Olha, tem outro aqui. E isso é objeto. Essa é uma matriz, o que esperaríamos. Este é um objeto. Então, o que está acontecendo aqui? Bem, esta é a cadeia de protótipos. Então é sobre isso que vamos falar no próximo tópico. Objetos protótipos também podem ter protótipos. Então, vamos seguir em frente e falaremos sobre isso. 5. Cadeias de protótipo: Estabelecemos o fato de que os objetos são armazenados e, na maioria das vezes, têm um objeto protótipo do qual esse objeto pode emprestar propriedades inerentes. Agora, como um objeto protótipo também é um objeto, faz sentido que ele também possa ter um objeto protótipo. Isso cria o que chamamos de cadeia de protótipos. Objetos unidos em uma corrente como se fosse uma corrente. Vamos primeiro examinar isso no código e depois em uma representação gráfica para ter certeza de que entendemos como esses objetos comem juntos e formam uma cadeia de protótipos. Tudo bem, para este documento atual, criei uma matriz, matriz simples e também um objeto para ter ambas que possamos vê-las no console. E então vou fazer mais algumas coisas aqui no arquivo de código e ver o que acontece. Então, a primeira coisa que vamos fazer é abrir esse console para que possamos dar uma olhada neles. Ok, então vamos primeiro dar uma olhada na matriz. Agora, se eu abrir isso, como fizemos no passado, vemos que há um protótipo anexado a ele, e isso vem do construtor da matriz. No entanto, se abrirmos isso ainda mais e depois rolarmos para baixo, agora estamos vendo o objeto que é o protótipo dessa matriz. E vamos mais adiante nesse objeto, podemos ver todos os métodos que estão disponíveis para matrizes. Mas mais abaixo também temos um link para outro objeto, que é o protótipo do protótipo. Então, essa é a nossa cadeia de protótipos qual estamos falando aqui. Então, podemos ver isso representado aqui no navegador. Vamos usar o protótipo get de dois e também dar uma olhada nisso. Então, se eu fizer um objeto, obtenha o protótipo de um enter, a matriz. Esse é o objeto que é o protótipo. Todos esses métodos devem parecer familiares. Existem métodos. Esses são métodos que estão disponíveis em matrizes. Tudo bem, agora vamos dar um passo adiante. Então, eu vou fazer o protótipo do objeto Dot Get. E então, dentro disso, vou colocar um objeto do qual obtenho um protótipo novamente. Então, primeiro obteremos aqui o protótipo da matriz e, em seguida, obteremos o protótipo desse objeto protótipo. Deveria nos mostrar o terceiro que estávamos vendo. Então, se eu abrir isso, observe que o que temos aqui que o construtor tem na propriedade é o valor da propriedade de tudo isso. Então, se descêssemos e descêssemos, e depois mais uma vez, isso é basicamente o que estamos vendo aqui. Portanto, é o protótipo do protótipo que cria o que é chamado de cadeia de protótipos. Agora, nesse código, eu também criei um objeto. Então, eu quero mostrar isso muito rápido. Então, se eu entrar no OBJ e depois abri-lo, o protótipo é exatamente como o protótipo do protótipo de matriz. Com uma matriz. Quando criamos uma matriz, ela recebe um protótipo que vem do construtor da matriz. Bem, esse protótipo recebe um protótipo , vem do construtor do objeto, e esse é o mesmo objeto que estamos vendo aqui. Então, eventualmente, à medida que você sobe na cadeia de protótipos, todos os objetos vão para o mesmo fim, protótipo. E esse é o protótipo anexado ao construtor do objeto. E assim, todos os objetos terão acesso ao valor do método, por exemplo, I. Pode digitar o valor do ponto ARR de. E isso funciona. Ele procura primeiro esse método na matriz, pode encontrá-lo lá. Então, ele o procura no objeto do protótipo. Não consigo encontrá-lo lá. Então, ele o procura no protótipo do objeto protótipo e, eventualmente, o encontra lá. Agora, se ele não conseguir encontrá-lo no objeto final do protótipo que está na cadeia de protótipos , ele retornaria indefinido ou ocorreria um erro dizendo que isso não é um método, não pode qualquer coisa com isso. Tudo bem, agora vamos um pouco mais longe aqui. Deixe-me seguir em frente e criar outro objeto. Vou chamá-lo de OBJ também. Esse objeto terá um único método nele. Só vai ficar cheio. O nome é o método. O que esse método vai fazer? Ele retornará basicamente esse nome de ponto F e o concatenará com um espaço. E então esse nome de ponto L. Isso é o que ele retornará. Está bem? Agora, o que vamos fazer é fazer disso um protótipo de outro objeto. Porque eu não quero dar uma olhada e ver o que acontece quando configuramos o protótipo de um objeto. Veja se ainda temos aquela cadeia de protótipos sobre a qual falamos. Então, vamos prosseguir e a configuração será J3. Aqui está um comando usado para criar um objeto que pode ao mesmo tempo, anexar um protótipo chamado Object.create. É um método estático no construtor do objeto. E o que fazemos é, dentro um parêntese, passamos o objeto que queremos como o objeto protótipo desse objeto que estamos criando. Então, o OBJ three terá isso como seu protótipo imediato. Então, OBJ, até aqui. Agora, quando eu salvo isso e vejo o OBJ três no console, não há nada no objeto, mas ele tem um protótipo. Observe o que está no protótipo, o método do nome completo. E isso também continua subindo na cadeia de protótipos. Agora vamos adicionar algo ao OBJ três. Vamos adicionar um nome F e uma propriedade de nome L. Então, OBJ, nome F de três pontos. Há o primeiro nome, LBJ, três nomes L, e esse será nosso sobrenome. Aí vamos nós. Agora temos os dois dentro. Então, agora vamos salvar isso. Vamos pular para o console novamente. Agora, desta vez, se eu inserir OBJ três, nome completo, o que vai acontecer? Ele o procurará no OBJ três. Ele não consegue encontrá-lo lá. Então, ele procura em seu objeto protótipo, encontra lá, faz o que é necessário e retorna o nome completo para nós. Agora, acabamos de falar sobre qual valor é encontrado no objeto final do protótipo quando subimos em uma cadeia de protótipos que está disponível aqui para nós neste objeto JavaScript autodefinido. E, basicamente, ele imprime o valor necessário para subir na cadeia de protótipos para descobrir isso. Portanto, ele não consegue encontrá-lo no OBJ três, não pode encontrá-lo em seu objeto protótipo, que é OBJ para este aqui. Não consigo encontrá-lo lá. Onde ele finalmente o encontra é no objeto, protótipo, protótipo. É aí que ele finalmente o encontra, o protótipo do construtor de objetos. Então, falamos sobre isso do ponto de vista do código. Vamos ver como isso é representado usando uma imagem para que eu possa ter certeza de que isso é concreto em sua mente. Esse é um conceito importante de entender. Então, vamos dar uma olhada em um gráfico que ilustrará isso. Então, aqui representamos que OBJ tem as propriedades fname e lname. E então temos seu objeto protótipo representado OB J2. E então temos o protótipo disso, que é o protótipo atribuído ao construtor do objeto, protótipo de ponto de objeto. É aqui em cima, é aí que o valor é encontrado. Então, quando eu insiro o valor de três pontos do OBJ, ele aparece pela primeira vez no objeto OBJ não consigo encontrá-lo lá. Então, muda para seu protótipo, não consigo encontrá-lo lá. Muda-se para seu protótipo, o encontra lá e continuaria subindo nessa cadeia de protótipos. Esse é o fim da cadeia de protótipos. Portanto, se não a encontrasse aqui , geraria um erro indicando que não conseguiu encontrar essa função ou que o valor de não é uma função. É assim que a cadeia de protótipos é usada pelo mecanismo JavaScript para emprestar propriedades do protótipo de um objeto. E isso ilustra que não é apenas o protótipo inicial do objeto, mas pode ser o protótipo do protótipo. Ele pode subir nessa cadeia de protótipos para encontrar e emprestar essas propriedades. Tudo bem, vamos passar para o próximo tópico. 6. Propriedades de objetos têm a precedência: Antes de deixarmos o tópico dos protótipos e começarmos a usá-los, quero enfatizar um ponto que você já deve ter descoberto, mas quero ter certeza de que é conhecido. Ou seja, um método ou propriedade de um objeto sempre substituirá o método ou propriedade o mesmo nome em um objeto protótipo. Em outras palavras, quando o mecanismo JavaScript está procurando um método ou uma propriedade, ele olha primeiro no objeto. Se o objeto a tiver, ele usa essa versão e ignora qualquer coisa que possa ser encontrada na cadeia de protótipos. Vejamos um exemplo rápido que também pode ser útil por outros motivos. Então, vou criar um objeto muito simples aqui. Obj é como vamos chamá-lo. E eu vou ter uma propriedade com o nome F. Ou, ei, vamos fazer o nome F e depois vou colocar uma idade de 45 anos. Isso é tudo o que teremos agora neste objeto em particular. Deixe-me ir em frente e guardar isso. Vou redimensionar isso um pouco. E nós vamos até o console aqui. E a primeira coisa que eu quero fazer é que esse é o nosso objetivo. Podemos ver isso com bastante facilidade. E o que acontece se eu valorizar isso me mostra o objeto como um objeto. Então, eu posso navegar por isso. Eu posso ver o protótipo. De onde vem esse valor da propriedade ou o valor do método vem do protótipo. Podemos ver isso aqui. Tudo bem? Portanto, também podemos verificar se ele não pertence ao objeto fazendo sua própria propriedade. E então, dentro disso, fazer valor de assim, e isso volta falso. Portanto, sabemos que o valor do método não é uma propriedade em um objeto. Isso é bastante óbvio neste momento. Mas também sabemos que podemos acessá-lo porque ele o encontra na cadeia do protótipo e o imprime dessa forma. Agora, vamos fazer algo muito rápido. Vamos fazer um OBJ com cinco mais. Observe o que é impresso. De onde vem isso? Bem, isso vem do método de duas cordas. Geralmente, quando um objeto precisa ser convertido em um valor primitivo, ele usa o valor do método para fazer isso. Mas no caso de uma string, uma situação de string, ela usará duas cadeias de caracteres para fazer essa conversão. Se o valor de retornar, algo que possa ser coagido a se transformar em uma string , ele usará value up. Mas, no momento, qual valor de está retornando não pode ser transformado em uma string. Então, usamos o método toString. Então, vamos fazer algumas mudanças aqui. Vamos voltar para esse objeto. E eu vou primeiro fazer um método toString. E faremos com que ele retorne esse nome de ponto F. E é isso que vamos ter. O método de duas cadeias de caracteres retorna. Opa, eu coloquei um ponto final lá. Aí vamos nós. Agora vamos salvar isso. E vamos sair e fazer o mesmo comando novamente. E observe o que obtemos porque substituímos o método toString que está na cadeia de protótipos, ou seja, no protótipo do objeto. Agora obtemos o valor designado pelo método toString no próprio objeto. Tudo bem, agora vamos adicionar um valor de método. E isso pode ser muito útil se você precisar que um objeto possa ser convertido em um número. Vamos seguir em frente e valorizar. E para isso, vou fazer com que ele retorne um número que é a idade. Agora, vamos salvar isso. Vamos pular para fora. Vamos fazer a mesma coisa novamente. E agora veja o que acontece. Agora, porque isso é um número. Ele tentará obter um valor primitivo do objeto usando primeiro o valor de, já que o valor de está retornando um número, depois é tratado como um número e basicamente soma essas duas coisas. Agora, o que aconteceria se tivéssemos uma corda? Vamos, vamos fazer algo assim. Objeto mais OBJ. Bem, ele acessa o valor do método. Ele sempre tenta acessá-lo primeiro se precisar convertê-lo em um valor primitivo. Se conseguir coagir com uma corda, fará isso. 45 pode ser coagido para uma string, e assim acontece, e retorna uma string aqui. Mas, como por padrão , é um número. Quando o usamos com o número, ele retornará o número. Ele funcionará como um número, como vimos aqui. Então, substituímos as propriedades, os métodos que estão no protótipo de um objeto, de um objeto que criamos. É parte do construtor do objeto. E isso é toString e o valor de nós os substituímos. Então, agora esse objeto usa aqueles que são locais em vez dos da cadeia de protótipos. Agora, abordamos muito sobre protótipos. E com esse conhecimento, podemos começar a aplicá-los sem o mistério dos protótipos Muitas pessoas começam a trabalhar com objetos em JavaScript e realmente não entendem o que é acontecendo nos bastidores. É muito melhor entender por que as coisas estão funcionando de uma maneira específica e por que os protótipos fazem o que fazem em JavaScript. E é importante saber isso porque os protótipos são usados em todo o JavaScript. Tudo bem, vamos seguir em frente. 7. O que vem a seguir?: Você chegou ao final das seções críticas de fundamentos e conceitos do domínio do JavaScript. Então, o que acontece a seguir? Bem, a próxima seção de masterização de JavaScript será sobre módulos. Mas eu recomendaria que você abordasse alguns outros tópicos primeiro ou ao mesmo tempo em que está abordando os módulos. Esses outros tópicos estão em alguns dos meus outros cursos e, portanto, quero destacá-los. Primeiramente, acho que um conceito crítico, um padrão crítico e crítico em JavaScript é design orientado a objetos. E isso pode ser encontrado nos tópicos avançados de JavaScript desse curso. É uma das partes desse curso. Então, eu recomendo que você ainda não tenha feito isso e aprenda os diferentes padrões que estão disponíveis para programação orientada a objetos. Além disso, a programação funcional se tornou parte integrante do JavaScript recentemente. E isso é outra coisa que eu acho fundamental. Esse é outro padrão que eu acho importante entender. Eu tenho um curso inteiro sobre isso, programação funcional em JavaScript, um guia prático. Essa é realmente uma abordagem prática para programação funcional. Portanto, mesmo que você não use o paradigma de programação funcional o tempo todo, você pode aplicar os conceitos que são ensinados lá. E acho que é fundamental entendê-los. E, finalmente, é muito importante entender os padrões assíncronos em JavaScript. E isso também é um curso inteiro. Isso é em um mergulho profundo de JavaScript assíncrono. Portanto, eu recomendaria abordá-los ao mesmo tempo ou antes de lidar com os módulos. Tudo bem, continue aprendendo e obrigado por fazer este curso comigo.