Turma Online 28 - Imersão JavaScript | Semana XX | 2023 | Professora Analu Sampaio
Eu sou desenvolvedora back-end, professora de programação e JUG Community Manager no Devs JavaGirl
Fui da primeira turma de Back-End da Reprograma Hoje trabalho como Engenheira de Software no Banco Itaú.
- 💌 Email: sampaioaanaluiza@gmail.com
- 📸 Instagram: @analu.io
- 🐤 Twitter: @analupontoio
- 💼 LinkedIn: in/sampaioaanaluiza
- 👩💻 Github:/analuizasampaio
Antes de começar, vamos organizar nosso setup.
- Fork esse repositório
- Clone o fork na sua máquina (Para isso basta abrir o seu terminal e digitar
git clone url-do-seu-repositorio-forkado
) - Entre na pasta do seu repositório (Para isso basta abrir o seu terminal e digitar
cd nome-do-seu-repositorio-forkado
)
- Introduzir o conceito de paradigma de programação;
- Entender o que são classes e objetos e qual é a diferença entre os dois conceitos.
O que veremos na aula de hoje?
function Aluna(name, grade) {
this.name = name
this.grade= grade
this.sayName = function() {
console.log(name)
}
}
const aluna1= new Aluna('Camila', 'On25')
const aluna2= new Aluna('Amanda', 'On28')
aluna1.sayName() // logs 'Camila'
aluna2.sayName() // logs 'Amanda'
Object.getPrototypeOf(aluna1) === Aluna.prototype // returns true
Object.getPrototypeOf(aluna2) === Aluna.prototype // returns true
- Você consegue verificar o prototype de um objeto usando a função
Object.getProtypeOf()
no objeto, comoObject.getPrototypeOf(aluna1)
- o resultado dessa função retorna as propriedades do
.prototype
do objeto construtor
O objeto herda e tem acessos metodos e propriedades do seu prototype
Aluna.prototype.sayHello = function() {
console.log("Hello, world!");
}
aluna1.sayHello() // logs "Hello, world!"
aluna2.sayHello() // logs "Hello, world!"
function Pessoa(name) {
this.name = name
}
Pessoa.prototype.sayName = function() {
console.log(`Hello, I'm ${this.name}!`)
}
function Aluna(name, grade) {
this.name = name
this.grade = grade
}
Aluna.prototype.getGrade = function() {
console.log(`My grade is '${this.grade}'`)
}
aluna1.sayName() //error
Object.getPrototypeOf(Aluna.prototype) // returns Object.prototype
// Now make `Aluna` objects inherit from `Pessoa`
Object.setPrototypeOf(Aluna.prototype, Pessoa.prototype)
Object.getPrototypeOf(Aluna.prototype) // returns Pessoa.prototype
const aluna1= new Aluna('Camila', 'On25')
const aluna2= new Aluna('Amanda', 'On28')
aluna1.sayName() // Hello, I'm Camila!
aluna2.sayName() // Hello, I'm also steve!
aluna1.getGrade() // My grade is 'On25'
aluna2.getGrade() // My grade is 'On28'
Apresentado no ES6, não é o mesmo que as classes em Orientação à Objetos, nem o que você pode encontrar no Java ou Ruby, por exemplo. Muito a colocam como uma Syntatic Sugar
(uma forma mais fácil de escrever algo sem nenhum acréscimo de função) dos construtores baseados em prototype. Fazendo basicamente o mesmo que os construtores e prototype que foram visto na semana passada.
Todo
prototype
herda doObject.prototype
O Objeto deObject.getPrototypeOf()
dever ser somente um unicoprototype
Object.prototype
String.prototype
Number.prototype
Array.prototype
Prototype é uma característica dos Objetos na linguagem JavaScript. Apesar de apresentar comportamentos de herança e em seu uso aparecerem palavras reservadas como class
, o Prototype não faz parte do paradigma de programação orientada à objetos por si só, ele é parte da arquitetura core do JavaScript, sendo assim uma característica dos Objetos na linguagem.
Ele fica exatamente entre o que é Objeto para o JavaScript e a OOP em si, por isso é uma boa forma de introduzir os conceitos mesmo antes que você saiba a parte teórica de Orientação à Objetos.
Desenvolvido com 💜 por analu.io