深入理解ES6的class

“在ES6中，终于有了标准的类语法”

01

—

类声明

定义一个类的一种方法是使用一个类声明。

class Animal {

constructor(name,age){

this.name = name;

this._age = _age;

this.run = function(){

console.log(`$ is running...`);

}

}

}

02

—

类表达式

类表达式是另一种定义类的方式

/* 匿名方式 */

let Animal = class {

constructor(name,age){

this.name = name;

this._age = _age;

this.run = function(){

console.log(`$ is running...`);

}

}

}

/* 命名的类 */

let Animal = class Animal {

constructor(name,age){

this.name = name;

this._age = _age;

this.run = function(){

console.log(`$ is running...`);

}

}

}

类声明和类表达式的主体都是在严格模式下执行的。

03

—

构造函数

class中有一个constructor方法，用于创建和初始化使用class创建的一个对象。一个类只能拥有一个名为constructor的方法。如果类包含多个constructor的方法，将会抛出一个SyntaxError。

在constructor方法中可以使用super关键字来调用父类的构造函数。参看后面的继承。

04

—

原型方法

javascript中的类本质上是function,而函数都会有prototype,在类中的方法中，不适用static关键字的情况下，定义的那些方法一般都是原型方法

var Animal = class Animal {

constructor(name,age){

this.name = name;

this.age = age;

this.run = function(){

console.log(`$ is running...`);

}

}

eat (){

console.log(`eating...`);

}

}

比如在该例子中typeof Animal将会得到"function".其中的eat方法就是原型方法，等价于

var Animal = function(name,age) {

this.name = name;

this.age = age;

this.run = function(){

console.log(`$ is running...`);

}

注意，这里我故意将var Animal = class Animal { ... }

让等号左侧的变量名和右侧的类名相同，这是有原因的，你如果知道原因的话，那么说明你对ES6的类的理解已经很深刻了 ：）。欢迎在底下留言说出你的见解！

05

—

静态方法

定义类的静态方法可以使用static关键字

var Animal = class Animal {

constructor (name,age) {

this.name = name;

this.age = age;

this.run = function(){

console.log(`$ is running...`);

}

}

eat () {

console.log(`eating...`);

}

static say (content) {

console.log(content);

}

}

等价于

//构造函数

var Animal = function(name,age) {

this.name = name;

this.age = age;

this.run = function(){

console.log(`$ is running...`);

}

}

//原型方法

Animal.prototype.eat = function(){

console.log(`eating...`);

}

//静态方法

Animal.say = function(content) {

console.log(content);

}

06

—

原型和静态方法中的this

当一个对象调用原型或者静态方法的时候，如果该对象没有this值（或者this是基本类型），那么this值在被调用的函数内部将为undefined。这是因为勒种所有的函数、方法、构造函数、getter、setter都是在严格模式下执行的（即使你是以非严格的方式写的代码也是在严格模式下执行）。因此如果我们没有指定this的值，this的值将为undefined。

class Animal{

constructor () {

console.log(this);

}

run () {

return this;

}

static say () {

return this;

}

}

let dog = new Animal();

dog.run();// Animal {...}

let run = dog.run;

run();// undefined

Animal.say()// class Animal{...}

let say = Animal.say;

say();// undefined

未完待续...