ES6中的class的使用

js的传统生成一个类的方法，需要定义一个构造函数，然后通过new的方式生成。

```

function Cat() {

this.name = 'kitty';

this.color = 'yellow';

}

var cat = new Cat();

```

js中只有对象，没有类。这样的写法和传统面向对象语言差异很大，很容易让新手感到困惑。

---

### 定义类

ES6添加了类，作为对象的模板。通过class来定义一个类：

```

//定义类

class Cat {

constructor() {

this.name = 'kitty';

this.color = 'yellow';

}

//不需要加分号隔开，否则会报错,而且不用加上function关键字

getNames() {

console.log('name:' + this.name);

}

}

//使用new操作符得到一个实力对象

let cat = new Cat()

```

其实ES6的类，完全可以看作构造函数的另一种写法。

```

class Cat {

//...

}

typeof Cat // "function"

Cat === Cat.prototype.constructor // true

//类的数据类型就是函数，类本身就只想构造函数

```

而且构造函数的prototype属性，在ES6的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面

```

class Cat {

constructor () {

//...

}

like () {

//...

}

eat(){

//...

}

}

//等同于

Cat.prototype = {

constructor () {},

like () {},

eat () {}

}

let miao = new Cat()

miao.constructor === Cat.prototype.constructor // true

```

### 严格模式

> 类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。

考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。

---

### constructor 方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

---

### 类的实例对象

用new命令生成类的实例对象

```

class Cat {

//...

}

var cat = Cat ( 'kitty' , 'blue');//报错

var cat =  new Cat ( 'kitty' , 'blue'); //正确

```

实例的属性定义在原型上

```

//定义类

class Cat {

constructor() {

this.name = 'kitty';

this.color = 'yellow';

}

getNames() {

console.log('name:' + this.name);

}

}

//使用new操作符得到一个实例对象

let cat = new Cat()

cat.getNames() // name:kitty

cat.hasOwnProperty('name')//true

cat.hasOwnProperty('getNames')//false

cat.__proto__.hasOwnProperty('getNames')//true

```

和ES5一样，类的所有实例共享一个原型对象

```

let cat1 = new Cat();

let cat2 = new Cat();

cat1.__proto__ === cat2.__proto__

```

### Class 表达式

```

let dogClass = class Dog {

getClassName() {

return Dog.name;

}

}

let dog = new dogClass();

dog.getClassName() // Dog

```

### 不存在变量提升

定义类不存在变量提升，只能先定义类后使用，跟函数声明是有区别的。

```

//-----函数声明-------

//定义前可以先使用，因为函数声明提升的缘故，调用合法。

func();

function func(){}

//-----定义类---------------

new Cat();  //报错，Cat is not defined

class Cat{}

```

### this的指向

类的方法内部如果如果含有this,它默认指向类的实例。但是，必须非常小心，如果单独使用，有可能会报错。

```

class Cat {

eatFish ( kind = 'fish'){

this.print (`Hello ${fish}`);

}

print(str){

console.log(str)

}

}

let cat = new Cat();

const { eatFish } = cat;

eatFish;// TypeError: Cannot read property 'print' of undefined

```

上面代码中，eatFish方法中的this, 默认指向Cat类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境，因为找不到print() 方法而导致错误。

所以，可以在构造方法中绑定this，这样就不会找不到print方法了。

```

class Cat {

constructor () {

this.eatFish = this.eatFish.bind(this);

}

//...

}

```

或者使用箭头函数

```

class Cat {

constructor () {

this.eatFish = (kind = 'fish') => {

this.print(`Hello ${name}`)

}

}

}

```

### extends继承

使用extends 关键字实现类之间的继承。这比在ES5中使用继承要方便很多。

```

//定义类父类

class Parent {

    constructor(name,age){

        this.name = name;

        this.age = age;

    }

    speakSometing(){

        console.log("I can speek chinese");

    }

}

//定义子类，继承父类

class Child extends Parent {

    coding(){

        console.log("coding javascript");

    }

}

var c = new Child();

//可以调用父类的方法

c.speakSometing(); // I can speek chinese

```

如果子类中有constructor构造函数，则必须使用调用super。

```

//定义父类

class Parent {

    constructor(name,age){

        this.name = name;

        this.age = age;

    }

    speakSometing(){

        console.log("I can speek chinese");

    }

}

//定义子类，继承父类

class Child extends Parent {

    constructor(name,age){

        //不调super()，则会报错  this is not defined

        //必须调用super

        super(name,age);

    }

    coding(){

        console.log("coding javascript");

    }

}

var c = new Child("job",30);

//可以调用父类的方法

c.speakSometing(); // I can speek chinese

```

子类必须在constructor方法中调用super方法，否则新建实例时会报错(this is not defined)。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

参考：

[http://es6.ruanyifeng.com/#docs/class](http://es6.ruanyifeng.com/#docs/class)

[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes)

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,362评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,330评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,247评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,560评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,580评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,569评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,929评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,587评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,840评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,366评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,945评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2赞 342

推荐阅读更多精彩内容