ES6 class类的理解学习

待我称王封你为后i 2022-12-24 01:54 182阅读 0赞

### 文章目录 ###

*  一. Class 的基本语法
 *   *  1. 简介
     *   *  1.1 类的由来
         *  1.2 constructor 方法
         *  1.3 类的实例
         *  1.4 取值函数（getter）和存值函数（setter）
         *  1.5 属性表达式
         *  1.6 Class 表达式
         *  1.7 注意点
         *   *  （1）严格模式
             *  （2）不存在变量提升
             *  （3）name属性
             *  （4）Generator 方法
             *  （5）this 的指向
     *  2. 静态方法
     *  3. 实例属性的新写法
     *  4. 静态属性
     *  5. 私有方法和私有属性
     *  6. new.target 属性
 *  二. Class 的继承
 *   *  1. 简介
     *  2. Object.getPrototypeOf()
     *  3. super 关键字
     *   *  3.1 super作为函数调用时，代表父类的构造函数
         *  3.2 super作为对象

# 一. Class 的基本语法 #

## 1. 简介 ##

### 1.1 类的由来 ###

传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。

JavaScript 语言中，生成实例对象的传统方法是通过构造函数。构造函数示例：

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);
    p.toString(); //(1, 2)

构造函数生成实例的执行过程：

> 1.当使用了构造函数，并且new 构造函数()，后台会隐式执行new Object()创建对象；  
> 2.将构造函数的作用域给新对象（即new Object()创建出的对象），函数体内的this就代表new Object()出来的对象；  
> 3.执行构造函数的代码；  
> 4.返回新对象；

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样：

class Point { 
    	constructor(x, y) { 
    		this.x = x;
    		this.y = y;
    	}
    	toString() { 
    		return '(' + this.x + ', ' + this.y + ')';
    	}
    }
    
    var p = new Point(1, 2);
    console.log(p.toString()); //(1, 2)
    
    console.log(typeof Point); //function
    console.log(Point === Point.prototype.constructor); //true

上面代码表明，类的数据类型就是函数，类本身就指向构造函数。使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。可以认为ES6中的类其实就是构造函数的另外一种写法。

> 注意：  
> 1.定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了；  
> 2.方法之间不需要逗号分隔，加了会报错；

打印类的prototype属性：

console.log(Point.prototype);

打印出来是一个对象：

![在这里插入图片描述][20201126144617969.png_pic_left]  
我们发现，构造函数的prototype属性，在 ES6 的“类”上面继续存在。事实上，类的所有方法都定义在类的prototype属性上面。

class Point { 
      constructor() { 
        // ...
      }
      toString() { 
        // ...
      }
      toValue() { 
        // ...
      }
    }
    
    // 等同于
    Point.prototype = { 
      constructor() { },
      toString() { },
      toValue() { },
    };

在类的实例上面调用方法，其实就是调用原型上的方法。

class B { }
    let b = new B();
    
    b.constructor === B.prototype.constructor // true

上面代码中，b是B类的实例，它的constructor方法就是B类原型的constructor方法。

因此，我们可以通过prototype属性对类添加方法：

class Point { 
    	constructor(x, y) { 
    		this.x = x;
    		this.y = y;
    	}
    	toString() { 
    		return '(' + this.x + ', ' + this.y + ')';
    	}
    }
    
    //定义与类中相同名字的方法, 成功实现了覆盖
    Point.prototype.toString = function(){ 
    	return this.x + this.y;
    }
    //对类添加新的方法
    Point.prototype.addFun = function(){ 
    	return '新方法：' + (this.x + this.y);
    }
    
    var p = new Point(1, 2);
    console.log(p.toString()); //3
    console.log(p.addFun()); //新方法：3

通过`Object.assign`方法，我们可以很方便地一次向类添加多个方法：

class Point { }
    Object.assign(Point.prototype,{ 
        getName:function(){ 
            return 111;
        },
        getAge:function(){ 
            return 222;
        }
    })
    var obj = new Point();
    console.log(obj.getName()); //111
    console.log(obj.getAge()); //222

另外，类的内部所有定义的方法，都是不可枚举的（non-enumerable），这一点与 ES5 的行为不一致。

class Point { 
      constructor(x, y) { 
        // ...
      }
      toString() { 
        // ...
      }
    }
    
    Object.keys(Point.prototype)
    // []
    Object.getOwnPropertyNames(Point.prototype)
    // ["constructor","toString"]

var Point = function (x, y) { 
      // ...
    };
    Point.prototype.toString = function() { 
      // ...
    };
    
    Object.keys(Point.prototype)
    // ["toString"]
    Object.getOwnPropertyNames(Point.prototype)
    // ["constructor","toString"]

> 1.`Object.keys()`方法返回给定对象自己的`可枚举`属性名称的数组，并以与普通循环相同的顺序进行迭代  
> 2`.Object.getOwnPropertyNames()`方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。

**小结**

> 1.ES6中的类其实就是构造函数的另外一种写法，类的数据类型就是函数，类本身就指向构造函数。使用的时候直接对类使用new命令；  
> 2.类的所有方法都定义在类的prototype属性上面；  
> 3.通过Object.assign()方法可以一次向类添加多个方法；  
> 4.类的内部所有定义的方法，都是不可枚举的，这一点与 ES5 的行为不一致。

### 1.2 constructor 方法 ###

constructor()方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。

class Point { 
    	constructor(){ 
    		console.log('执行') //当实例化对象时该行代码会执行
    	}
    }
    let p = new Point(); //执行

一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加。

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

constructor()方法默认返回实例对象（即this），但是也可以指定constructor方法返回一个全新的对象。

class Desk { 
        constructor(){ 
            this.sun = "sun";
        }
    	todo(){ 
    		console.log('Desk')
    	}
    }
    class Box { 
        constructor(){ 
           return new Desk();// 直接返回一个全新的对象
        }
    	todo(){ 
    		console.log('Box')
    	}
    }
    var obj = new Box();
    console.log(obj.sun);//sun
    obj.todo();//Desk
    
    console.log( new Box() instanceof Box ); //false

> `instanceof` 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

上面代码中，constructor()函数返回一个全新的对象，结果导致实例对象不是Box类的实例。

**小结**

> 1.constructor()方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。  
> 2.一个类必须有constructor()方法，constructor()方法如果没有显式定义，会隐式生成一个constructor()方法。  
> 3.constructor()方法默认返回实例对象（即this），但是也可以指定返回另外一个对象。

### 1.3 类的实例 ###

生成类的实例的写法，与 ES5 完全一样，也是使用new命令。

class Point { 
      // ...
    }
    
    // 报错
    var point = Point(2, 3);
    
    // 正确
    var point = new Point(2, 3);

> 注意：类必须使用new调用，否则会报错。而普通构造函数不用new也可以执行。这是它跟普通构造函数的一个主要区别。

与 ES5 一样，实例的属性除非显式定义在其本身（即定义在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);
    
    console.log( point.hasOwnProperty('x') ); // true
    console.log( point.hasOwnProperty('y') ); // true
    console.log( point.hasOwnProperty('toString') ); // false
    console.log( point.__proto__.hasOwnProperty('toString') ); // true
    
    console.log( "x" in point ); // true
    console.log( "y" in point ); // true
    console.log( "toString" in point ); // true

> `hasOwnProperty()`方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。  
> `in`操作符会在通过对象能够访问给定属性时返回true，无论该属性存在于实例中还是原型中。

上面代码中，x和y都是实例对象point自身的属性（因为定义在this变量上），所以hasOwnProperty()方法返回true，而toString()是原型对象的属性（因为定义在Point类上），所以hasOwnProperty()方法返回false。这些都与 ES5 的行为保持一致。

与 ES5 一样，类的所有实例共享一个原型对象。

var p1 = new Point(2,3);
    var p2 = new Point(3,2);
    
    console.log( p1.__proto__ === p2.__proto__ ); // true

上面代码中，p1和p2都是Point的实例，它们的原型都是Point.prototype，所以\_\_proto\_\_属性是相等的。

这也意味着，可以通过实例的\_\_proto\_\_属性为“类”添加方法。

> `__proto__` 并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性，虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性，但依旧不建议在生产中使用该属性，避免对环境产生依赖。生产环境中，我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型，然后再来为原型添加方法/属性。
> 
> `Object.getPrototypeOf()`方法用于获取指定对象的原型对象（也就是\_\_protp\_\_的指向）。

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.与 ES5 一样，实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。  
> 2.类的所有实例共享一个原型对象，它们的原型都是Person.prototype，所以\_\_proto\_\_属性是相等的。

### 1.4 取值函数（getter）和存值函数（setter） ###

与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

class MyClass { 
    	constructor(){ 
    		//...
    	}
    	get prop (){ 
    		return 'getter';
    	}
    	set prop (value){ 
    		console.log('setter:' + value);
    	}
    }
    	
    let myclass = new MyClass();
    	
    myclass.prop = 123; // setter:123
    console.log(myclass.prop); // getter

上面代码中，prop属性有对应的存值函数和取值函数，因此赋值和读取行为都被自定义了。

存值函数和取值函数是设置在属性的 Descriptor 对象上的。

class CustomHTMLElement { 
      constructor(element) { 
        this.element = element;
      }
      get html() { 
        return this.element.innerHTML;
      }
      set html(value) { 
        this.element.innerHTML = value;
      }
    }
    
    var descriptor = Object.getOwnPropertyDescriptor(
      CustomHTMLElement.prototype, "html"
    );
    
    console.log( "get" in descriptor); // true
    console.log( "set" in descriptor); // true

> `Object.getOwnPropertyDescriptor(obj, prop)`方法返回一个对象，该对象描述给定对象上特定属性的配置（即，一个属性直接存在于对象上，而不存在于对象的原型链中）。返回的对象是可变的，但对其进行突变不会影响原始属性的配置。

console.log(descriptor);

打印结果：  
![在这里插入图片描述][20201209172243531.png]  
上面代码中，存值函数和取值函数是定义在html属性的描述对象上面，这与 ES5 完全一致。

**小结**

> 1.与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。  
> 2.与 ES5 一样，存值函数和取值函数是定义在html属性的描述对象上面。

### 1.5 属性表达式 ###

类的属性名，可以采用表达式。

上面代码中，Square类的方法名getArea，是从表达式得到的。

### 1.6 Class 表达式 ###

与函数一样，类也可以使用表达式的形式定义。

const MyClass = class Me { 
    	getClassName() { 
        	return Me.name;
      	}
    }
    
    let myclass = new MyClass();
    console.log( myclass.getClassName() ); //Me

上面代码使用表达式定义了一个类。需要注意的是，这个类的名字是Me，但是Me只在 Class 的内部可用，指代当前类。在 Class 外部，这个类只能用MyClass引用。

如果类的内部没用到Me的话，可以省略Me，也就是可以写成下面的形式。

const MyClass = class {  /* ... */ };

采用 Class 表达式，可以写出立即执行的 Class。

let person = new class { 
    	constructor(name){ 
    		this.name = name;
    	}
    	sayName() { 
    		console.log(this.name);
    	}
    }('张三')
    
    person.sayName(); // 张三

上面代码中，person是一个立即执行的类的实例。

### 1.7 注意点 ###

#### （1）严格模式 ####

类和模块的内部，默认是严格模式，所以不需要使用use strict指定运行模式。

#### （2）不存在变量提升 ####

类不存在变量提升（hoist）。类必须定义在前，使用在后。因为 ES6 不会把类的声明提升到代码头部。这种规定的原因与下文要提到的继承有关，必须保证子类在父类之后定义。

#### （3）name属性 ####

由于本质上，ES6 的类只是 ES5 的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。

class Point { }
    Point.name // "Point"

name属性总是返回紧跟在class关键字后面的类名。

#### （4）Generator 方法 ####

如果某个方法之前加上星号（\*），就表示该方法是一个 Generator 函数。

class Foo { 
      constructor(...args) { 
        this.args = args;
      }
      * [Symbol.iterator]() { 
        for (let arg of this.args) { 
          yield arg;
        }
      }
    }
    
    for (let x of new Foo('hello', 'world')) { 
      console.log(x);
    }
    // hello
    // world

上面代码中，Foo类的Symbol.iterator方法前有一个星号，表示该方法是一个 Generator 函数。Symbol.iterator方法返回一个Foo类的默认遍历器，for…of循环会自动调用这个遍历器。

#### （5）this 的指向 ####

`类的方法内部如果含有this，它默认指向类的实例。`但是，必须非常小心，一旦单独使用该方法，很可能报错。

class Logger { 
      printName(name = 'there') { 
        this.print(`Hello ${ name}`);
      }
    
      print(text) { 
        console.log(text);
      }
    }
    
    const logger = new Logger();
    const {  printName } = logger;
    printName(); // TypeError: Cannot read property 'print' of undefined

上面代码中，printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境（由于 class 内部是严格模式，所以 this 实际指向的是undefined），从而导致找不到print方法而报错。

**解决方法**

**（a）在构造方法中绑定this**

class Logger { 
      constructor() { 
        this.printName = this.printName.bind(this);
      }
    
      // ...
    }

**（b）使用箭头函数**

class Obj { 
      constructor() { 
        this.getThis = () => this;
      }
    }
    
    const myObj = new Obj();
    myObj.getThis() === myObj // true

`箭头函数内部的this总是指向定义时所在的对象。`上面代码中，箭头函数位于构造函数内部，它的定义生效的时候，是在构造函数执行的时候。这时，箭头函数所在的运行环境，肯定是实例对象，所以this会总是指向实例对象。

**（c）使用Proxy，获取方法的时候，自动绑定this**

## 2. 静态方法 ##

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

class Box{ 
        static a(){ 
            return "我是Box类中的，实例方法，无须实例化，可直接调用！"
        }
    }
    //通过类名直接调用
    console.log(Box.a());//我是Box类中的，实例方法，无须实例化，可直接调用！

静态方法只能在静态方法中调用，不能在实例方法中调用。通过实例方法来调静态方法会报错。

class Box{ 
        static a(){ 
            return "我只允许被静态方法调用哦！"
        }
        static b(){ 
            //通过静态方法b来调用静态方法a
            console.log(this.a());
        }
    }
    Box.b();//我只允许被静态方法调用 哦
    
    var obj = new Box();
    obj.b();//报错 Uncaught TypeError: obj.b is not a function

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

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

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

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

class Box { 
        static a() { 
            console.log('我是父类的静态方法a');
        }
    }
    class Desk extends Box { }
    
    Desk.a();  //我是父类的静态方法a

倘若想通过子类的静态方法调用父类的静态方法，需要从super对象上调用。

class Box { 
        static a() { 
            console.log('我是通过super来调取出来的');
        }
    }
    class Desk extends Box { 
        static a(){ 
            return super.a();
        }
    }
    Desk.a();

**小结**

> 1.静态方法不会被实例继承，而是直接通过类来调用。  
> 2.静态方法只能在静态方法中调用，不能在实例方法中调用。  
> 3.类的方法内部的this默认指向类的实例。而静态方法内部的this指向的是类，而不是实例。  
> 4.静态方法可以与非静态方法重名。  
> 5.父类的静态方法，可以被子类继承。  
> 6.想通过子类的静态方法调用父类的静态方法，需要从super对象上调用。

## 3. 实例属性的新写法 ##

实例属性除了定义在constructor()方法里面的this上面，也可以定义在类的最顶层。

//写法一：实例属性this._count定义在constructor()方法里面
    class IncreasingCounter { 
      constructor() { 
        this._count = 0;
      }
      get value() { 
        return this._count;
      }
    }
    
    //写法二：定义在类的最顶层，其他都不变
    class IncreasingCounter { 
      _count = 0;
      get value() { 
        return this._count;
      }
    }

当实例属性\_count与方法处于同一个层级时，不需要在实例属性前面加上this。

## 4. 静态属性 ##

静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。

class Foo { }
    
    Foo.prop = 1;
    console.log( Foo.prop ); // 1

上面的写法为Foo类定义了一个静态属性prop。

## 5. 私有方法和私有属性 ##

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

但 ES6 不提供，只能通过变通方法模拟实现。

**现有解决方案**

**（1）在命名上加以区别**

但是，这种命名是不保险的，在类的外部，还是可以调用到这个方法。

class Widget { 
      // 公有方法
      foo (num) { 
        this._bar(num);
      }
      // 私有方法
      _bar(num) { 
        return this.snaf = num;
      }
    }

**（2）将私有方法移出类**

因为类内部的所有方法都是对外可见的，索性将私有方法移出类。

class Widget { 
      foo (num) { 
        bar.call(this, num);
      }
    }
    
    function bar(num) { 
      return this.snaf = num;
    }

上面代码中，foo是公开方法，内部调用了bar.call(this, num)。这使得bar()实际上成为了当前类的私有方法。

**（3）利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值**

上面代码中，bar和snaf都是Symbol值，一般情况下无法获取到它们，因此达到了私有方法和私有属性的效果。但是也不是绝对不行，Reflect.ownKeys()依然可以拿到它们。

> `Reflect.ownKeys()`方法返回target对象自己的`所有`属性键的数组（包括不可枚举）。  
> 区别于`Object.keys()`方法，返回的只有`可枚举`属性名称的数组。

const inst = new myClass();
    
    Reflect.ownKeys(myClass.prototype)
    // [ 'constructor', 'foo', Symbol(bar) ]

上面代码中，Symbol 值的属性名依然可以从类的外部拿到。

## 6. new.target 属性 ##

--------------------

# 二. Class 的继承 #

## 1. 简介 ##

Class 可以通过extends关键字实现继承，子类将继承父类的所有属性和方法（包括前面提到的静态方法）。这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

class Farther { 
        constructor(name,age){ 
            console.log("farther")
            this.name = name;
            this.age = age;
        }
        say(){ 
            console.log(this.name, this.age);
        }
    }
    class FirstChild extends Farther { 
        constructor(name,age){ 
            super(name,age); //调用父类的constructor(name,age)
        }
        say(){ 
        	console.log("child");
            super.say();
        }
    }
    var wa = new FirstChild("hst","23");
    wa.say();

输出：  
![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20201210143325673.png][https_img-blog.csdnimg.cn_20201210143325673.png]  
上面代码中，子类的constructor方法和say方法中，都出现了super关键字，它在这里表示父类的构造函数，用来新建父类的this对象。

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

如果子类First没有显式的定义constructor，那么下面的代码将被默认添加。换言之，如果constructor函数中只有super的话，该constructor函数可以省略。

constructor(name,color){ 
    	super(name,color);
    }

**小结**

> 1.super关键字，它在子类里面表示父类的构造函数，用来新建父类的this对象。  
> 2.由于子类实例的构建基于父类实例，所以在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。  
> 3.子类必须在constructor方法中调用super方法，如果子类没有显式的定义constructor，那么super将被默认添加。

## 2. Object.getPrototypeOf() ##

> `Object.getPrototypeOf()`方法返回\[\[Prototype\]\]指定对象的原型（即内部属性的值）。

Object.getPrototypeOf()方法可以用来从子类上获取父类。

console.log(Object.getPrototypeOf(FirstChild) == Farther); //true

因此，可以使用这个方法判断，一个类是否继承了另一个类。

## 3. super 关键字 ##

super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。

### 3.1 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() { 
            console.log(new.target.name);
    	}
    }
    class B extends A { 
        constructor() { 
            super();
        }
    }
    new A() // A
    new B() // B

上面代码中，new.target指向当前正在执行的函数。可以看到，在super()执行时，它指向的是子类B的构造函数，也就是说，super()内部的this指向的是B。

### 3.2 super作为对象 ###

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.a = 'hst'  //this指向实例
    	}
    }
    A.prototype.x = 100;
    
    class B extends A { 
      constructor() { 
        super();
        console.log(super.a); // undefined
        console.log(super.x); // 200
      }
    }
    
    new B();

上面代码中，a是父类A实例的属性，super.a就引用不到它。如果属性定义在父类的原型对象上，super就可以取到。

ES6 规定，在子类普通方法中通过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();
      }
    }
    
    let b = new B();
    b.m() // 2

上面代码中，super.print()虽然调用的是A.prototype.print()，但是A.prototype.print()内部的this指向子类B的实例。也就是说，实际上执行的是super.print.call(this)。

由于this指向子类实例，所以如果通过super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性。

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

上面代码中，super.x赋值为3，这时等同于对this.x赋值为3。而当读取super.x的时候，读的是A.prototype.x，所以返回undefined。

如果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
    
    var child = new Child();
    child.myMethod(2); // instance 2

上面代码中，super在静态方法之中指向父类，在普通方法之中指向父类的原型对象。

另外，在子类的静态方法中通过super调用父类的方法时，方法内部的this指向当前的子类，而不是子类的实例。

class A { 
      constructor() { 
        this.x = 1;
      }
      static print() { 
        console.log(this.x);
      }
    }
    
    class B extends A { 
      constructor() { 
        super();
        this.x = 2;
      }
      static m() { 
        super.print();
      }
    }
    
    B.x = 3;
    B.m() // 3

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

注意，使用super的时候，必须显式指定是作为函数、还是作为对象使用，否则会报错。

class A { }
    
    class B extends A { 
      constructor() { 
        super();
        console.log(super); // 报错
      }
    }

上面代码中，console.log(super)当中的super，无法看出是作为函数使用，还是作为对象使用，所以 JavaScript 引擎解析代码的时候就会报错。这时，如果能清晰地表明super的数据类型，就不会报错。

class A { }
    
    class B extends A { 
      constructor() { 
        super();
        console.log(super.valueOf() instanceof B); // true
      }
    }
    
    let b = new B();

> `valueOf()`函数用于返回指定对象的原始值。

上面代码中，super.valueOf()表明super是一个对象，因此就不会报错。同时，由于super使得this指向B的实例，所以super.valueOf()返回的是一个B的实例。

**小结**

> 1.类的方法内部如果含有this，它默认指向类的实例。  
> 2.实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。  
> 3.super作为函数时，代表的是父类的构造函数，返回的是子类B的实例。也就是说super内部的this指向的是子类的实例。  
> 4.super作为对象时，在普通方法中，指向父类的原型对象（prototype）。在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。  
> 5.super作为对象时，在静态方法中，指向父类。在子类的静态方法中通过super调用父类的方法时，方法内部的this指向当前的子类。

[20201126144617969.png_pic_left]: /images/20221120/09303aa619a4421fa824ba33c3e116c2.png
[20201209172243531.png]: https://img-blog.csdnimg.cn/20201209172243531.png
[https_img-blog.csdnimg.cn_20201210143325673.png]: https://img-blog.csdnimg.cn/20201210143356434.png