1. 类的基本定义
class Person {
// 构造函数
constructor(name, age) {
this.name = name; // 成员变量
this.age = age;
}
// 类方法
printInformation(){
console.log(`name: ${
this.name}; age: ${
this.age}`);
}
}
var person = new Person("Micheal", 18);
console.log(person.name, person.age); // Micheal 18
person.printInformation(); // name: Micheal; age: 18
-
带默认参数的构造函数
class Person { // 带默认参数的构造函数 constructor(name, age=18) { this.name = name; // 成员变量 this.age = age; // age 的默认值为18 } } var person1 = new Person("Micheal"); console.log(person1.name, person1.age); // Micheal 18 var person2 = new Person("Tom", 20); console.log(person2.name, person2.age); // Tom 20
2. 类的成员变量
-
公有成员变量：
class Person { // 带默认参数的构造函数 constructor(name, age=18) { this.name = name; // 默认为公有成员变量 this.age = age } score = 80; // 公有类成员变量，使用 this.score 方法调用 // 类方法 printInformation(){ console.log(`name: ${ this.name}; age: ${ this.age}; score: ${ this.score}`); } } var person = new Person("Micheal"); console.log(person.name, person.age, person.score); // Micheal 18 80 person.printInformation(); // name: Micheal; age: 18; score: 80 -
私有成员变量：
class Person { // 带默认参数的构造函数 constructor(name, age=18) { this.name = name; // 默认为公有成员变量 this.age = age } #score = 70; // 私有成员变量(使用#开头)，使用 this.#score 方法调用 // 类方法 printInformation(){ console.log(`name: ${ this.name}; age: ${ this.age}; score: ${ this.#score}`); } } var person = new Person("Micheal"); console.log(person.name, person.age); // Micheal 18 // console.log(person.#score); // error; 不可访问类内的私有变量 person.printInformation(); // name: Micheal; age: 18; score: 70 -
静态成员变量：
class Person { // 带默认参数的构造函数 constructor(name, age=18) { this.name = name; // 默认为公有成员变量 this.age = age } static score = 90; // 静态成员变量(使用static 开头)，使用 类名.变量名 调用 // 类方法 printInformation(){ console.log(`name: ${ this.name}; age: ${ this.age}; score: ${ Person.score}`); } } var person = new Person("Micheal"); console.log(person.name, person.age); // Micheal 18 console.log(person.score, Person.score); // undefined 90 person.printInformation(); // name: Micheal; age: 18; score: 70
3. 类的成员方法
-
get 和 set 方法
class Person { // 带默认参数的构造函数 constructor(name, age=18) { this.name = name; // 默认为公有成员变量 this.age = age } // get method get myage() { return this.age; } // set method set myage(age) { this.age = age; } } var person = new Person("Micheal"); console.log(person.name, person.age); // Micheal 18 // 直接改变量 person.age = 20; console.log(person.name, person.age); // Micheal 20 // 使用 set 方法改变量 person.myage = 30; person.myage(50); // error； Uncaught TypeError: person.myage is not a function console.log(person.name, person.age); // Micheal 30 // 使用 get 方法获取变量 console.log(person.myage); // 30 console.log(person.myage()); // error, Uncaught TypeError: person.myage is not a function -
公有方法
class Person { // 带默认参数的构造函数 constructor(name, age=18) { this.name = name; // 默认为公有成员变量 this.age = age } method1(para1, para2, para3="default avlue"){ console.log(para1, para2, para3); } method2 = function(para1, para2=0){ console.log(para1, para2); return para1 + para2; } } var person = new Person("Micheal"); person.method1(1, 2); // 1 2 'default avlue' person.method1(1, 2, 3); // 1 2 3 person.method2(1); // 1 0 person.method2(1, 2); // 1 2 -
私有方法
class Person { // 带默认参数的构造函数 constructor(name, age=18) { this.name = name; // 默认为公有成员变量 this.age = age } // 私有方法， 以 # 开头 #method1(para){ console.log("调用了私有方法", para); } method2(){ this.#method1("123"); } } var person = new Person("Micheal"); // person.#method1(1); // error, Uncaught SyntaxError person.method2(); // 调用了私有方法 123 -
静态方法: 静态方法调用直接在类上进行，不能在类的实例上调用。
class Person { // 带默认参数的构造函数 constructor(name, age=18) { this.name = name; // 默认为公有成员变量 this.age = age } // 公有方法 method2(){ console.log("公有方法"); } // 静态方法, 采用 类名.方法名调用 static method3(para){ console.log("调用了静态方法", para); } } var person = new Person("Micheal"); person.method2(); // 调用了私有方法 123 // person.method3(); // error, Uncaught TypeError Person.method3("123"); // 调用了静态方法 123
4. 类的静态区域
class MyClass {
static field1 = console.log("static field1");
// 静态代码块
static {
console.log("static block1");
};
static field2 = console.log("static field2");
static {
console.log("static block2");
};
}
// 执行顺序
// 'static field1'
// 'static block1'
// 'static field2'
// 'static block2'
5. 类的继承
class Rect{
constructor(width, height){
this._width = width;
this._height = height;
}
area(){
return this._width * this._height;
}
discribe(){
console.log(`宽：${
this._width}; 高：${
this._height}`);
}
rectMethod(){
console.log("矩形类的特有方法");
}
}
class Square extends Rect{
constructor(length){
super(length, length);
this._length = length;
}
area(){
return this._length * this._length;
}
discribe(){
super.discribe(); // 调用父类方法
console.log(`边长为: ${
this._length};`);
}
squareMethod(){
console.log("正方形类的特有方法");
}
}
var r = new Rect(2, 3);
console.log(r.area()); // 6
r.discribe(); // 宽：2; 高：3
var s = new Square(5);
console.log(s.area()); // 25
s.discribe(); // 宽：5; 高：5 \n 边长为: 5; 边长为: 5;
s.rectMethod(); // 矩形类的特有方法
s.squareMethod(); // 正方形类的特有方法