ES6之Class

Copy 
1function Course(teacher, course) {
2  this.teacher = teacher;
3  this.course = course;
4}
5Course.prototype.getCourse = function () {
6  return `teacher: ${this.teacher}, course: ${this.course}`;
7};
8
9const course = new Course("YY", "ES6");

Copy 
1class Course {
2  constructor(teacher, course) {
3    this.teacher = teacher;
4    this.course = course;
5  }
6  getCourse() {
7    return `teacher: ${this.teacher}, course: ${this.course}`;
8  }
9}
10const course = new Course("YY", "ES6");

Copy 
1console.log(typeof Course); //function

Copy 
1console.log(Course.prototype); //{constructor: ƒ, getCourse: ƒ}

Copy 
1console.log(course.hasOwnProperty("teacher")); //true

Copy 
1class Course {
2  constructor(teacher, course) {
3    this._teacher = teacher;
4    this.course = course;
5  }
6  getCourse() {
7    return `teacher: ${this._teacher}, course: ${this.course}`;
8  }
9  get teacher() {
10    return this._teacher;
11  }
12  set teacher(val) {
13    this._teacher = val;
14  }
15}
16const course = new Course('YY', 'ES6');
17
18// 意义何在？
19// 1. 建立只读变量， *js如何建立只读变量
20class Course1 {
21  constructor(teacher, course) {
22    this._teacher = teacher;
23    this.course = course;
24  }
25  getCourse() {
26    return `teacher: ${this._teacher}, course: ${this.course}`;
27  }
28  get teacher() {
29    return this._teacher;
30  }
31}
32const course1 = new Course1('YY', 'ES6');
33
34//修改只读变量会报错么？
35course1.teacher = '222'; //  - 无法改变，但不会报错
36
37
38// 2. *js中如何实现一个私有属性 - 闭包
39class Course2 {
40  constructor(teacher, course) {
41    this._teacher = teacher;
42    // 在constructor作用域中定义局部变量，内部通过闭包的形式对外暴露该变量
43    let _course = 'es6';
44
45    this.getCourse = () => {
46      return _course;
47    }
48  }
49}
50
51class Course3 {
52  #course = 'es6';
53  constructor(teacher, course) {
54    this._teacher = teacher;
55    }
56  }
57  get course() {
58    return `${#course}~`;
59  }
60  set course(val) {
61    if (val) {
62      this.#course = val;
63    }
64  }
65}
66
67// 3. 封装核心 - 适配器模式
68// 底层封装好通用core服务
69class Utils {
70  constructor(core) {
71    this._main = core;
72    this._name = 'myName';
73  }
74  get name() {
75    ...this._main.name,
76    name: ${this._name}
77  }
78  set name(val) {
79    this._name = val;
80  }
81}

Copy 
1// ES5
2function Course(teacher, course) {
3  this._teacher = teacher;
4  this.course = course;
5}
6Course.call = function () {
7  console.log("calling");
8};
9
10// ES6
11class Course {
12  constructor(teacher, course) {
13    this._teacher = teacher;
14  }
15  static call() {
16    console.log("calling");
17  }
18}

Copy 
1// 父构造函数
2function Course(teacher, course) {
3  this._teacher = teacher;
4  this.course = course;
5}
6Course.call = function () {
7  console.log("calling");
8};
9Course.prototype.send = function () {
10  console.log("sending");
11};
12// 子构造函数
13function Child() {
14  // 初始化父类
15  Course.call(this, "xx", "ES6");
16  this.start = function () {
17    console.log("starting");
18  };
19}
20Child.prototype = Course.prototype;

Copy 
1// 父类
2class Course {
3  constructor(teacher, course) {
4    this._teacher = teacher;
5    this.course = course;
6  }
7  send() {
8    console.log("sending");
9  }
10  static call() {
11    console.log("calling");
12  }
13}
14
15// 子类
16class Child extends Course {
17  constructor() {
18    super("xx", "ES6");
19  }
20  start() {
21    console.log("starting");
22  }
23}