欢迎光临

木子屋

标题: ES6学习笔记：class类与继承

作者: dnawo

日期: 2022-07-31 02:21 PM

分类: 脚本语言

内容: ES6的class只是让对象原型的写法更加清晰、更像面向对象编程的语法而已，它的绝大部分功能，ES5都可以做到。实际上，ES6的class可以看作只是一个语法糖。
1、实例属性和实例方法
复制内容到剪贴板 程序代码class People{
//构造函数
constructor(name,age){
//实例属性
this.name = name;
this.age = age;
}
//实例方法
toString(){
return `${this.name},${this.age}`;
}
}
var p = new People('zhang san', 29);
console.log(p.name);
console.log(p.age);
console.log(p.toString());
2、取值函数和存值函数(getter/setter)
复制内容到剪贴板 程序代码class People{
//私有属性
#age = 0;
get age(){
return this.#age;
}
set age(value){
if(value>0 && value<=100){
this.#age = value;
}else{
throw 'error age.'
}
}
}
var p = new People();
p.age = 29;
console.log(p.age);
注意：getter和setter内部不能使用this.age，否则会出现递归陷入死循环：
引用内容//Firefox
Uncaught InternalError: too much recursion
//Chrome & Edge
Uncaught RangeError: Maximum call stack size exceeded
3、静态属性和实例方法
复制内容到剪贴板 程序代码class People{
//静态属性
static name = 'zhang san';
static age = 29;
//静态方法
static toString(){
return `${this.name},${this.age}`; //this指的是类，不是实例
}
}
console.log(People.name);
console.log(People.age);
console.log(People.toString());
4、ES6类的继承
复制内容到剪贴板 程序代码class Person extends People{
constructor(){
//调用父类构造函数
super('zhang san', 29);
}
}
var p = new Person();
console.log(p.name);
console.log(p.age);
console.log(p.toString());
注意：子类构造函数一定要调用一下父类构造函数，否则运行会出错：
引用内容//Firefox
Uncaught ReferenceError: must call super constructor before using 'this' in derived class constructorr
//Chrome & Edge
Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

+ 查看当前日志评论 (0)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.469 ms

返回

标题: ES6学习笔记：class类与继承

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.469 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.500 ms

返回