概述
ES6中提供了更接近面向对象(注意:javascript本质上是基于对象的语言)语言的写法,作为对象的模板引入了class (类),通过 class 关键字定义类。
class 的本质是 function。
它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
类的基本语法
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${this .name} like smile`
}
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(bobi);
// 调用方法
console.log(bobi.kill());
- 上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,ES5的构造函数Baby,对应ES6的Baby类的构造方法。
- 可以看到上面Baby类除了构造方法,还定义了一个kill方法,注意,在定义类的方法时,不需要加function这个关键字,把定义放进去就可以,另外方法间不要加逗号,加了会报错。
可以看到,在这里编辑器直接报错了 - 需要注意的是我们的还需要使用new方法在来使用类,和ES5之前不同;
var bobi = new Baby("bobi", 1);//这里正常
var lilm = Baby("lilm", 2)// Uncaught TypeError: Class constructor Baby cannot be invoked without 'new'
我们需要注意,一定要避免在项目中在不使用new方法的时候去使用类;
4. 还需要注意的一点是我们不要重复声明类,会报错
class MM {}
class MM {}
不可以重复声明
5. 类定义不会被提升,这意味着,必须在访问前对类进行定义,否则就会报错。
6. 类是不可以枚举的
for (var key in Baby) {
console.log(key); // 没有任何内容打印出来
}
constructor 方法
constructor 方法是类的默认方法,返回对创建此对象的数组函数的引用。一个类必须有constructor方法,如果没有显式定义,默认会添加一个空的constructor方法。
constructor 方法默认返回实例对象,但是当constructor方法返回一个复杂类型的时候,可以改变。
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
// return 111; //返回Baby {name: "bobi", age: 1}
// return "asdfasd"; //返回Baby {name: "bobi", age: 1}
// return false; //返回Baby {name: "bobi", age: 1}
// return [1, 2] //返回[1,2]
// return {
// name: "111"
// } //返回{name:"111"}
return function fn() {
console.log(11);
} //返回函数
}
kill() {
return `${this .name} like smile`
}
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(bobi);
Constructor与普通构造函数的区别: 类的构造函数,不使用new是没法调用的,会报错。这是它跟普通构造函数的一个主要区别,后者不用new也可以执行。
上面有演示这里就不在演示;
static 关键字
类(class)通过 static 关键字定义静态方法。不能在类的实例上调用静态方法,而应该通过类本身调用。
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${this .name} like smile`
}
static mama = "lucy"
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(Baby.mama);
console.log(bobi.mama);
只有当类本身调用的时候才可以使用,new出来的实例化对象调用为underfined;
- 静态方法调用同一个类中的其他静态方法,可使用 this 关键字
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${this .name} like smile`
}
static mama = "lucy";
static father = this.mama + " honey"
}
console.log(Baby.father);//lucy honey
- 非静态方法中,不能直接使用 this 关键字来访问静态方法。而是要用类名来调用;
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
console.log(Baby.mama);
console.log(this.constructor.father);
//this指向新new出来的对象 this.constructor指向类
console.log(this.constructor);
}
kill() {
return `${this .name} like smile`
}
static mama = "lucy";
static father = this.mama + " honey"
}
var boby = new Baby("boby", 1)
总结
本篇文章就到这里,有补充欢迎评论区补充,如果有帮助,欢迎点赞~