说明
JavaScript 语言的传统方法是通过构造函数定义井生成新对象。
ES6中引入了class的概念，通过class关键字自定义类。
类的定义
可以通过constructor关键字进行声明构造函数
class User { //构造函数 constructor(name, age = 20) { this.name = name; //添加属性并赋值 this.age = age; } }
也可以添加自定义方法，同样也能添加静态方法
class User { //构造函数 constructor(name, age = 20) { this.name = name; //添加属性并赋值 this.age = age; } //自定义方法 sayhi = () => { return "hello"; } //静态方法 static isAdult(age) { if (age < 18) { return "我是未成年人"; } return "我是成年人"; } }
我们对上面类进行对象的创建与打印当前对象
// 测试 let user = new User("张三", 21); console.log(user); // 输出: {name: "张三", age: 20} // 自定义方法的使用 console.log(user.sayhi()); // 输出: hello // 静态方法的使用 console.log(User.isAdult(17)); // 输出: 我是未成年人
类继承
在ES6中的类也能实现继承
例如我们对上面的User进行继承
class Lisi extends User { constructor() { super("张三", 30); //如果父类中的构造方法有参数，那么子类必须通过super调用父类的构造方法 this.address = "上海"; //设置子类中的属性，位置必须处于super下面 } }
我们对上面的继承类进行对象的创建与打印当前对象
let person2 = new Lisi(); // console.log(person2.name, person2.address); // 输出：张三 上海 console.log(person2.sayhi()); //调用父类中的方法 ,输出: hello console.log(Lisi.isAdult(20));//调用父类的静态方法 , 输出: 成年人
代码案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ES6新特性学习-(12)-class （类）的基本语法</title> </head> <body> <h2> JavaScript 语言的传统方法是通过构造函数定义井生成新对象。 ES6中引入了class的概念，通过class关键字自定义类。 </h2> <script> class User { //构造函数 constructor(name, age = 20) { this.name = name; //添加属性并赋值 this.age = age; } //自定义方法 sayhi = () => { return "hello"; } //静态方法 static isAdult(age) { if (age < 18) { return "我是未成年人"; } return "我是成年人"; } } // 测试 let user = new User("张三", 21); console.log(user); // 输出: {name: "张三", age: 20} // 自定义方法的使用 console.log(user.sayhi()); // 输出: hello // 静态方法的使用 console.log(User.isAdult(17)); // 输出: 我是未成年人 // 类继承 class Lisi extends User { constructor() { super("张三", 30); //如果父类中的构造方法有参数，那么子类必须通过super调 用父类的构造方法 this.address = "上海"; //设置子类中的属性，位置必须处于super下面 } } // 测试 let person2 = new Lisi(); // console.log(person2.name, person2.address); // console.log(person2.sayhi()); //调用父类中的方法 ,输出: hello console.log(Lisi.isAdult(20));//调用父类的静态方法 , 输出: 成年人 </script> </body> </html>
