A programação orientada a objetos em JavaScript – explicada com exemplos

JavaScript não é uma linguagem orientada a objetos baseada em classe. Mas ainda tem formas de usar programação orientada a objetos (OOP).

neste tutorial, vou explicar OOP e mostrar-lhe como usá-lo.

de Acordo com a Wikipédia, a programação baseada em classes

um estilo de programação orientada a Objeto (OOP), no qual a herança ocorre através da definição de classes de objetos, em vez de herança ocorrer através de objetos sozinho

O modelo mais popular da OOP é baseado em classes.mas como mencionei, JavaScript não é um langauge baseado em classe-é um langauge baseado em Protótipo.

de acordo com o documento do Mozilla:

a prototype-based language has the notion of a prototypical object, an object used as a template from which to get the initial properties for a new object.

dê uma olhada neste código:

let names = { fname: "Dillion", lname: "Megida"}console.log(names.fname);console.log(names.hasOwnProperty("mname"));// Expected Output// Dillion// false

A variável de objeto names só tem duas propriedades de fname e lname . Nenhum método.então de onde vem hasOwnProperty?

Well, it comes from the Object prototype.

Tente fazer login o conteúdo da variável para o console:

console.log(names);

Quando você expandir os resultados no console, você vai ter isso:

Notice the last property – __proto__? Tente expandindo-o:

Você verá um conjunto de propriedades sob o Object construtor. Todas estas propriedades vêm do protótipo GlobalObject. Se você olhar de perto, você também vai notar o nosso escondido hasOwnProperty .por outras palavras, todos os objectos têm acesso ao protótipo do Object. Eles não possuem essas propriedades, mas têm acesso às propriedades do protótipo.

the __proto__ property

This points to the object which is used as a prototype.

Esta é a propriedade em cada objeto que lhe dá acesso à propriedade Object prototype.

Cada objeto tem esta propriedade por padrão, a que se refere o Object Protoype exceto quando configurado o contrário (isto é, quando o objeto __proto__ é apontado outro protótipo).

modificando a__ proto _ _ propriedade

Esta propriedade pode ser modificada, afirmando explicitamente que deve se referir a outro protótipo. Para isso são utilizados os seguintes métodos:

Object.criar()

function DogObject(name, age) { let dog = Object.create(constructorObject); dog.name = name; dog.age = age; return dog;}let constructorObject = { speak: function(){ return "I am a dog" }}let bingo = DogObject("Bingo", 54);console.log(bingo);

No console, isso é o que você tem:

Aviso __proto__ propriedade e o speak método?

Object.create usa o argumento passado a ele para se tornar o protótipo.

nova palavra-chave

function DogObject(name, age) { this.name = name; this.age = age;}DogObject.prototype.speak = function() { return "I am a dog";}let john = new DogObject("John", 45);

john‘s __proto__ propriedade é direcionado para DogObject‘s protótipo. Mas lembre-se, DogObject‘s protótipo é um objeto (par de chave e valor), portanto, ele também tem uma __proto__ propriedade que se refere a global Object protoype.

Esta técnica é referida como uma coloração protótipo.

Observe que: new palavras-chave abordagem faz a mesma coisa que Object.create() mas só facilita como ele faz algumas coisas automaticamente para você.

e assim…

cada objeto em Javascript tem acesso aoObject‘s protótipo por padrão. Se configurado para usar outro protótipo, dizer prototype2, então prototype2 também gostaria de ter acesso ao protótipo do Objeto por padrão, e assim por diante.

Objeto + Combinação de Função

Você provavelmente está confuso com o fato de que DogObject é uma função (function DogObject(){}) e tem propriedades acessado com uma notação de ponto. Isto é referido como uma combinação de objeto de função.

Quando as funções são declaradas, por padrão são dadas um monte de propriedades anexadas a ele. Lembre-se que as funções também são objetos em tipos de dados JavaScript.

Now, Class

JavaScript introduced the class keyword in ECMAScript 2015. Faz o JavaScript parecer uma linguagem OOP. Mas é apenas açúcar sintático sobre a técnica de prototipagem existente. Ele continua sua prototipagem em segundo plano, mas faz com que o corpo exterior se pareça com o OOP. Vamos ver como isso é possível.

O exemplo seguinte é o uso geral de um class em JavaScript:

class Animals { constructor(name, specie) { this.name = name; this.specie = specie; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }}let bingo = new Animals("Bingo", "Hairy");console.log(bingo);

Este é o resultado na consola:

__proto__ referências Animals protótipo (o que, por sua vez, faz referência Object protótipo).

a Partir disso, podemos ver que o construtor define as principais características enquanto tudo o que fora o construtor (sing() e dance()) são as características de bônus (protótipos).

No plano de fundo, usando o new palavras-chave abordagem, acima traduz para:

function Animals(name, specie) { this.name = name; this.specie = specie;}Animals.prototype.sing = function(){ return `${this.name} can sing`;}Animals.prototype.dance = function() { return `${this.name} can dance`;}let Bingo = new Animals("Bingo", "Hairy");

Subclassificação

Este é um recurso em OOP, onde uma classe herda características de uma classe pai, mas possui recursos extras que o pai não.

A ideia aqui é, por exemplo, digamos que você queira criar uma gatos classe. Em vez de criar a classe A partir do zero – afirmando o nome, idade e propriedade da espécie de novo, você herdaria essas propriedades da classe de animais progenitores.

esta classe de gatos pode então ter propriedades extra como a cor dos bigodes.

Let’s see how subclasses are done with class.

Aqui, precisamos de um pai do qual a subclasse herda. Examine o código a seguir:

class Animals { constructor(name, age) { this.name = name; this.age = age; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }} class Cats extends Animals { constructor(name, age, whiskerColor) { super(name, age); this.whiskerColor = whiskerColor; } whiskers() { return `I have ${this.whiskerColor} whiskers`; }}let clara = new Cats("Clara", 33, "indigo");

Com o acima, obtemos os seguintes resultados:

console.log(clara.sing());console.log(clara.whiskers());// Expected Output// "Clara can sing"// "I have indigo whiskers"

Quando você registra o conteúdo da clara no console, temos:

Você vai notar que clara tem __proto__ propriedade que faz referência o construtor Cats e obtém acesso a whiskers() método. Este __proto__ propriedade também dispõe de uma __proto__ propriedade que faz referência o construtor Animals assim, obter acesso a sing() e dance()name e age são propriedades que existem em todos os objetos criados a partir desta.

Usando a tag Object.create método de abordagem, o que se traduz para:

function Animals(name, age) { let newAnimal = Object.create(animalConstructor); newAnimal.name = name; newAnimal.age = age; return newAnimal;}let animalConstructor = { sing: function() { return `${this.name} can sing`; }, dance: function() { return `${this.name} can dance`; }}function Cats(name, age, whiskerColor) { let newCat = Animals(name, age); Object.setPrototypeOf(newCat, catConstructor); newCat.whiskerColor = whiskerColor; return newCat;}let catConstructor = { whiskers() { return `I have ${this.whiskerColor} whiskers`; }}Object.setPrototypeOf(catConstructor, animalConstructor);const clara = Cats("Clara", 33, "purple");clara.sing();clara.whiskers();// Expected Output// "Clara can sing"// "I have purple whiskers"

Object.setPrototypeOf é um método que leva em dois argumentos – o objeto (primeiro argumento), e o desejado de um protótipo (segundo argumento).

do acima, a função Animalsdevolve um objecto com oanimalConstructor como protótipo. A função Cats devolve um objecto COM catConstructor como protótipo. catConstructor por outro lado, é dado um protótipo de animalConstructor.

Portanto, animais comuns só têm acesso a animalConstructor mas os gatos têm acesso a catConstructor e o animalConstructor.

encerrando

JavaScript alavanca a sua natureza protótipo para acolher os desenvolvedores do OOP no seu ecossistema. Ele também fornece formas fáceis de criar protótipos e organizar dados relacionados.

As línguas OOP verdadeiras não realizam prototipagem em segundo plano-basta tomar nota disso.

um grande agradecimento ao curso de Will Sentance no frontend Masters – JavaScript: as partes duras do JavaScript orientado a objetos. Eu aprendi tudo o que você vê neste artigo (mais um pouco de pesquisa extra) de seu curso. Devias ver.pode contactar – me no Twitter no iamdillion por quaisquer perguntas ou contribuições.obrigado pela leitura.