詳解es6 class語法糖中constructor方法和super的作用

       大多數面向對象的編程語言都支持類和類繼承的特性,而JS卻不支持這些特性,只能通過其他方法定義并關聯多個相似的對象,這種狀態一直延續到了ES5。由于類似的庫層出不窮,最終還是在ECMAScript 6中引入了類的特性。本文將詳細介紹ES6中的類,ES6 的 class 屬于一種“語法糖”,所以只是寫法更加優雅,更加像面對對象的編程,其思想和 ES5 是一致的。

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

等同于

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

其中 constructor 方法是類的構造函數,是一個默認方法,通過 new 命令創建對象實例時,自動調用該方法。一個類必須有 constructor 方法,如果沒有顯式定義,一個默認的 consructor 方法會被默認添加。所以即使你沒有添加構造函數,也是會有一個默認的構造函數的。一般 constructor 方法返回實例對象 this ,但是也可以指定 constructor 方法返回一個全新的對象,讓返回的實例對象不是該類的實例。

下面好好分析一下 super 關鍵字的作用

super 這個關鍵字,既可以當做函數使用,也可以當做對象使用。這兩種情況下,它的用法完全不用。

1. 當做函數使用

class A {}
class B extends A {
  constructor() {
    super();  // ES6 要求,子類的構造函數必須執行一次 super 函數,否則會報錯。
  }
}

注:在 constructor 中必須調用 super 方法,因為子類沒有自己的 this 對象,而是繼承父類的 this 對象,然后對其進行加工,而 super 就代表了父類的構造函數。super 雖然代表了父類 A 的構造函數,但是返回的是子類 B 的實例,即 super 內部的 this 指的是 B,因此 super() 在這里相當于 ```A.prototype.constructor.call(this, props)``。

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

可以看到,在 super() 執行時,它指向的是 子類 B 的構造函數,而不是父類 A 的構造函數。也就是說,super() 內部的 this 指向的是 B。

2. 當做對象使用

在普通方法中,指向父類的原型對象;在靜態方法中,指向父類。

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

  上面代碼中,子類 B 當中的 super.c(),就是將 super 當作一個對象使用。這時,super 在普通方法之中,指向 A.prototype,所以 super.c() 就相當于 A.prototype.c()

 

通過 super 調用父類的方法時,super 會綁定子類的 this

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

上面代碼中,super.s() 雖然調用的是 A.prototytpe.s(),但是 A.prototytpe.s()會綁定子類 B 的 this,導致輸出的是 2,而不是 1。也就是說,實際上執行的是 super.s.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,但并沒有 x 方法,所以返回 undefined。

 

注意,使用 super 的時候,必須顯式指定是作為函數,還是作為對象使用,否則會報錯。

class A {}
class B extends A {
  constructor() {
    super();
    console.log(super); // 報錯
  }
}

上面代碼中,console.log(super); 的當中的 super,無法看出是作為函數使用,還是作為對象使用,所以 JavaScript 引擎解析代碼的時候就會報錯。這是,如果能清晰的表明 super 的數據類型,就不會報錯。

最后,由于對象總是繼承其他對象的,所以可以在任意一個對象中,使用 super 關鍵字。

結語:
ES6 的 class 畢竟是一個“語法糖”,所以只要理解了 JavaScript 中對象的概念和面向對象的思想,class 就不難理解啦。

posted @ 2019-10-03 23:04 一顆小石子激起的浪花 閱讀(...) 評論(...) 編輯 收藏
乐就娱乐