ES6-class理解

类的基本语法

class 类名{
	// 私有的属性和方法
	constructor (args1,...){
		this.args1 = args1;
		...
	}
    // 共有的属性和方法 默认添加到了原型对象上
    say(){}
}

示例：

class Person{
    //  私有的属性  构造器
    constructor(name, age){
        this.name = name;
        this.age = age;
        this.sleep = function(){
            console.log('爱睡觉');
        }
    }
    //  共有的属性
    say(){
        console.log('我的名字' + this.name);
    } 
}
// 创建对象
let p1 = new Person('小明', 19);
let p2 = new Person('小红', 20);
console.log(p1.say === p2.say); // true
console.log(p1.sleep === p2.sleep); // false
console.log(p1); // Person{"name": "小明","age": 19}
p1.sleep(); // 爱睡觉

上面的代码定义了一个Person类，里面有一个constructor()方法，这就是构造方法，而this关键字则代表实例对象

Person类除了构造方法，还定义了一个say()方法。注意，定义say()方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法与方法之间不需要逗号分隔，加了会报错。

constructor方法

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

class Person{}
// 等同于
class Person{
    constructor(){
    }
}

constructor()方法默认返回实例对象（即this），也完全可以指定返回另外一个对象。

Constructor与普通构造函数的区别：类的构造函数，不使用new是没法调用的，会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

Class的getter和setter

ES6中，可以通过get方法获取属性值，通过set方法对属性值进行更改值。不自定义时，初始化时会自动调用set方法，读取时调用get方法，get方法只能读。

//  与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
 class Formatter {
     //  定义中间过渡值
     _col = '';

     constructor(color) {
         this.color = color;
     }
     //  get 后边的就是拦截的属性名
     get color() {
         return this._col;
     }

     set color(val) {
         console.log('setter', val);
         this._col = val;
     }
 }

 let d = new Formatter()
 console.log(d);
 d.color = '黑色';
 console.log(d.color);

class的静态方法

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

class A {
    static classMethod() {
        return 'hello';
    }
}
A.classMethod();
console.log(A.classMethod());
// 'hello'

const a = new A();
a.classMethod();
// TypeError: a.classMethod is not a function

A 类的classMethod 方法前有 static关键字，表明这是一个静态方法，可以在 A 类上直接调用，而不是在实例上调用在实例a上调用静态方法，会抛出一个错误，表示不存在该方法

如果静态方法包含this关键字，这个this指的是类，而不是实例。

class A {
    static classMethod() {
      this.baz();
    }
    static baz(){
      console.log('hello');
    }
    baz(){
      console.log('world');
    }
}
A.classMethod();
// hello

静态方法classMethod调用了this.baz，这里的this指的是A类，而不是A的实例，等同于调用A.baz。另外，从这个例子还可以看出，静态方法可以与非静态方法重名。

父类的静态方法，可以被子类继承

class A {
    static classMethod() {
        console.log('hello');
    }
}
class B extends A {}
B.classMethod() // 'hello'

class的静态属性

静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。写法是在实例属性的前面，加上static关键字。

父类的静态方法子类也可以继承

class A {
    static classMethod() {
        console.log('hello');
    }
}
class B extends A {}
B.classMethod() // 'hello'

class的继承

Class 可以通过extends关键字实现继承

class Animal {}
class Cat extends Animal { };

上面代码中定义了一个 Cat 类，该类通过 extends关键字，继承了 Animal 类中所有的属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个Animal类。下面，我们在Cat内部加上代码

class Cat extends Animal {
    constructor(name, age, color) {
        // 调用父类的constructor(name, age)
        super(name, age);
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}

constructor方法和toString方法之中，都出现了super关键字，它在这里表示父类的构造函数，用来新建父类的this对象

子类必须在constructor()方法中调用super()，否则就会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法。如果不调用super()方法，子类就得不到自己的this对象。

es5 的构造函数在调用父构造函数前可以访问 this, 但 es6 的构造函数在调用父构造函数(即 super)前不能访问 this。

class A {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
class B extends A {
  constructor(x, y, name) {
    this.name = name; // ReferenceError
    super(x, y);
    this.name = name; // 正确
  }
}

上面代码中，子类的constructor方法没有调用super之前，就使用this关键字，结果报错，而放在super方法之后就是正确的

supper

super这个关键字，既可以当作函数使用，也可以当作对象使用

supper作为函数调用

super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。

class A {}
class B extends A {
  constructor() {
    super();
  }
}

注意，super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例，因此super()在这里相当于A.prototype.constructor.call(this)。

class A {
  constructor() {
    // new.target 指向正在执行的函数
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B

在super()执行时，它指向的是子类B的构造函数，而不是父类A的构造函数。也就是说，super()内部的this指向的是B。

supper作为对象调用

在普通方法中，指向父类的原型对象；在静态方法中，指向父类

super对象在普通函数中调用

class A {
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}
let b = new B();

上面代码中，子类B当中的super.p()，就是将super当作一个对象使用。这时，super在普通方法之中，指向A.prototype，所以super.p()就相当于A.prototype.p()。

这里需要注意，由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。

class A {
  constructor() {
    this.p = 2;
  }
}
class B extends A {
  get m() {
    return super.p;
  }
}
let b = new B();
b.m // undefined

上面代码中，p是父类A实例的属性，super.p就引用不到它。

如果属性定义在父类的原型对象上，super就可以取到。

class A {}
A.prototype.x = 2;

class B extends A {
  constructor() {
    super();
    console.log(super.x) // 2
  }
}
let b = new B();

上面代码中，属性x是定义在A.prototype上面的，所以super.x可以取到它的值。

super对象在静态方法中调用

用在静态方法之中，这时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);
  }

  myMethod(msg) {
    super.myMethod(msg);
  }
}

Child.myMethod(1); // static 1

const child = new Child();
child.myMethod(2); // instance 2

上面代码中，静态方法B.m里面，super.print指向父类的静态方法。这个方法里面的this指向的是B，而不是B的实例。

总结

class是一个语法糖，其底层还是通过 构造函数 去创建的。
类的所有方法都定义在类的prototype属性上面。
静态方法：在方法前加static，表示该方法不会被实例继承，而是直接通过类来调用。
静态属性：在属性前加static，指的是 Class 本身的属性，而不是定义在实例对象（this）上的属性。
es5 的构造函数在调用父构造函数前可以访问 this, 但 es6 的构造函数在调用父构造函数(即 super)前不能访问 this。
super
- 作为函数调用，代表父类的构造函数
- 作为对象调用，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

posted @ 2022-06-07 19:01 秋弦阅读(42) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

秋弦