淘先锋技术网

首页 1 2 3 4 5 6 7

Javascript是一门与HTML和CSS紧密关联的编程语言,作为一名开发人员无法不会JS。而在JS中,class(类)是面向对象编程的基础,是一个关键的概念。那么,在JS中如何调用class呢?

要调用一个class,我们需要使用“new”关键字新建一个类的实例。这个新建的实例可以使用类中的方法和属性。

class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
greeting(){
console.log(<code>Hello, my name is ${this.name}. I am ${this.age} years old.</code>);
}
}
let personA = new Person("Peter", 25);
personA.greeting(); // 输出 "Hello, my name is Peter. I am 25 years old."

在上述代码中,我们定义了一个Person类,该类有两个属性:name和age。同时它还有一个greeting方法,用来打招呼。在第六行中我们使用new关键字创建了一个personA实例,然后用该实例执行了greeting方法。

在JavaScript中,可以继承一个类,使子类获得父类的属性和方法。当子类创建一个实例时,它可以使用父类和自身的方法和属性。下面是一个Animal和Dog的例子。

class Animal{
constructor(name){
this.name = name;
}
eat(){
console.log(<code>${this.name} is eating.</code>);
}
}
class Dog extends Animal{
constructor(name, breed){
super(name);
this.breed = breed;
}
bark(){
console.log(<code>${this.name}(${this.breed}) is barking.</code>);
}
}
let dogA = new Dog("Jack", "Golden Retriever");
dogA.bark(); // 输出 "Jack(Golden Retriever) is barking."
dogA.eat(); // 输出 "Jack is eating."

在上面的代码中,我们创建了一个Animal类和一个继承自Animal的Dog类。Dog类有一个额外的属性breed和一个bark方法。在Dog类的构造函数中,super关键字调用了Animal父类的构造函数,以便创建一个Animal实例。在第九行中我们使用了一个新的关键字extends以实现继承。

在JS中,class也可以使用getter和setter方法,来获取和设置属性的值。getter和setter方法可以让我们创建用起来像属性一样的方法。

class Rectangle{
constructor(width, height){
this._width = width;
this._height = height;
}
get area(){
return this._width * this._height;
}
set width(newWidth){
this._width = newWidth;
}
}
let rectA = new Rectangle(5, 10);
console.log(rectA.area); // 输出 50
rectA.width = 7;
console.log(rectA.area); // 输出 70

在上面的代码中,我们创建了一个Rectangle类,它有一个构造函数,两个属性_width和_height。但是这两个属性前都有一个下划线,这样做是因为我们希望属性可以被get和set方法访问,我们需要在类中定义get和set方法。area方法使用get来获取长方形面积,width方法使用set来设置长方形的宽度。由于area和width方法都可以像属性一样访问,这使得代码变得更加简单易懂。

在JavaScript中,通过利用class,我们可以创建出更加复杂、功能更加强大的程序。这篇文章仅仅是一个JS class的简单介绍,class还有很多高级用法,需要不断学习和实践。