ES6之Class类知识点总结(十三)

时间:2022-12-26 00:37:08


好的文章就要分享出来,让更多的小伙伴看到、嗯、继续推荐阮一峰大神的ES6文章,真的很棒 ​

我们知道ES5及之前是没有类的概念的,生成实例的方法是通过构造函数,ES6引入了类的概念,通过class关键字,可以定义类

class Person{
constructor(name,job){
this.name = name;
this.job = job;
}
sayJob(){
console.log(`${this.name} is a ${this.job}`);
}
}
var person = new Person("leo","boss");
person.sayJob();//leo is a boss

嗯、分析一下上面的小例子

constructor方法就是构造方法,this关键字代表实例对象(此处就是person),该类中除了构造方法,还定义了一个sayJob方法。嗯、有两个注意点:

  • 定义类的方法的时候,前面不需要加function关键字
  • 方法之间不需要用逗号分隔(加了反而会报错)

使用类的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。类的所有方法都是定义在类的prototype属性上面,在类的实例上面调用方法,其实就是调用原型上的方法。

由于类的方法都是定义在prototype对象上面,所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。

class Person{
constructor(name,job){
this.name = name;
this.job = job;
}
sayJob(){
console.log(`${this.name} is a ${this.job}`);
}
}
Object.assign(Person.prototype,{toLike(){console.log(`${this.name} like running`)},toDo(){return this.job;}});
var person = new Person("leo","boss");
person.sayJob();//leo is a teacher
person.toLike();//leo like running
console.log(person.toDo());//boss

还是针对上面的例子,看下面的代码

console.log(typeof Person);//function
console.log(Person === Person.prototype.constructor);//true

从结果中可以得出结论:类的数据类型就是函数,类本身就指向构造函数

注意:类的内部定义的所有方法,都是不可以枚举的,与ES5一样,类的所有实例共享一个原型对象

类不存在变量提升

new fn(); // ReferenceError
class fn{}

fn类使用在前,定义在后面,会报错,因为类不存在变量提升

this指向问题

类的方法内部,如果含有this,它默认指向类的实例,但是必须非常小心,一旦单独使用该方法,很可能会报错

解决办法:

  • 在构造方法中绑定this
  • 使用箭头函数(箭头函数,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象)
  • 使用Proxy,获取方法的时候,自动绑定this。

Class继承

class可以通过extends关键字实现继承,子类通过extends关键字,可以继承父类的所有方法和属性,子类必须在constructor方法中调用super方法,它表示父类的构造函数,用来新建父类的this对象。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其加工,如果不调用super方法,子类就得不到this对象

注意:父类的静态方法也会被子类继承

class Person{
constructor(name,job){
this.name = name;
this.job = job;
this.sayJob = this.sayJob.bind(this);
}
sayJob(){
return `${this.name} is a ${this.job}`;
}
}
class Son extends Person{
constructor(name,job,city){
super(name,job,city);
this.city = city;
}
sayJob(){
return console.log(super.sayJob()+ ` living in ${this.city}`);
}

}
var son = new Son("leo","boss","beijing");
son.sayJob();//leo is a boss living in beijing

注意:在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,是基于对父类实例加工,只有super方法才能返回父类实例

判断一个类是否继承了另一个类的方法:Object.getPrototypeOf()(该方法可以从子类上获取父类)

console.log(Object.getPrototypeOf(Son)===Person);//true