I. Introdução
No desenvolvimento front-end moderno, a programação orientada a objeto JavaScript tornou-se popular. O ES6 introduz a palavra-chave class, que torna mais fácil para os desenvolvedores escrever código de maneira orientada a objetos, mais próxima da linguagem tradicional. A classe do ES6 pode ser considerada como um açúcar gramatical, e a maioria de suas funções pode ser alcançada pelo ES5.O novo método de escrita de classes apenas torna o método de escrita do protótipo de objeto mais claro e mais parecido com a sintaxe da programação orientada a objetos.
2. Definir e usar classe
Em JavaScript, a classe é uma maneira de criar objetos. Ela define um modelo de classe, que inclui a declaração de atributos e métodos. Na camada subjacente, o protótipo e a herança baseada em protótipo ainda são usados.
// ES5写法
function ShuiGuo(name, price){
this.name = name;
this.price = price;
}
// 添加方法
ShuiGuo.prototype.eat = function(){
console.log("吃水果啦!");
}
// 实例化对象
let shuiguo = new ShuiGuo("杨梅", 50);
console.log(shuiguo);
shuiguo.eat();
// ES6写法
class Fruit{
// 构造方法
constructor(name, price){
this.name = name;
this.price = price;
}
eat(){
console.log("吃水果啦!");
}
}
let fruit = new Fruit("西瓜", 50);
console.log(fruit);
fruit.eat();
No exemplo de código acima, definimos uma classe Fruit que possui um construtor e um método eat. Os construtores são usados para inicializar as propriedades de um objeto, enquanto os métodos são usados para definir o comportamento de um objeto. Através da palavra-chave new podemos criar uma instância da classe Fruit e chamar seus métodos.
- classe nome da classe {}, não escreva nome da classe classe () {}, não adicione parênteses.
- Não há necessidade de escrever uma vírgula entre o construtor construtor e o método come.
- Ao definir um método, escreva eat(){} diretamente em vez de eat:function(){}, sem dois pontos ou função.
Três, construtor construtor
Em uma classe, um construtor é um método especial usado para 初始化
instanciar propriedades e métodos ao criar um objeto. Ele pega os parâmetros passados para a classe e os usa para criar e inicializar os objetos da classe. O método construtor é o construtor padrão da classe.A palavra-chave constructor é fixa e não pode ser modificada à vontade.
Quando um objeto instanciado é criado, ele usa 自动调用
o método construtor para se inicializar, que é usado para inicializar propriedades e métodos ao instanciar o objeto. Quando uma instância de uma classe é criada usando new
a palavra-chave, o construtor é chamado 自动调用
. É um método padrão que será 自动
criado na classe se não for definido manualmente.
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
getArea() {
return this.width * this.height;
}
}
const rect = new Rectangle(5, 10);
console.log(rect.getArea()); // 输出: 50
在上述的代码示例中,Rectangle类有一个构造函数,它接受width和height参数,并将它们分别赋值给对象的width和height属性。
四、super关键字和extends关键字
function Food(type, price){
this.type = type;
this.price = price;
}
Food.prototype.eat = function(){
console.log("食物挺好吃!");
}
function Fruit(type, price, color){
Food.call(this, type, price);
this.color = color;
}
// 设置自己构造函数的原型
Fruit.prototype = new Food;
Fruit.prototype.constructor = Fruit;
Fruit.prototype.zhazhi = function(){
console.log("将水果榨汁喝!");
}
let fruit = new Fruit("西瓜", 50, "绿色");
console.log(fruit); //Fruit {type: '西瓜', price: 50, color: '绿色'}
fruit.eat(); //食物挺好吃!
fruit.zhazhi(); //将水果榨汁喝!
在类继承中,当子类需要在自己的构造函数中进行一些初始化操作时,可以使用super
关键字来调用父类的构造函数。确保子类实例继承了父类的属性,并且可以在子类中进行进一步的初始化操作。
extends
关键字实现了JavaScript中的类继承,让子类能够继承父类中的所有属性和方法,并且能够添加自己的属性和方法进行扩展。
class Food{
constructor(type, price){
this.type = type;
this.price = price;
}
// 父类的成员方法
eat(){
console.log("食物挺好吃!");
}
youzha(){
console.log("油炸食物挺好吃!");
}
}
class Fruit extends Food{
constructor(type, price, color){
super(type, price);
this.color = color;
}
eat(){
console.log("水果真好吃!"); //可以重写父类方法
super.eat(); //调用父类方法
}
zhazhi(){
console.log("将水果榨汁!");
super.eat(); //调用父类方法
}
}
let fruit = new Fruit("西瓜",50,"绿色");
console.log(fruit);
fruit.eat(); //水果真好吃! 食物挺好吃!
fruit.zhazhi(); //将水果榨汁! 食物挺好吃!
fruit.youzha(); //油炸食物挺好吃!
如上述代码所示,使用super(type, price)
调用父类的构造函数来初始化父类的属性,子类还有一个额外的属性color。子类Fruit使用extends
关键字继承了父类Food。fruit对象可以调用父类Food
的youzha方法,并且改写
eat方法。
五、Static静态方法和属性
function Fruit(){
}
Fruit.NAME = "水果";
Fruit.eat = function(){
console.log("水果真好吃!");
}
Fruit.prototype.type = "西瓜";
let fruit = new Fruit();
console.log(Fruit.NAME); //水果
console.log(Fruit.type); //undefined
Fruit.eat(); //水果真好吃!
console.log(fruit.type); //西瓜
console.log(fruit.NAME); //undefined
fruit.eat(); //Uncaught TypeError: fruit.eat is not a function
如上述代码所示,在函数中,NAME属性和eat方法是构造函数Fruit上的属性和方法,实例对象访问不到
,实例对象只能访问定义在函数原型上的type。只有构造函数自己才能访问到NAME属性和eat方法,但是访问不了定义在函数原型上的type。
class ShuiGuo{
static type = "西瓜";
static eat = function(){
console.log("水果真好吃!");
}
}
let shuiguo = new ShuiGuo();
console.log(ShuiGuo.type); //西瓜
ShuiGuo.eat(); //水果真好吃!
console.log(shuiguo.type); //undefined
shuiguo.eat(); //Uncaught TypeError: shuiguo.eat is not a function
在class中,可以使用static关键字定义静态方法。静态方法不需要实例化类就可以被调用,它们属于类本身而不是实例。可以通过类名去访问属性和方法,而实例对象访问不了。
六、getter和setter
在 JavaScript 的类中,我们可以使用 getter 和 setter 方法来定义属性的访问器。这允许我们在获取和设置属性值时执行自定义的逻辑。
Getter 方法用于获取属性的值,它被定义为一个没有参数的函数,并使用 get 关键字来声明。Getter 方法的命名通常与要获取的属性的名称相同。
Setter 方法用于设置属性的值,它被定义为一个带有一个参数的函数,并使用 set 关键字来声明。Setter 方法的命名通常与要设置的属性的名称相同。
class Fruit{
get type(){
console.log("type属性被读取了!");
return "西瓜";
}
set type(newVal){
console.log("type属性被修改了!");
}
}
let fruit = new Fruit();
console.log(fruit.type); //type属性被读取了! 西瓜
fruit.type = "杨梅"; //type属性被修改了!
如上述代码所示,getter里的返回值就是读取fruit.type时的输出值。
七、最后的话
通过class关键字,我们可以更方便地使用面向对象的方式编写代码。constructor构造函数用于初始化对象的属性,super关键字用于调用父类的构造函数或方法。静态方法和静态属性属于类本身而不是实例,可以直接通过类名进行调用。通过灵活运用这些特性,我们可以更好地组织和管理前端代码。
能力一般,水平有限,本文可能存在纰漏或错误,如有问题欢迎大佬指正,感谢你阅读这篇文章,如果你觉得写得还行的话,不要忘记点赞、评论、收藏哦!祝生活愉快!