深入理解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

未完待续...

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180316G1V0MJ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券