JavaScript类
JavaScript类
- 1 类声明
- 2 为什么说它是语法糖
- 3 类包含的属性和方法
-
- 3.1 类的构造函数
- 3.2 类的方法
- 3.3 类的静态方法
- 3.4 类的私有方法
- 3.5 取值函数（getter）和存值函数（setter）
- 4 类的继承
-
- 4.1 通过extends实现继承
- 4.2 super方法
- 5 其他
-
- 5.1 方法中的this指向
- 5.2 区分是否继承了这个类
以前都是通过构造函数function和原型prototype来实现类的效果，在ES6中新增了class关键字用来定义类，使用class关键字定义类的写法更加清晰，更像面向对象的语法。但是可以看作是语法糖，因为它还是构造函数和原型的概念。
1 类声明
定义类有2中方式，类声明和类表达式：
// 类声明
class Student {
}
// 类表达式
const Student = class {
}
2 为什么说它是语法糖
因为类实际上它是一个function，区别在于构造函数是函数作用域，类是块级作用域，类中的方法，都是定义在类的prototype上面，所以文章开头说它还是构造函数和原型的概念：
class Student {
take() {
}
}
const a = new Student()
console.log(typeof Student) // function
console.log(a.take === Student.prototype.take) // true
// 同等于
function Student() {
}
Student.prototype.take = function() {
}
const a = new Student()
console.log(typeof Student) // function
console.log(a.take === Student.prototype.take) // true
3 类包含的属性和方法
类可以包含构造函数方法、实例方法、获取函数、设置函数和静态类方法，但这些都不是必需的。空的类定义照样有效。
class Student {
// 实例属性 也可以放在这
// b = 1
// 静态属性
static a = 1
// 构造函数
constructor() {
// 实例属性 - 也可以放在类的最顶层
this.b = 1
}
// 获取函数
get myName() {
}
// 设置函数
set myName() {
}
// 静态方法 不会被实例继承
static show() {
}
// 方法
take() {
}
// 私有方法
_take() {
}
}
3.1 类的构造函数
类的构造函数关键字是constructor，它同等于原型中的prototype.constructor。
如果没有写constructor函数，那么会默认有一个空的constructor函数。
class A {
constructor() {
this.name = '小明'
}
}
const b = new A()
b.constructor === A.prototype.constructor // true
当使用new操作符创建实例时，会调用constructor构造函数。
3.2 类的方法
class Student {
// 方法
take() {
}
}
3.3 类的静态方法
跟类的方法一样，只不过前面加上static关键字。
静态方法不会被实例继承。
父类的静态方法可以被子类继承。
class A {
// 静态方法
static show() {
console.log('hi')
}
}
class B extends A {
}
const c = new A()
c.show() // c.show is not a function
B.show() // hi
3.4 类的私有方法
es6中没有提供这个方法，但是通常都是在方法前面加上下划线来表示。
class A {
// 私有方法
_show() {
console.log('hi')
}
}
3.5 取值函数（getter）和存值函数（setter）
在类中有set和get关键词，可以对某个属性设置存值和取值函数，拦截它的存取行为。
class A {
constructor () {
this.name = '小米'
}
get name () {
return 'get'
}
set name (val) {
console.log('set' + val)
}
}
const b = new A()
b.name // get
b.name = 123 // set123
4 类的继承
4.1 通过extends实现继承
类的继承通过extends关键字。
class A {
// 静态方法
static show() {
console.log('hi')
}
}
class B extends A {
}
4.2 super方法
注意如果子类如果没写constructor构造函数，则会默认有constructor构造函数和super方法，但是如果显性的写了constructor构造函数，那么必须在子类的构造函数中添加super方法，添加之后会调用父类的构造函数并得到父类的属性和方法，如果没有添加super方法则会报ReferenceError错误。
class A {
constructor () {
this.name = '小米'
}
show() {
console.log('hi')
}
}
class B extends A {
constructor () {
super() // 如果不写super，则会报ReferenceError错误
}
}
const c = new B()
super方法中也可以传参
class A {
constructor (name) {
this.name = name
}
show() {
console.log('hi')
}
}
class B extends A {
constructor () {
super('小红')
}
}
const c = new B()
c.name // 小红
5 其他
5.1 方法中的this指向
类的方法中如果有this，那么它指向的是类的实例。但是如果将它单独拿出来使用那么会报错。
class A {
constructor () {
this.name = '小米'
}
show () {
console.log(this.name)
}
}
const b = new A()
b.show() // 小米
const {
show } = b // Cannot read property 'name' of undefined
解决办法有2种:
- 在构造函数中绑定this
class A {
constructor () {
this.name = '小米'
this.show = this.show.bind(this)
}
show () {
console.log(this.name)
}
}
- 使用箭头函数
class A {
constructor () {
this.name = '小米'
this.show = () => this
}
show () {
console.log(this.name)
}
}
5.2 区分是否继承了这个类
区分是否继承了这个类使用Object.getPrototypeOf函数。
class A {
constructor () {
this.name = '小米'
}
show() {
console.log('hi')
}
}
class B extends A {
constructor () {
super()
}
}
class C {
}
Object.getPrototypeOf(B) === A // true 是继承的A类
Object.getPrototypeOf(B) === C // false 没有继承C类