【深入理解ECMAScript 6】 Class关键字的使用（类的声明、静态方法、类的继承）

ES6 Class关键字

ECMAScript 6提供了更接近传统开发语言的写法，引入了类( Class )的概念。类作为对象的模板,只是一个语法糖。

class 关键字只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

一、类的声明

1、类的声明方式：

class className[extends]{}

类的声明不允许重复，否则会报错

2、类的表达式方式：

const/let/var Myclass = class [className][extends]{}

• class关键字：用于创建类
• Myclass/className：表示创建的类名

类表达式可以是命名也可以是匿名的

如果命名类表达式，这个只能在类体内部使用

注意:

构造函数

构造函数(Constructor)是用于创建和初始化类中创建的一个对象的一种特殊方法。

constructor([arguments]){ ... }

• 在一个类中只能有一个名为“constructor” 的特殊方法。 一 个类中出现多次构造函数(Constructor)方法将会抛出一个SyntaxError错误。
• 在一个构造方法中可以使用super关键字来调用一 个父类的构造方法。
• 如果没有显式指定构造方法，则会添加默认的constructor方法。
• 如果不指定一个构造函数( constructor )方法，则使用一个默认的构造函数( constructor )。

创建类

class Hero{
   
    constructor() {
   
        this.name = '张无忌'
        this.sayMe = () => {
   
            console.log('this is 张无忌');
        }
    }
}
let hero = new Hero()
console.log(hero);//Hero { name: '张无忌', sayMe: [Function] }
hero.sayMe()//this is 张无忌

二、静态方法

1、getter与setter

ES5：

可以在局部作用域访问全局作用域

方法1：

// ES5
function fn() {
   
    var v = 100
    return {
   
        get: function () {
   
            return v
        },
        set: function (value) {
   
            v = value
        }
    }
}
var obj = fn()
obj.set(1000)
console.log(obj.get());//1000

方法2：

function fn() {
   
    var v = 100
    this.get = function () {
   
        return v
    }
    this.set = function (value) {
   
        v = value
    }
}
var obj = new fn()
obj.set(1000)
console.log(obj.get()