{"id":26,"date":"2008-01-05T13:14:51","date_gmt":"2008-01-05T20:14:51","guid":{"rendered":"http:\/\/www.milfont.org\/tech\/2008\/01\/05\/heranca-no-javascript\/"},"modified":"2011-04-29T15:36:40","modified_gmt":"2011-04-29T22:36:40","slug":"heranca-no-javascript","status":"publish","type":"post","link":"https:\/\/www.milfont.org\/tech\/2008\/01\/05\/heranca-no-javascript\/","title":{"rendered":"Heran\u00e7a no Javascript"},"content":{"rendered":"<p><script type=\"text\/javascript\"> function get_style26 () { return \"none\"; } function end26_ () { document.getElementById('wqd26').style.display = get_style26(); } <\/script>Heran\u00e7a \u00e9 capacidade de um objeto reusar (herdar) os m\u00e9todos e  propriedades de outro objeto. O modelo de orienta\u00e7\u00e3o a objetos baseado em prot\u00f3tipos, estabelece que um objeto serve de &#8220;molde&#8221; ou &#8220;base&#8221;  (prot\u00f3tipo) para outro e a heran\u00e7a em javascript adiciona a propriedade global  &#8220;instanceof&#8221; para definir se um objeto &#8220;\u00e9&#8221; do mesmo tipo do objeto base  (prot\u00f3tipo). Para implementar a heran\u00e7a, voce define um  objeto base (prot\u00f3tipo) que fornecer\u00e1 as caracter\u00edsticas aos outros  objetos.<\/p>\n<p>Todos os objetos definidos pelo desenvolvedor s\u00e3o candidatos a  objeto base. Como medida de seguran\u00e7a as classes Native e Host n\u00e3o  est\u00e3o eleitos a servirem como objetos base.<\/p>\n<p>Selecionado o objeto base, agora voce pode criar os objetos que herdar\u00e3o e modificar\u00e3o o objeto base conforme os requisitos. Os  objetos filhos criados pelo desenvolvedor herdam todas as propriedades  e m\u00e9todos do objeto base, incluindo o construtor e as implementa\u00e7\u00f5es de  m\u00e9todos. Lembrando que todas as propriedades e m\u00e9todos s\u00e3o p\u00fablicos,  ent\u00e3o os objetos podem acess\u00e1-los diretamente. Esses objetos podem  adicionar novas propriedades e m\u00e9todos n\u00e3o presentes no objeto base ou  reescrever com novas implementa\u00e7\u00f5es.<\/p>\n<h3>Keyword <em>This<\/em><\/h3>\n<p>A palavra chave <em>This<\/em> faz refer\u00eancia ao escopo do objeto onde ela est\u00e1 sendo chamada.<\/p>\n<p>Como o uso  do <em>This<\/em> no ECMAScript existe a possibilidade de emular os  escopos privados usando a palavra chave <em>var<\/em>, j\u00e1 que por default a linguagem s\u00f3 conhece o escopo  p\u00fablico.<\/p>\n<pre lang=\"javascript\">function objetoY()  {\r\n    var variavel_privada = \"Essa vari\u00e1vel \u00e9 privada\";\r\n    this.variavel_publica = \"Essa vari\u00e1vel \u00e9 p\u00fablica\";\r\n}<\/pre>\n<p>Nesse c\u00f3digo a vari\u00e1vel denominada &#8220;variavel_privada&#8221; n\u00e3o \u00e9 propriedade  do objeto &#8220;objetoY&#8221; e sim uma propriedade local ao contexto desse  objeto, simulando assim uma vari\u00e1vel privada j\u00e1 que outros contextos  n\u00e3o ter\u00e3o acesso a ela, apenas m\u00e9todos e propriedades internas ao  objeto, enquanto a propriedade  &#8220;variavel_publica&#8221; faz parte do objeto e \u00e9 de escopo p\u00fablico.<\/p>\n<h3><strong>Heran\u00e7a via Object masquerading<\/strong><\/h3>\n<p>\u00c9 uma estrat\u00e9gia que  emula a heran\u00e7a, um construtor associa todas as propriedades e m\u00e9todos  (com o paradigma de declara\u00e7\u00e3o de Construtor) usando a keyword &#8220;<em>this<\/em>&#8221;  para o contexto interno do qual foi referenciado. Porque o construtor \u00e9  como uma fun\u00e7\u00e3o, voce pode montar o construtor de um objeto &#8220;A&#8221; dentro  de um m\u00e9todo de um objeto &#8220;B&#8221; e cham\u00e1-lo. O objeto &#8220;B&#8221; ent\u00e3o recebe as  propriedades e m\u00e9todos definidos no construtor de &#8220;A&#8221; porque o <em>this<\/em> agora aponta para o contexto do novo objeto.<\/p>\n<p>Cria o objeto que servir\u00e1 de base:<\/p>\n<pre lang=\"javascript\">function A(sColor) {\r\n    this.color = sColor;\r\n    this.sayColor = function () {\r\n        alert(this.color);\r\n    };\r\n}<\/pre>\n<p>Agora  eu crio o objeto chamado de &#8220;B&#8221; que herdar\u00e1 de &#8220;A&#8221;, quando eu chamo o  objeto &#8220;A&#8221;, ele \u00e9 referenciado ao contexto interno e o &#8220;<em>this<\/em>&#8221; passa a pertencer a &#8220;B&#8221;:<\/p>\n<pre lang=\"javascript\">function B(sColor, sName) {\r\n    this.newMethod = A;\r\n    this.newMethod(sColor);\r\n    delete this.newMethod;\r\n    this.name = sName;\r\n    this.sayName = function () {\r\n        alert(this.name);\r\n    };\r\n}<\/pre>\n<p>Ao executar essas senten\u00e7as:<\/p>\n<pre lang=\"javascript\">var objA = new ClassA('red');\r\nvar objB = new ClassB('blue', 'Nicholas');\r\nobjA.sayColor(); \/\/outputs 'red'\r\nobjB.sayColor(); \/\/outputs 'blue'\r\nobjB.sayName(); \/\/outputs 'Nicholas'\r\nalert(objB instanceof A ); \/\/false\r\nalert(objB instanceof B ); \/\/true<\/pre>\n<p>Temos as mesmas chamadas de A em B com emula\u00e7\u00e3o completa da heran\u00e7a.<\/p>\n<p>Como  perceberam, Object Masquerading suporta a implementa\u00e7\u00e3o de m\u00faltipla  heran\u00e7a, mas como se trata de uma estrat\u00e9gia de emula\u00e7\u00e3o, essa abordagem n\u00e3o define  o tipo do objeto que herda semelhante aos tipos herdados e portanto  falha ao tentar comparar pelo &#8220;<em>instanceof<\/em>&#8220;.<\/p>\n<h3><strong>Heran\u00e7a via m\u00e9todos call() e apply()<\/strong><\/h3>\n<p>Os m\u00e9todos globais <em>call<\/em> e <em>apply<\/em> (que todo objeto herda do objeto Global) s\u00e3o estrat\u00e9gias semelhantes ao  &#8220;Object Masquerading&#8221; e importam o contexto de um objeto ao outro.<\/p>\n<pre lang=\"javascript\">call(Objeto, argumento1, argumento2, ...)\r\napply(Objeto, array-de-argumentos)<\/pre>\n<p>Se diferenciam somente no quesito que se refere aos par\u00e2metros  passados, onde o m\u00e9todo call recebe uma sequencia de par\u00e2metros, enquanto o m\u00e9todo apply recebe um array de par\u00e2metros.<\/p>\n<pre lang=\"javascript\">function nome(sPrefixo, sSufixo) {\r\n    alert(sPrefixo + this.parametro_interno + sSufixo);\r\n};\r\nvar obj = new Object();\r\nobj.parametro_interno = 'Milfont';\r\nnome.call(obj, 'O ', ' \u00e9 o mais elegante. ');<\/pre>\n<p>Observe  que nesse exemplo a fun\u00e7\u00e3o &#8220;nome&#8221; est\u00e1 definida fora do objeto &#8220;obj&#8221; e  associa a propriedade parametro_interno a seu pr\u00f3prio contexto, utilizamos o m\u00e9todo  call para passar  o objeto &#8220;obj&#8221; ao contexto da fun\u00e7\u00e3o &#8220;nome&#8221; e a  sequ\u00eancia de par\u00e2metros esperados pelo seu construtor.<\/p>\n<p>A fun\u00e7\u00e3o apply se comporta da mesma maneira e difere apenas na execu\u00e7\u00e3o:<\/p>\n<pre lang=\"javascript\">nome.apply(obj, new Array('O ', ' \u00e9 o mais elegante. '));<\/pre>\n<p>Ao inv\u00e9s de passar os par\u00e2metros em sequ\u00eancia, passamos um array com a sequ\u00eancia desses par\u00e2metros.<\/p>\n<p>A vantagem do m\u00e9todo apply \u00e9 que toda fun\u00e7\u00e3o tem uma propriedade chamada <em>arguments<\/em> que herda do objeto Global e facilita a implementa\u00e7\u00e3o:<\/p>\n<pre lang=\"javascript\">function A(sNome) {\r\n    this.nome = sNome;\r\n    this.digaNome = function () {\r\n        alert(this.nome);\r\n    };\r\n}\r\n\r\nfunction B(sNome, sName) {\r\n    A.apply(this, arguments);\r\n    this.sobrenome = sName;\r\n    this.digaSobrenome = function () {\r\n        alert(this.sobrenome);\r\n    };\r\n}<\/pre>\n<p>Aqui  temos dentro da fun\u00e7\u00e3o &#8220;B&#8221; a chamada de &#8220;A&#8221; passando pelo m\u00e9todo apply  o contexto de &#8220;B&#8221; para o interior da fun\u00e7\u00e3o &#8220;A&#8221;, observe que repassa a  propriedade <em>arguments <\/em>que \u00e9 um array de argumentos recebidos.<\/p>\n<p>Executando, ter\u00edamos:<\/p>\n<pre lang=\"javascript\">var objA = new A('martins');\r\nvar objB = new B('Christiano', 'milfont');\r\nobjA.digaNome();  \/\/ 'martins'\r\nobjB.digaNome();  \/\/ 'Christiano'\r\nobjB.digaSobrenome(); \/\/ 'milfont'<\/pre>\n<h3><strong>Heran\u00e7a via <em>Prototype<\/em><\/strong><\/h3>\n<p>A  forma de heran\u00e7a atualmente reconhecida pela especifica\u00e7\u00e3o \u00e9 a <em>cadeia  de prot\u00f3tipos<\/em> ou <em>Prototype chaining<\/em>. Utilizando a propriedade <em>prototype<\/em> que todos os objetos herdam de Global, voce associa o contexto (m\u00e9todos  e propriedades) a outro objeto e o qualifica a ser do mesmo tipo do  objeto que ele est\u00e1 recebendo.<\/p>\n<pre lang=\"javascript\">function A() {}\r\nA.prototype.nome = 'red';\r\nA.prototype.digaNome = function () {\r\n    alert(this.nome);\r\n};\r\nfunction B() {}\r\nB.prototype = new A();<\/pre>\n<p>Aqui a fun\u00e7\u00e3o B recebe todos os m\u00e9todos e propriedades de A e passa a ser do tipo dela, executando ter\u00edamos:<\/p>\n<pre lang=\"javascript\">var objA = new A();\r\nvar objB = new B();\r\nobjA.nome = 'martins';\r\nobjB.nome = 'Christiano';\r\nobjA.digaNome(); \/\/ martins\r\nobjB.digaNome(); \/\/ Christiano\r\n\r\nalert(objB instanceof A); \/\/ true\r\nalert(objB instanceof B); \/\/ true<\/pre>\n<p>Formas h\u00edbridas podem ser usadas, mesclando esses m\u00e9todos na constru\u00e7\u00e3o dos objetos.<\/p>\n<h3><strong>Multipla heran\u00e7a<\/strong><\/h3>\n<p>Algumas linguagens orientadas a  objetos habilitam o suporte \u00e0 m\u00faltipla heran\u00e7a. Que \u00e9 a capacidade de  um objeto herdar as propriedades (m\u00e9todos e atributos) de mais de um  objeto. Al\u00e9m que esse objeto passa a ser da esp\u00e9cie dos objetos que ele  herda, como por exemplo:<\/p>\n<pre lang=\"javascript\">function Passaro(){\r\n    this.nome = 'papagaio';\r\n}\r\nfunction Produto(){\r\n    this.valor = 'R$10,00';\r\n}\r\n\r\nPassaro.prototype = new Produto;\r\nPassaro.prototype.imprimir = function(){\r\n    return this.valor + ' - ' + this.nome;\r\n}\r\n<\/pre>\n<p>Uma classe PetStore poderia realizar um teste se o periquito \u00e9 dos  tipos Produto e Passaro para aplicar medicamento adequado \u00e0 esp\u00e9cie por  exemplo, esse tipo de constru\u00e7\u00e3o \u00e9 comum em linguagens como C, \u00e9 simulado em Java por meio de interfaces.<\/p>\n<pre lang=\"javascript\">var passaro = new Passaro();\r\nalert(passaro instanceof (Produto)); \/\/ saida: true\r\nalert(passaro instanceof (Passaro)); \/\/ saida: true\r\nalert(passaro.imprimir()); \/\/ saida: \"R$10,00 - papagaio\"<\/pre>\n<p>Javascript n\u00e3o suporta m\u00faltipla heran\u00e7a pelo m\u00e9todo de prototype que \u00e9  o m\u00e9todo que define o tipo do objeto, existe entretanto como contornar  isso, um exemplo \u00e9 a biblioteca zInherit  (<a href=\"http:\/\/www.nczonline.net\/downloads\/\">http:\/\/www.nczonline.net\/downloads\/<\/a>) de Nicholas C. Zakas  (<a href=\"http:\/\/www.nczonline.net\/writing\/\">http:\/\/www.nczonline.net\/writing\/<\/a>), autor dos excelentes livros  &#8220;Professional Ajax&#8221; e &#8220;Professional JavaScript for Web  Developers&#8221;.<\/p>\n<p>Esse script acrescenta os m\u00e9todos inheritFrom e instanceOf ao objeto nativo Object.<\/p>\n<pre lang=\"javascript\">function Biologia(){\r\n    this.reino = 'animal';\r\n}\r\nfunction Produto(){\r\n    this.valor = 'R$10,00';\r\n}\r\nfunction Passaro(){\r\n    Produto.apply(this);\r\n    Biologia.apply(this);\r\n    this.nome = 'periquito';\r\n}\r\n\r\nPassaro.prototype.inheritFrom(Produto);\r\nPassaro.prototype.inheritFrom(Biologia);\r\nPassaro.prototype.imprimir = function(){\r\n    return this.reino + ' - ' + this.valor + ' - ' + this.nome;\r\n}\r\n\r\nvar passaro = new Passaro();\r\nalert(passaro.instanceOf(Produto)); \/\/saida : true\r\nalert(passaro.instanceOf(Biologia)); \/\/saida : true\r\nalert(passaro instanceof (Passaro)); \/\/saida : true\r\nalert(passaro.imprimir()); \/\/ saida: \"animal - R$10,00 - papagaio\"<\/pre>\n<p>O metodo apply() habilita a aplicar um m\u00e9todo de outro objeto no contexto de um objeto diferente.<\/p>\n<p>Os frameworks modernos como ExtJS e YUI tem suas formas de implementarem a m\u00faltipla heran\u00e7a. Uma das formas mais utilizadas pelos <a href=\"http:\/\/www.milfont.org\/tech\/2007\/10\/11\/frameworks-ajax\/\">Frameworks Ajax<\/a> \u00e9 copiarem os m\u00e9todos e vari\u00e1veis de um prot\u00f3tipo ao objeto que herdar\u00e1.<\/p>\n<p id=\"wqd26\">Typically chemist&#8217;s shop can sale to you with discreet treatments for various health problems. There are numerous of safe online pharmacies that will deliver medications to your address. There are divers medicines for each afflictions. Learn more about &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">viagra manufacturer coupon<\/a>&#8220;. Maybe &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">viagra discount coupons<\/a>&#8221; is a very much complicated matter. Matters, like &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">coupons for viagra<\/a>&#8220;, are coupled numerous types of health problems. If you need to take prescription medications, ask your dispenser to check your testosterone levels before. Sometimes the treatment options may include erectile disfunction remedies or a suction device that helps get an erection. Keep in mind web-site which is ready to sell erectile dysfunction drugs like Viagra without a recipe is fraudulent. When you purchase from an unknown web-site, you run the risk of getting counterfeit remedies. <\/p>\n<p><script type=\"text\/javascript\"> end26_(); <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Heran\u00e7a \u00e9 capacidade de um objeto reusar (herdar) os m\u00e9todos e propriedades de outro objeto. O modelo de orienta\u00e7\u00e3o a objetos baseado em prot\u00f3tipos, estabelece que um objeto serve de &#8220;molde&#8221; ou &#8220;base&#8221; (prot\u00f3tipo) para outro e a heran\u00e7a em javascript adiciona a propriedade global &#8220;instanceof&#8221; para definir se um objeto &#8220;\u00e9&#8221; do mesmo tipo [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,38,39,8],"tags":[61,81,372,82],"_links":{"self":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/26"}],"collection":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":2,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":1256,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/26\/revisions\/1256"}],"wp:attachment":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}