{"id":839,"date":"2024-03-10T19:45:14","date_gmt":"2024-03-10T22:45:14","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=839"},"modified":"2024-03-10T22:18:18","modified_gmt":"2024-03-11T01:18:18","slug":"orientacao-a-objetos-em-javascript-trabalhando-com-classes","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=839","title":{"rendered":"Orienta\u00e7\u00e3o a Objetos em JavaScript: Trabalhando com Classes"},"content":{"rendered":"\n<p>Se voc\u00ea \u00e9 um desenvolvedor JavaScript em busca de escrever c\u00f3digo mais limpo, modular e reutiliz\u00e1vel, a orienta\u00e7\u00e3o a objetos \u00e9 uma ferramenta indispens\u00e1vel em seu arsenal. E quando se trata de orienta\u00e7\u00e3o a objetos em JavaScript, trabalhar com classes \u00e9 uma abordagem eficaz e moderna.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Por que Classes em JavaScript?<\/h3>\n\n\n\n<p>JavaScript, historicamente, foi uma linguagem orientada a objetos baseada em prot\u00f3tipos. Por\u00e9m, com a introdu\u00e7\u00e3o do ECMAScript 6 (tamb\u00e9m conhecido como ES6), a sintaxe de classe tornou-se parte integrante da linguagem. As classes fornecem uma maneira mais familiar e declarativa de definir objetos e sua estrutura.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Criando uma Classe em JavaScript<\/h3>\n\n\n\n<p>Para criar uma classe em JavaScript, utilizamos a palavra-chave class, seguida pelo nome da classe. Dentro dela, podemos definir propriedades e m\u00e9todos usando a sintaxe de fun\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"581\" height=\"364\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image-8.png\" alt=\"\" class=\"wp-image-840\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image-8.png 581w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image-8-300x188.png 300w\" sizes=\"(max-width: 581px) 100vw, 581px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Heran\u00e7a em JavaScript<\/h3>\n\n\n\n<p>As classes em JavaScript suportam heran\u00e7a, permitindo-nos estender o comportamento de uma classe existente em uma nova classe.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"484\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image-9.png\" alt=\"\" class=\"wp-image-841\" style=\"width:400px;height:auto\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image-9.png 400w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/03\/image-9-248x300.png 248w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>Neste exemplo foi criado a classe e a heran\u00e7a no mesmo documento script2.js.<\/p>\n\n\n\n<p>Para criar um documento separado na classe principal dever\u00e1 conter o export da classe para que o documento da classe filha tenha acesso.<\/p>\n\n\n\n<p>No v\u00eddeo de hoje segue um exemplo utilizando classe e subclasse em documentos separados.<\/p>\n\n\n\n<p><strong>Obs<\/strong>: Um classe principal pode ser chamada de <strong>classe base<\/strong>, <strong>superclasse<\/strong>, ou <strong>classe m\u00e3e<\/strong>.  A classe que receber\u00e1 a heran\u00e7a ser\u00e1 a <strong>subclasse<\/strong>, <strong>classe filha<\/strong> ou <strong>derivada<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"ORIENTACAO A OBJETOS COM JAVASCRIPT - CLASSE\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/TOXMC0h476Y?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Conclus\u00e3o<\/h3>\n\n\n\n<p>As classes em JavaScript simplificam a escrita de c\u00f3digo orientado a objetos, tornando-o mais leg\u00edvel e organizado. Com sua sintaxe limpa e familiar, as classes facilitam a cria\u00e7\u00e3o e o gerenciamento de objetos em seus projetos JavaScript. Ao dominar o uso de classes, voc\u00ea estar\u00e1 equipado para criar aplicativos mais robustos e escal\u00e1veis. Experimente e descubra o poder das classes em JavaScript em seus pr\u00f3ximos projetos!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea \u00e9 um desenvolvedor JavaScript em busca de escrever c\u00f3digo mais limpo, modular e reutiliz\u00e1vel, a orienta\u00e7\u00e3o a objetos \u00e9 uma ferramenta indispens\u00e1vel em seu arsenal. E quando se trata de orienta\u00e7\u00e3o a objetos em JavaScript, trabalhar com classes \u00e9 uma abordagem eficaz e moderna. Por que Classes em JavaScript? JavaScript, historicamente, foi uma linguagem orientada a objetos baseada em prot\u00f3tipos. Por\u00e9m, com a introdu\u00e7\u00e3o do ECMAScript 6 (tamb\u00e9m conhecido como ES6), a sintaxe de classe tornou-se parte integrante da linguagem. As classes fornecem uma maneira mais familiar e declarativa de definir objetos e sua estrutura. Criando uma Classe em JavaScript Para criar uma classe em JavaScript, utilizamos a palavra-chave class, seguida pelo nome da classe. Dentro dela, podemos definir propriedades e m\u00e9todos usando a sintaxe de fun\u00e7\u00e3o. Heran\u00e7a em JavaScript As classes em JavaScript suportam heran\u00e7a, permitindo-nos estender o comportamento de uma classe existente em uma nova classe. Neste exemplo foi criado a classe e a heran\u00e7a no mesmo documento script2.js. Para criar um documento separado na classe principal dever\u00e1 conter o export da classe para que o documento da classe filha tenha acesso. No v\u00eddeo de hoje segue um exemplo utilizando classe e subclasse em documentos separados. Obs: Um classe principal pode ser chamada de classe base, superclasse, ou classe m\u00e3e. A classe que receber\u00e1 a heran\u00e7a ser\u00e1 a subclasse, classe filha ou derivada. Conclus\u00e3o As classes em JavaScript simplificam a escrita de c\u00f3digo orientado a objetos, tornando-o mais leg\u00edvel e organizado. Com sua sintaxe limpa e familiar, as classes facilitam a cria\u00e7\u00e3o e o gerenciamento de objetos em seus projetos JavaScript. Ao dominar o uso de classes, voc\u00ea estar\u00e1 equipado para criar aplicativos mais robustos e escal\u00e1veis. Experimente e descubra o poder das classes em JavaScript em seus pr\u00f3ximos projetos!<\/p>\n","protected":false},"author":1,"featured_media":842,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/839"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=839"}],"version-history":[{"count":3,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/839\/revisions"}],"predecessor-version":[{"id":846,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/839\/revisions\/846"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/842"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}