ES6 class类的理解学习

最新推荐文章于 2024-09-02 17:34:07 发布

hst❀

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量277

点赞数 1

分类专栏： ES6 文章标签： javascript es6 class

本文链接：https://blog.csdn.net/huangsting/article/details/110185865

版权

ES6 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一. 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);

打印出来是一个对象：

在这里插入图片描述
我们发现，构造函数的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);

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

小结

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

1.5 属性表达式

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

let methodName = 'getArea';

class Square {
  constructor(length) {
    // ...
  }
  [methodName]() {
    console.log(methodName);
  }
}
	
let sq = new Square();
sq.getArea(); // getArea

上面代码中，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

function selfish (target) {
  const cache = new WeakMap();
  const handler = {
    get (target, key) {
      const value = Reflect.get(target, key);
      if (typeof value !== 'function') {
        return value;
      }
      if (!cache.has(value)) {
        cache.set(value, value.bind(target));
      }
      return cache.get(value);
    }
  };
  const proxy = new Proxy(target, handler);
  return proxy;
}

const logger = selfish(new Logger());

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值

const bar = Symbol('bar');
const snaf = Symbol('snaf');

export default class myClass{
  // 公有方法
  foo(num) {
    this[bar](num);
  }
  // 私有方法
  [bar](num) {
    return this[snaf] = num;
  }
};

上面代码中，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
上面代码中，子类的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指向当前的子类。

hst❀

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6 class类的理解学习

文章目录一.类的由来小结一.类的由来传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。JavaScript 语言中，生成实例对象的传统方法是通过构造函数。构造函数示例：function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y
复制链接

扫一扫