ES6

ES6学习笔记13:ES6中的类

Posted by mieruko on 2016-12-22

前言

类！！！！！
千呼万唤始出来！！！！

JS中类的形态

其实和java里面没什么差啦！嘿嘿。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
'use strict'

class Chef {
  constructor(food) {
    this.food = food;
  }

  cook() {
    console.log(this.food);
  }
}

let wanzi = new Chef("🍅");
wanzi.cook();

有没有似曾相识！！有没有似曾相识！！
除了基本的语法不太像，这尼玛简直就是java啊！！

get和set

还记得当年学java的时候，最讨厌的就是手写setter和getter,因为属性定义很简单，连写两个方法却很麻烦。。。。。
JS中现在也强调getter和setter了哟！ 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
'use strict'

class Chef {
  constructor(food) {
    this.food = food;
    this.dish = [];
  }

  get menu() {
    return this.dish;
  }

  set menu(dish) {
    this.dish.push(dish);
  }

  cook() {
    console.log(this.food);
  }
}

let wanzi = new Chef("🍅");
console.log(wanzi.menu = "🍹");
console.log(wanzi.menu = "🍕");
console.log(wanzi.menu);

get 属性名，定义我们获取这个属性的时候发生的事情。
set 属性名(value)， 定义我们为该属性名赋值的时候发生的事情。

静态方法（static method）

静态方法就是不需要实例化就能使用的一个方法。
就是可以直接通过类去调用的一个方法～～～
来让我们把cook()变成一个静态方法: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
'use strict'

class Chef {
  constructor(food) {
    this.food = food;
    this.dish = [];
  }

  get menu() {
    return this.dish;
  }

  set menu(dish) {
    this.dish.push(dish);
  }

  static cook(food) {
    console.log(food);
  }
}

Chef.cook("🍹");

嘻嘻，会输出果汁噢！

继承(extends)

一个类可以通过继承去拥有其它类里面的东西^_^。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
'use strict'

class Person {
  constructor(name, birthday) {
    this.name = name;
    this.birthday = birthday;
  }

  intro() {
    return `${this.name}, ${this.birthday}`;
  }
}

class Chef extends Person {
  constructor(name, birthday) {
    super(name, birthday);
  }
}

let wanzi = new Chef("wanzi", "1996-07-13");
console.log(wanzi.intro());

如此，我们就完成了一个最基本的继承工作啦！
同时，我们还可以通过super.xxx()来调用父类里面的方法^_^。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
'use strict'

class Person {
  constructor(name, birthday) {
    this.name = name;
    this.birthday = birthday;
  }

  intro() {
    return `${this.name}, ${this.birthday}`;
  }

  world() {
    return "world";
  }
}

class Chef extends Person {
  constructor(name, birthday) {
    super(name, birthday);
  }

  hello() {
    return super.world();
  }
}

let wanzi = new Chef("wanzi", "1996-07-13");
console.log(wanzi.hello());

最后会输出”world”这个单词噢！！

结语

JS终于也是有类的语言啦～！
撒花～～～～

FEATURED TAGS
ES6