Palavra-chave da classe em Javascript
de acordo com este artigo deve ser uma forma JavaScript 2.0 de definir classe. No entanto, nunca vi isso na prática. Assim, a questão. Como usar a palavra-chave de classe e qual é a diferença entre Javascript 1.x maneira de fazer as coisas?
7 answers
A razão pela qual você nunca viu a palavra-chave class
usada na prática é que todas as implementações atuais do JavaScript são 1.x.
O JavaScript 2.0 foi incorporado ao ECMAScript 4, que era bastante impopular e por isso nunca chegou ao mundo real.
Para responder à sua pergunta, como é que usa a palavra-chave class
? Não podes.
Eu sei que este é um post antigo, mas a partir de hoje i. e. Com o advento de ECMAScript 6 podemos declarar classes javascript.
A sintaxe é a seguinte:
class Person{
constructor(name){
this.name = name;
}
printName(){
console.log('Name is '+this.name);
}
}
var john = new Person('John Doe');
john.printName(); // This prints 'Name is John Doe'
Um guia completo para isto pode ser encontrado em este post
Você ainda pode construir aulas em JS, é claro, usando protótipo!
var foo = function() {
this.hurrah = "yay!";
return this;
}
foo.prototype.doit() {
alert(this.hurrah);
}
Se você tem um fundo Java ou C#, Aqui está como definir uma classe em JavaScript
var MyClass = function (f, l){//constructor
//private members
var firstName = f,
lastName = l,
fullName = function () { //fullName is a private function
return firstName + " " + lastName;
};
return {
//public members
getFullName: fullName
};
}
var output = document.getElementById('Output'); //<div id="Output"></div>
var myName = new MyClass("First", "Last");
output.innerHTML = myName.getFullName();
Só para adicionar a forma ECMA5 de fazer Classe.
Note que não tem uma função de construtor desta forma (mas pode activar uma função init se quiser)
var Class = {
el: null,
socket: null,
init: function (params) {
if (!(this.el instanceof HTMLElement)) {
throw new Error('Chat room has no DOM element to attach on.');
}
return this.doStuff();
},
doStuff: function (params) {
return this;
}
};
var instanceofClass = Object.create(Class, {
el: {
value: document.body.querySelector('.what ever')
},
someMoreData: {
value: [0,5,7,3]
}
}).init();
*edit moved description out of code block
Resumo
Em ES6
foi introduzida a palavra-chave class
. A palavra-chave class
não é mais do que açúcar sintático em cima do padrão de herança prototípica já existente. Classes em javascript é basicamente uma outra maneira de escrever funções de construtor que pode ser usado para criar um novo objeto usando a palavra-chave new
.
Exemplo
class Person {
constructor(name) {
this.name = name;
}
talk() { console.log('hi'); }
}
const me = new Person('Willem');
console.log(typeof Person)
// logs function, Person class is just another constructor function under the hood
console.log(me.__proto__ === Person.prototype)
// logs true, classes just use the same prototypal inheritance pattern which is used by constructor functions.
// An object created with the new keyword gets a __proto__ property on it which is a reference to the prototype property on a constructor function.
Na amostra acima pode observar-se no primeiro registo que: classes criar a partir da palavra-chave class
realmente são funções sob o capô.
console.log(typeof Person) // logs 'function'
es6
classes usam o mesmo padrão de herança prototípica que é usado por funções construtoras. Aqui está outro exemplo para demonstrar este comportamento:
class Dog {
constructor (name) {
this.name = name;
}
bark () { console.log('bark') };
}
let doggie = new Dog('fluffy');
doggie.bark(); // logs bark
Dog.prototype.bark = () => console.log('woof');
// changing the prototype of Dog, doggie refers to this with its __proto__ property.
//Therefore doggie bark method has also changed.
doggie.bark(); // logs woof
O takeaway no exemplo acima é que o método da casca de qualquer instância do cão pode ser alterado no tempo de execução. Isto é porque o método do bark de qualquer objeto criado com a classe do cão é estou a referir-me a esta função.