在一些传统的面向对象的语言当中(比如JAVA、C++等)都有类的概念,我们通过类来新建需要的对象。如果接触过面向对象的同学看到这篇文章将会觉得特别熟悉。
ES6之前
在ES6之前是没有“类”这个东西的,我们是通过构造函数来模拟“类”的实现:
function Person(opt){
this.name = opt.name;
this.age = opt.age;
}
实例方法是通过prototype
来进行添加:
Person.prototype.selfIntroduction = function(){
return `Hello,My name is ${this.name}, and i am ${this.age} years old.`;
};
*注意,上面return的字符串使用了ES6当中的反引号语法!
创建类-class
ES6为我们提供了创建类的方法,首先要认识的是class
关键字,如果使用class关键字来创建一个类就是这样:
class Person{
...
}
如果我想在class
当中初始化一些属性,那么需要写到constructor()
构造方法当中,这个方法当我们在新建对象之初就会被调用:
class Person{
constructor(opt){
this.name = opt.name;
this.age = opt.age;
}
}
let person = new Person({ name : “BlwooSky” });
可以看到,使用这种写法,对象初始化参数是通过传到了constructor()
当中来进行完成的。
下面我们再来为这个类添加一个方法:
class Person{
constructor(opt){
this.name = opt.name;
this.age = opt.age;
}
//“自我介绍"方法
selfIntroduction(){
return `Hello,My name is ${this.name}, and i am ${this.age} years old.`;
}
}
注意,各个方法之间已经不需要用逗号,来进行分隔了。
新建对象的方法则不变。
setter、getter
首先,什么是setter呢?setter是一种特殊的方法,这个方法是用来绑定一个对象的属性,方法里面则是改变属性的一些操作。什么时候你想改变这个属性了,那么就直接调用该方法就可以了。
getter也是同样,只不过它和setter相反,是用来获取对象属性。
使用set
和get关键字来创建setter和getter:
class Person {
constructor(opt) {
this.name = opt.name;
this.age = opt.age;
}
set info(opt) {
this.name = opt.name;
this.age = opt.age
}
get info() {
return Object.assign({}, this);
}
}
let person = new Person({
name: "BlwooSky",
age: 23
});
现在,我如果要再设置对象属性,那么可以这样来写:
person.info = {
name: "haha",
age: 44
};
获取信息可以这样获取:
console.log(person.info);
static静态方法
使用static
关键字可以定义静态方法:
class Person {
static sayHello(){
return `Hello Everyone`;
}
}
然后直接通过类调用即可:
Person.sayHello();
继承-extends
ES6之前的继承是通过原型链来完成:
//继承属性
function Student(opt){
Person.call(this,opt);
this.level = “high”;
}
//通过原型链继承方法
Student.prototype = new Person();
而现在我们可以直接通过extends来进行替代:
class Student extends Person{
constructor(){
this.level=`high`;
}
}
上面,我们让Student继承了Person,但它会报一个错误-this is not defined
。这是因为如果你想在子类的构建方法中使用this
关键字,那么必须要在使用this
之前使用super
关键字调用一下父类的构造方法,就像这样:
class Student extends Person{
constructor(){
super();
this.level=`high`;
}
}