Código simples Javascript para entender os princípios básicos de OOP baseados em protótipo [fechado]


8

Conheço o Javascript há algum tempo, embora não seja um usuário pesado, conheço o primeiro desde o momento em que o Netscape era meu navegador. Eu entendo muito bem as principais coisas, mas como a abordagem do JavaScript para OOP é prototípica, tenho algum problema em entender isso.

Um problema a acrescentar a isso parece que as coisas podem ser feitas de mais de uma maneira, e é aqui que os livros não ajudam muito porque põem todos os exemplos em cima da mesa, dificultando o ritmo.

O que eu preciso para iniciar é apenas uma maneira de fazer isso, se alguém puder me ajudar com o código mais simples possível, um exemplo em que eu possa ver como o modelo OOP prototípico funciona?

Para ser útil, o código deve ter um objeto herdado, para acessar a propriedade de um pai e suas propriedades herdadas e a função de um pai, substituir a função de um pai e ter uma instância de herança múltipla em que um objeto herda dois outros objetos.


Olá e um bem-vindo tardio aos programadores. Infelizmente, esta questão é explicitamente 5 perguntas e várias outras questões implícitas. Isso o torna muito fora de foco e provavelmente será fechado. Se você puder focar sua pergunta, isso poderá torná-la mais aceitável para as diretrizes do site. Tenha um bom dia.
World Engineer

@ WorldEngineer Eu acho que em outro idioma a maioria das respostas para a pergunta pontual 5 pode ser dada em uma ou poucas linhas. Infelizmente, não posso separar todas as cinco perguntas e perguntar uma a uma, ou posso? Isso é permitido?
Eduard Florinescu 17/08/2012

1
Faça uma pergunta de cada vez e, se tiver mais perguntas, faça-as como perguntas separadas, mas vinculadas.
ChrisF

1
@WorldEngineer Editei a pergunta para ser apenas uma #
Eduard Florinescu 17/08/2012

1
Aliás, uma coisa que a herança clássica errou é separar totalmente métodos e propriedades; em uma máquina de arquitetura Neumann (ARM, PowerPC, Intel), isso não faz sentido. Isso é algo que JS faz bem. E essas eram perguntas muito boas para ilustrar como o proto-oop funciona.
Aadaam 18/08/12

Respostas:


6

Como pode ser herdado um objeto?

function inherit(o){ // inherit is called Object.create in modern implementations
    var F= function(){};
    F.prototype=o;
    return new F();
}

var parent = {
    name: "Josh",
    print: function(){
       console.log("Hello, "+this.name);
    }
};
parent.print(); // Hello, Josh
var child = inherit(parent);
child.name = "Jeremy";
parent.print(); //Hello, Josh
child.print();  //Hello, Jeremy

Como posso ver a propriedade dos pais?

console.log(child.__proto__.name); //won't work in IE; also see getPrototypeOf

Como posso acessar a função dos pais?

Object.getPrototyepeOf(child).print(); // or
child.print.apply(parent) //functions are just objects, and 'this' pointer can point to wherever you want

Como posso substituir a função dos pais?

child.print = function(){
    console.log("Hi ", this.name);
}

parent.print(); //Hello, Josh
child.print();  //Hi, Jeremy

Como um objeto pode herdar dois objetos?

//in chain?

grandchild = inherit(child);

//otherwise, there's no way.
grandchild.name = "Eddie";
grandchild.print();

Veja também:


Editei porque a função F não possuía {} e o objeto possuía; (ponto e vírgula) em vez de (vírgula) agora não apresenta nenhum erro no console. Funciona e não sei por que agora parece tão simples. Um dos meus colegas também tem Boas Peças, mas, neste caso, seu exemplo ajudou mais. Obrigado.
Eduard Florinescu 17/08/2012

2

O especialista hilário @venkat_s compartilha uma analogia para compreender a herança prototípica.

Aqui está uma amostra de seu humor: "O problema do JavaScript é que ele não grita com você. É seu amigo. Ele não diz quando algo está errado, ele simplesmente para de funcionar. Pare de ligar para você"

Por herança, ele continuou: "O protótipo é como uma mochila - para o objeto. Para tudo o que é um objeto em JavaScript - ele tem uma mochila e você pode colocar coisas nele. E todos os seus objetos podem acessá-lo".

Espero que ajude.


Suponho que a mochila é o protótipo?
Eduard Florinescu

Sim, desculpas pela brevidade. Ele passou a expandir a analogia com a herança múltipla - "É como ter uma mochila e uma carteira.", "Você apenas coloca coisas em cada uma.", "Algumas vezes o erro na herança prototípica é que ... você pode perder sua carteira e você precisa recuperá-la. " Esse é o desafio que você pode enfrentar, mas é o padrão básico de design para resolver.
19612 Jack Stone

2

Esqueça o código. A explicação mais simples.

Construtores de funções constroem objetos. Em JS, funções são objetos que podem ter propriedades. Toda função possui uma propriedade prototype que pode conter qualquer objeto. Você pode definir qualquer protótipo de construtor facilmente em tempo real. Se você quiser arruinar matrizes, por exemplo,

Array.prototype = {
    oneTrueMethodToRuleThemAll: function(){
        alert('arrays are now hosed');
    }
}

O objeto prototype é basicamente um fallback que é verificado por instâncias quando você tenta fazer referência a uma propriedade que não possui. Se o objeto protótipo não tiver esse método, o objeto protótipo do construtor será verificado quanto ao método. Essa é a cadeia que é seguida.

Portanto, não se trata realmente de herança. É sobre, "Oh, você não tem isso, bem, sua mãe tem na bolsa de protótipo dela? Não? E a avó dela? Não? Então, que tal ... até chegarmos a Eve, ou o protótipo do construtor Object que é onde o dinheiro sempre para.

Portanto, não é o caso de suas instâncias captarem ou reterem o conteúdo do protótipo. É que quando o JavaScript chama o método de um objeto, existe um processo de fallback para verificar a cadeia object-> constructor.prototype para ver se o método desconhecido pode ser encontrado. E é por isso que quando você altera um protótipo de construtor, todas as instâncias existentes "obtêm" esse método. Eles realmente não recebem nada. É o conjunto de objetos substitutos para pesquisa que obtém o novo método.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.