如果对构造函数、原型对象、实例对象还不清楚，建议先看这里的原型基础部分
Class基本概念
传统方法是通过构造函数生成新对象
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
class是构造器的另一种写法
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
-
类的所有方法都定义在类的prototype属性上，即原型对象上（静态方法除外）
class Point {
constructor(){...}
toString(){...}
toValue(){...}
}
等同于
class Point {
constructor(){...}
}
Point.prototype = {
toString(){},
toValue(){}
};
-
通过类创建实例
var b = new Point();
b.toString() //在实例上调用的方法其实就是原型上的方法
-
严格模式
类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式
其他知识点
-
Object.assign方法可以很方便地一次向类添加多个原型方法。
class Point {
constructor(){...}
}
Object.assign(Point.prototype, {
toString(){},
toValue(){}
});
-
类的内部所有定义的方法，都是不可枚举的（non-enumerable）
-
类的属性名，可以采用表达式
let methodName = "getArea";
class Square{
constructor(length) {...}
[methodName]() {...}
}
-
不存在变量提升
Class的实例对象
1.如何创建
使用new命令生成类的实例对象
var point = new Point(2, 3);
2.constructor方法
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加
-
constructor方法默认返回实例对象（即this）
-
constructor方法也可以指定返回另外一个对象
class Foo {
constructor() {return Object.create(null);} //返回一个全新的对象
}
new Foo() instanceof Foo // false //导致实例对象不是Foo类的实例
3.实例上的方法
-
实例的方法都是定义在原型上（通过在class上添加）
-
实例的属性和方法可以定义在实例对象本身（通过在this上添加）
class Point {
//通过this将实例的属性和方法定义在实例对象本身
constructor(x, y) {
this.x = x;
this.y = y;
this.fun=function (){return 1}
}
//通过在class将实例的属性和方法定义在原型上
toString() {return '(' + this.x + ', ' + this.y + ')';}
}
验证：
var point = new Point(2, 3)
//由于x和y定义在实例对象本身,所以实例有这个属性
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('fun') // true
//由于toString定义在原型上，所以实例对象本身没有这个方法,而实例对象的原型有这个方法
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true
-
类的所有实例共享一个原型对象
var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__ === p2.__proto__ //true
-
可以通过实例的__proto__属性为类的原型对象添加方法
var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__.printName = function () { return 'Oops' }; //添加
p1.printName() // "Oops"
p2.printName() // "Oops" //共享类的原型对象的方法
4.实例上的属性
以前：在类的constructor方法上的定义实例的属性
class Point {
constructor(myProp) {
this.myProp= myProp;
}
}
现在：可以在类中用等式定义实例的属性
class MyClass {
myProp = 42;
}
var myclass=new MyClass()
myclass.myProp//42
5.this的指向
类的方法内部的this默认指向类的实例
class Logger {
printName(name = 'there') {
this.print(`Hello ${name}`); //this指向Logger类的实例
}
print(text) {
console.log(text);
}
}
//创建实例
const logger = new Logger();
//单独从实例中取出方法
const { printName } = logger;
//单独使用该方法
printName(); // TypeError: Cannot read property 'print' of undefined
//解析：该函数内部有个this是指向实例对象的。单独取出来后this会指向该方法运行时所在的环境，然后因为找不到print方法而导致报错
Class的继承
1. Extends
-
类相当于实例的原型，所有在类中定义的方法，都会被实例继承
-
类之间可以通过extends关键字实现继承
class ColorPoint extends Point {} //ColorPoint类继承了Point类的所有属性和方法
class B extends A {} //只要是一个有prototype属性的函数，就能被B继承
三种特殊情况：
-
子类继承Object类
class A extends Object {}
A.__proto__ === Object // true
A.prototype.__proto__ === Object.prototype // true
//A其实就是构造函数Object的复制，A的实例就是Object的实例。
-
不存在任何继承
class A {}
A.__proto__ === Function.prototype // true
A.prototype.__proto__ === Object.prototype // true
//A作为一个基类（即不存在任何继承），就是一个普通函数，所以直接继承Funciton.prototype。但是，A调用后返回一个空对象（即Object实例），所以A.prototype.__proto__指向构造函数（Object）的prototype属性。
-
子类继承null
class A extends null {}
A.__proto__ === Function.prototype // true
A.prototype.__proto__ === undefined // true
//A也是一个普通函数，所以直接继承Funciton.prototype。但是，A调用后返回的对象不继承任何方法，所以它的__proto__指向Function.prototype
2.class的静态方法
静态方法不会被实例继承，而是直接通过类来调用，所谓静态方法，就是方法前面加上了static关键字
class Foo {
static classMethod() {
return 'hello';
}
}
//直接在Foo类上调用
Foo.classMethod() // 'hello'
//不可在Foo类的实例中调用
var foo = new Foo();
foo.classMethod()// TypeError: foo.classMethod is not a function
3.class的静态属性
静态属性指的是Class本身的属性，即Class.propname，而不是定义在实例对象（this）上的属性。同理，静态属性不会被继承
以前的写法
class Foo {}
Foo.prop = 1; //定义一个静态属性
Foo.prop // 1
现在的写法
class MyClass {
static myStaticProp = 1; //在类中定义一个静态属性
}
MyClass.myStaticProp//1
4.super 关键字
-
super作为函数调用时，代表父类的构造函数。且super()只能用在子类的构造函数之中
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); //调用父类的constructor(x, y)
this.color = color;
}
}
子类构造函数的this
-
ES6 要求：子类的构造函数必须执行一次super函数。因为子类的this对象（实例对象）是继承父类的，所以子类必须在constructor方法中调用super方法
class Point { /* ... */ }
class ColorPoint extends Point {
//子类本身是没有this的，只能通过super继承父类的this
constructor() {}
}
let cp = new ColorPoint(); // ReferenceError//没有this无法创建实例
-
子类实例是基于父类实例加工的
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {//基于父类实例加上了color
this.color = color; // 没有继承父类this：ReferenceError
super(x, y); //继承父类this后返回父类实例：
this.color = color; // 正确
}
}
其他
-
实例对象既是子类的实例对象又是父类的实例对象
let cp = new ColorPoint(25, 8, 'green');
cp instanceof ColorPoint // true
cp instanceof Point // true
-
Object.getPrototypeOf方法可以用来从子类上获取父类
Object.getPrototypeOf(ColorPoint) === Point // true
-
super虽然代表了父类的构造函数，但是返回的是子类的实例
class Parent {
constructor() {
console.log(new.target.name);
}
}
class Children extends Parent {
constructor() {
super();
}
}
new A() // A
new B() // B
//注意，super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)
-
super在普通方法中作为对象时，指向父类的原型对象
class A {
p() {
return 2;
}
}
class B extends A {
constructor() {
super();
//这里super被当做一个对象使用了，指向A.prototype（父类原型），相当于A.prototype.p()
console.log(super.p()); // 2
}
}
由于super指向父类的原型对象，所以定义在父类实例上（构造函数上）的方法或属性，是无法通过super调用的
class A {
constructor() {
this.p = 2; //1. 构造方法内定义的p（即实例上的p）
}
}
class B extends A {
get m() {
return super.p;//2. 这里返回父类的p，相当于A.prototype.p
}
}
let b = new B();
b.m // undefined //3. 由于A.prototype找不到p，报错（因为p是在实例上定义的）
//解决：这时如果把父类的p定义在父类的原型对象上，子类super.p就能访问到。比如:
A.prototype.p = 2
b.m //2
ES6 规定，通过super调用父类的方法时，super会绑定子类的this
class A {
constructor() {
this.x = 1;
}
print() {
console.log(this.x);
}
}
class B extends A {
constructor() {
super();
this.x = 2;
}
m() {
super.print();//super被当做对象，指向的是父类的原型对象，所以可以找到print
}
}
let b = new B();
b.m() // 2
//super.print()虽然调用的是A.prototype.print()，但是A.prototype.print()会绑定子类B的this，导致输出的是2，而不是1。也就是说，实际上执行的是super.print.call(this)
如果通过super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性
class A {
constructor() {
this.x = 1;
}
}
class B extends A {
constructor() {
super();
this.x = 2;
super.x = 3; //由于会绑定子类的this，这里相当于this.x=3
console.log(super.x); // undefined //当读取super.x的时候，读的是A.prototype.x，所以返回undefined
console.log(this.x); // 3
}
}
-
super在静态方法中作为对象时，指向父类
class Parent {
//父类
static myMethod(msg) {
console.log('static', msg);
}
//父类的原型对象
myMethod(msg) {
console.log('instance', msg);
}
}
class Child extends Parent {
static myMethod(msg) {
super.myMethod(msg); //super在静态方法之中指向父类
}
myMethod(msg) {
super.myMethod(msg); //在普通方法之中指向父类的原型对象
}
}
Child.myMethod(1); // static 1 //这里调用的是父类的静态方法
var child = new Child(); //实例化
child.myMethod(2); // instance 2 //这里调用的是父类的原型对象
-
由于对象总是继承其他对象的，所以可以在任意一个对象中，使用super关键字
var obj = {
toString() {
return "MyObject: " + super.toString();
}
};
obj.toString(); // MyObject: [object Object]
Class表达式
类可以使用表达式的形式定义
const MyClass = class Me {
getClassName() {
return Me.name;
}
};
let inst = new MyClass();
inst.getClassName() // Me
Me.name // ReferenceError: Me is not defined
//上面代码表示，Me只在Class内部有定义
//如果类的内部没用到的话，可以省略Me，也就是可以写成下面的形式
const MyClass = class { /* ... */ };
采用Class表达式，可以写出立即执行的Class
let person = new class {
constructor(name) {
this.name = name;
}
sayName() {console.log(this.name);}
}('张三');
person.sayName(); // "张三"
其他
私有方法
-
利用call方法
class Widget {
//公有方法
foo (baz) {
//私有方法：利用call使bar成为了当前模块的私有方法
bar.call(this, baz);
}
}
function bar(baz) {
return this.snaf = baz;
}
-
利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值
const bar = Symbol('bar');
const snaf = Symbol('snaf');
class myClass{
// 公有方法
foo(baz) {
this[bar](baz);
}
// 私有方法
[bar](baz) {
return this[snaf] = baz;
}
};
class的私有属性
私有属性即在类之外是读取不到的属性，通过在属性名前使用#来添加
class的prototype属性和__proto__属性
-
子类的__proto__属性，表示构造函数的继承，总是指向父类。
-
子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。
class A {}
class B extends A {}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true
实例的_proto_属性
子类实例的_proto_属性的_proto_属性，指向父类实例的_proto_属性。也就是说，子类的原型的原型，是父类的原型
var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red'); //继承Point
p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true
因此，通过子类实例的__proto__.__proto__属性，可以修改父类实例的行为
p2.__proto__.__proto__.printName = function () {
console.log('Ha');
};
p1.printName() // "Ha"
原生构造函数的继承
原生构造函数是指语言内置的构造函数，通常用来生成数据结构。以前，这些原生构造函数是无法继承的
ES6允许继承原生构造函数定义子类，因为ES6是先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。
Class的取值函数（getter）和存值函数（setter）
与ES5一样，在Class内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为
class MyClass {
constructor() {
// ...
}
get prop() {
return 'getter';
}
set prop(value) {
console.log('setter: '+value);
}
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// 'getter'
