类
es6后引入了类的概念. 写法和java这种面向对象的很相似. 让前端可以更好的写面向对象的代码. 之前我们写的话, 需要用原型链的形式去写, 其实没有类这种形式直观易懂. 但是类其实它说到底还是原型链的方式去实现的. 废话不多说,下面我们去写一下, 你就大概知道了.
Class
class Person {
say () {
console.log('说话')
}
}
let person = new Person()
person.__proto__ // {constructor: ƒ, say: ƒ}
我们通过上面的代码写了一个类,里边有一个say方法,然后我们实例化了这个方法,最后我们用这个实例化的对象去找它的原型对象. 发现它的原型对象就是Person类.
extend
class可以通过extend关键字实现继承,这比之前我们使用原型链实现继承的方式要直观很多.
class Parent {
constructor () {
console.log('Parent')
}
}
class Child extends Parent{
constructor () {
super()
console.log('Child')
}
}
let child = new Child()
// Parent
// Child
Object.is(Child.__proto__, Parent) // true
这里我们需要注意一个问题. 继承了Parent后,在构造函数constructor里边必须写上super(),调用父类的构造函数, 要不然会报错. Object.is(Child.__proto__, Parent) 返回的值是true, 也就证明了,class继承其实还是原型链继承的那一套. 其实class只是一个语法糖而已.
static
class里边用static去描述静态属性, 和其他语言一样. 具体用法
class Scholl {
constructor (schollName) {
this.schollName = schollName
}
static createScholl (schollName) {
let scholl = new Scholl(schollName)
return scholl
}
static grade1 = '一年级'
static grade2 = '二年级'
static grade3 = '三年级'
static grade4 = '四年级'
static grade5 = '五年级'
static grade6 = '六年级'
static grade7 = '七年级'
static grade8 = '八年级'
static grade9 = '九年级'
}
Scholl.createScholl('北京一中')
Scholl.grade1 // 一年级
我们可以写了一个学校的类,类里边有一个静态方法和9个静态属性.静态之所以叫静态,就是不需要实例化,可以直击通过类名去调用的. 比如如果我们不想每次创建实例都new一个对象出来的话, 可以在类里边写一个createScholl的方法去替我们创建实例. 静态方法一般都是Helper方法,可以让我们在做某一些重复需要去做的事情减轻操作. 静态属性则是可以共享的一些变量. 比如我们这边写到的grade1,中国学校都是九年义务教育. 这个就可以写在静态属性里边.
get&set
它是用来获取和设置属性值, 相当于一个储存器属性,为内部属性提供一个方便习惯的读写方式. 具体用法
class Person {
constructor (name, age) {
this._age = age
this._name = name
}
get age () {
if (this._age >= 18) {
alert('成年人')
} else {
alert('未成年人')
}
return this._age
}
set age (val) {
this._age = val
}
}
let person = new Person('小红', 18)
person.age // 18, alert('成年人')
person.age = 16
person._age // 16
person.age // 16, alert('未成年人')
我们可以在实例化对象读/写的时候是和平常一样赋值和读值的. 在类中用get和set 加上属性名写成一个方法,在方法体里边对需要读/写的值进行操作. 如果你熟练写过vue的话,我觉得可以把它理解成vue里边的计算属性.
结语
回顾一下, 我们今天复习了一下Class,它的写法是什么样,和原型链是有什么关系,我们可以如何去继承类,如何去写静态的属性和方法, 已经静态属性和方法的使用场景, 最后提到了类里边的get和set如何去使用. 那么明天见咯!
