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还有很多高级用法,需要不断学习和实践。