ECMAScript 6 提供了class关键字用来定义类,虽然ECMAScript 6类表面上看起来可以支持正式的面向对象编程,但实际上它背后使用的仍然是原型和构造函数的概念。
一、类的定义
- 定义类也有两种主要方式:类声明和类表达式。这两种方式都使用class关键字加大括号
- 注意:函数声明和类声明之间的一个重要区别在于,函数声明会
提升,类声明不会。需要先声明类,然后再访问它,否则就会出现
ReferenceError - 另一个跟函数声明不同的地方是,函数受函数作用域限制,而类受块作用域限制
1.类声明
// 类声明
class Oop {}
// 类表达式
const Oop = class {}
2.函数声明会提升 类则不会
const oop = new Oop() // // ReferenceError: Oop is not defined
class Oop()
3.块级作用域
{
function Oop () {}
class ClassOop {}
var VarOop = class {}
let LetOop = class {}
}
console.log(Oop) // Oop () {}
console.log(ClassOop) // ReferenceError: ClassOop is not defined
console.log(VarOop) // class {}
console.log(LetOop) // ReferenceError: LetOop is not defined
二、类构造函数
-
constructor 方法是一个特殊的方法,这种方法用于创建和初始化一个由
class
创建的对象。通过 new 关键字生成对象实例时,自动会调用该方法。一个类只能拥有一个名为constructor构造函数,不能出现多个,如果定义了多个constructor构造函数,则将抛出 一个SyntaxError错误。如果没有定义constructor构造函数,class 会默认添加一个空的constructor构造函数。 -
类必须使用
new
调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new
也可以执行。 - constructor用于创建对象时给类传递一些参数
class Oop {}
// 等于
class Oop {
constructor () {}
}
// 错误
Oop() // TypeError: Class constructor Oop cannot be invoked without 'new'
// 传递参数
class Oop {
constructor (val) {
this.data = val
}
}
const oop = new Oop('传递参数')
使用new调用类的构造函数会执行如下操作。
- 在内存中创建一个新对象;
- 这个新对象内部的[[Prototype]]指针被赋值为构造函数的prototype属性;
- 构造函数内部的this被赋值为这个新对象(即this指向新对象);
- 执行构造函数内部的代码(给新对象添加属性);
- 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象;
三、类的属性及方法
1.实例属性及方法
- 每个实例都对应一个唯一的成员对象,所有成员都不会在原型上共享
class Oop {
constructor (val) {
this.val = val
console.log(this.val)
}
setVal (val) {
this.val = val
console.log(this.val)
}
}
const oop1 = new Oop('oop1测试') // oop1测试
const oop2 = new Oop('oop2测试') // oop2测试
oop1.setVal('更改oop1测试') // 更改oop1测试
oop2.setVal('更改oop2测试') // 更改oop2测试
oop1 // {val: '更改oop1测试'}
oop2 // {val: '更改oop2测试'}
2.静态属性及方法(static)
- 当我们把一个属性赋值给类本身,而不是赋值给它
prototype
,这样子的属性被称之为静态属性。 - 静态属性直接通过类来访问,不能在实例中访问,不能通过实例继承。
- 静态方法中的this 指向的是 当前类,而不是指向实例对象。静态属性是当前类自身的属性。
class Oop {
static val = '静态属性'
constructor () {
console.log('****',Oop.val)
this.age = '18'
}
static getOopVal () {
console.log('//',this.age)
}
}
const oop = new Oop() // **** 静态属性
console.log(oop) // {age: '18'}
Oop.val // '静态属性'
Oop.getOopVal() // // undefined
3、私有属性及方法(#)
- 私有属性和私有方法,是只能在类的内部访问的方法和属性,外部不能访问,不可以直接通过 Class 实例来引用,定义方式只需要在方法或属性前面添加
#
。
class Oop {
#age = '18'
constructor (age) {
this.#age = age
console.log(this.#age)
}
#setVal (age) {
this.#age = age
console.log(this.#age)
}
}
const oop = new Oop() // undefined
const oop = new Oop('20') // 20
oop.#age // SyntaxError: Private field '#age' must be declared in an enclosing class
oop.#setVal('测试') // SyntaxError: Private field '#setVal' must be declared in an enclosing class
四、继承(extends)
- 使用 extends 关键字,让子类继承父类的属性和方法。
- 在子类的
constructor
方法中,我们使用了super
关键字,在子类中它是必须存在的,否则新建实例时会抛出异常。这是因为子类的this对象是继承自父类的this对象,如果不调用super
方法,子类就得不到this
对象。 - super 关键字可以作函数使用,也可以作对象使用,但是其只能在继承类中使用,且只能在继承类的constructor 构造函数、实例方法和静态方法中使用。作为函数时是在 继承类的constructor 构造函数中使用,根据要求如果继承类中定义了constructor构造函数就必须要调用super方法(调用父类的constructor),否则就会报错。
class Oop {
constructor(val) {
this.val = val
console.log('val',this.val)
}
getOopFn(num) {
return num
}
}
const oop = new Oop('oop') // val oop
class Child extends Oop {
constructor() {
super('参数')
console.log(super.getOopFn(18))
}
}
const child = new Child()
// val 参数
// 18