1. class类
1. 类的由来: JavaScript 语言中,生成实例对象的传统方法是通过构造函数。下面是一个例子。
例:摘自阮老师
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
2. ES6中的类:引入了
Class
(类)这个概念,作为对象的模板。通过class
关键字,可以定义类。
基本上,ES6 的class
可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class
写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class
改写,就是下面这样。
例:
class Point {
constructor(x, y) {//构造方法(函数), 调用new,自动执行
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
上面代码定义了一个“类”,可以看到里面有一个
constructor
方法,这就是构造方法,调用new
之后自动执行,而this
关键字则代表实例对象。也就是说,ES5 的构造函数Point
,对应 ES6 的Point
类的构造方法。
Point
类除了构造方法,还定义了一个toString
方法。注意,定义“类”的方法的时候,前面不需要加上function
这个关键字,直接把函数定义放进去了就可以了,这就是ES6对象的简洁语法。另外,方法之间不需要逗号分隔,加了会报错。
3. getter方法和setter方法
- 与 ES5 一样,在“类”的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
例:
class Person{
constructor(){
}
get aaa(){
return `aaa的属性`;
}
set aaa(val){
console.log(`设置aaa属性,值为:${val}`);//设置aaa的属性,值为123
}
}
let p1 = new Person();
p1.aaa='123';
console.log(p1.aaa);//aaa的属性
4. 静态方法
- 如果在一个方法前,加上
static
关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
例:静态方法
class Person{
constructor(){
}
showName(){
return '这是showName方法';
}
static aaa(){
return '这是静态方法';
}
}
let p1 = new Person();
console.log(p1.showName());//这是showName方法
console.log(Person.aaa());//这是静态方法
2.类的继承
1.ES5中的继承: 利用原型链实现。
例:
//父类
function Person(name){
this.name = name;
}
Person.prototype.showName = function(){
return `名字是: ${this.name}`;
};
//子类
function Student(name,skill){
Person.call(this,name); //继承属性
this.skill = skill;
}
Student.prototype = new Person(); //继承方法
//调用
let stu1 = new Student('Strive','逃学');
console.log(stu1.showName());
2.ES6中的继承: 利用关键字
extends
,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。
例:
//父类
class Person{
constructor(name){
this.name = name;
}
showName(){
console.log('父类showName');
return `名字为: ${this.name}`;
}
}
//子类
class Student extends Person{
constructor(name,skill){
super(name);
this.skill = skill;
}
showName(){
super.showName(); //父级的方法执行
//TODO 做子级事情
console.log('子类里的showName');
}
showSkill(){
return `哥们儿的技能为: ${this.skill}`;
}
}
//调用
let stu1 = new Student('Strive','逃学');
console.log(stu1.showName());
- 注意: 如果子类当中想继承父类的方法与属性,要用关键字
super
,它既可以当作函数使用,也可以当作对象使用。当作函数使用时,只能用在constructor
里面,当作对象时,可以用在子类自定义的方法里面。super
作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。