class的基本用法

class的基本用法

es5生成实例对象是通过构造函数和原型生成的，这种写法可能与普遍的编程语言有区别，所以es6就推出了class语法。ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

es5
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);
es6
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

类的内部所有定义的方法，都是不可枚举的（non-enumerable）,但在es5上是可枚举的这点有点差别。

constructor()方法

• constructor()方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加。
• constructor()方法默认返回实例对象（即this），完全可以指定返回另外一个对象。
• 类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

类的实例

类的属性和方法，除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

类的所有实例共享一个原型对象
注意：

var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__.printName = function () { return 'Oops' };

p1.printName() // "Oops"
p2.printName() // "Oops"

var p3 = new Point(4,2);
p3.printName() // "Oops"
//上面代码在p1的原型上添加了一个printName()方法，由于p1的原型就是p2的原型，因此p2也可以调用这个方法。而且，此后新建的实例p3也可以调用这个方法。这意味着，使用实例的__proto__属性改写原型，必须相当谨慎，不推荐使用，因为这会改变“类”的原始定义，影响到所有实例
1
2
3
4
5
6
7
8
9
10
11

类的各种属性和方法

类的属性和方法

let propName = 'getNmae' //类的属性名，可以采用表达式。
class Fa {
  count = 0;// 属性
  get count() {// 取值函数（getter）
    console.log('Getting the current value!');
    return this.count;
  }
  set count(value) {// 存值函数（setter）
	this.count = value
  }
  increment() { // 方法
    this._count++;
  }
  [propName](){}// 属性名为表达式
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

类的静态属性和方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”

clasa StaticFun {
	static name = 'ss';// 静态属性
	static getName(){// 静态方法
	}
}
// 直接调用静态属性
console.log(StaticFun.name)
1
2
3
4
5
6
7

私有属性和私有方法

私有方法和私有属性，是只能在类的内部访问的方法和属性，外部不能访问。这是常见需求，有利于代码的封装。

class Foo {
  #a;// 私有属性
  constructor(a) {
    this.#a = a;
  }
  get #a(){return this.#a}
  set #a(value){this.#a = value};// 私有属性也可以有getter setter方法
  #sum() {// 私有方法
    return this.#a + this.#b;
  }
  printSum() {
    console.log(this.#sum());
  }
}
// 私有属性和私有方法前面，也可以加上static关键字，表示这是一个静态的私有属性或私有方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

还有 class点表达式，静态模块等其他内容，可参考阮老师的笔记