Làm thế nào để mở rộng một lớp học mà không cần phải sử dụng super trong ES6?

Có thể mở rộng một lớp trong ES6 mà không gọi superphương thức để gọi lớp cha không?

CHỈNH SỬA: Câu hỏi có thể gây hiểu lầm. Nó là tiêu chuẩn mà chúng ta phải gọi super()hay tôi đang thiếu một cái gì đó?

Ví dụ:

class Character {
   constructor(){
      console.log('invoke character');
   }
}

class Hero extends Character{
  constructor(){
      super(); // exception thrown here when not called
      console.log('invoke hero');
  }
}

var hero = new Hero();

Khi tôi không gọi super()lớp dẫn xuất, tôi gặp sự cố về phạm vi ->this is not defined

Tôi đang chạy điều này với iojs --harmony trong v2.3.0

Các quy tắc cho các lớp ES2015 (ES6) về cơ bản bao gồm:

1. Trong một phương thức khởi tạo lớp con, thiskhông thể được sử dụng cho đến khi superđược gọi.
2. Các hàm tạo lớp ES6 PHẢI gọi supernếu chúng là các lớp con hoặc chúng phải trả về một cách rõ ràng một số đối tượng để thay thế đối tượng chưa được khởi tạo.

Điều này liên quan đến hai phần quan trọng của thông số kỹ thuật ES2015.

Phần 8.1.1.3.4 xác định logic để quyết định những gì thistrong hàm. Phần quan trọng đối với các lớp là nó có thisthể ở "uninitialized"trạng thái và khi ở trạng thái này, việc cố gắng sử dụng thissẽ ném ra một ngoại lệ.

Phần 9.2.2 , [[Construct]]xác định hành vi của các hàm được gọi qua newhoặc super. Khi gọi một phương thức thiskhởi tạo lớp cơ sở, được khởi tạo ở bước # 8 [[Construct]], nhưng đối với tất cả các trường hợp khác, thislà chưa được khởi tạo. Vào cuối quá trình xây dựng, GetThisBindingđược gọi, vì vậy nếu supervẫn chưa được gọi (do đó đang khởi tạo this), hoặc một đối tượng thay thế rõ ràng không được trả về, dòng cuối cùng của lệnh gọi hàm tạo sẽ ném ra một ngoại lệ.

Đã có nhiều câu trả lời và nhận xét nói rằng super PHẢI là dòng đầu tiên bên trong constructor. Điều đó chỉ đơn giản là sai. Câu trả lời @loganfsmyth có các tham chiếu bắt buộc của các yêu cầu, nhưng nó trở thành:

Hàm tạo kế thừa ( extends) phải gọi supertrước khi sử dụng thisvà trước khi trả về ngay cả khi thiskhông được sử dụng

Xem phân đoạn bên dưới (hoạt động trong Chrome ...) để biết lý do tại sao có thể có câu lệnh (không sử dụng this) trước khi gọi super.

'use strict';
var id = 1;
function idgen() {
  return 'ID:' + id++;
}

class Base {
  constructor(id) {
    this.id = id;
  }

  toString() { return JSON.stringify(this); }
}

class Derived1 extends Base {
  constructor() {
    var anID = idgen() + ':Derived1';
    super(anID);
    this.derivedProp = this.baseProp * 2;
  }
}

alert(new Derived1());

Cú pháp lớp es6 mới chỉ là một ký hiệu khác cho các "lớp" es5 "cũ" với các nguyên mẫu. Do đó, bạn không thể khởi tạo một lớp cụ thể mà không thiết lập nguyên mẫu của nó (lớp cơ sở).

Đó giống như việc bạn cho phô mai vào bánh sandwich mà không làm. Ngoài ra, bạn không thể cho pho mát trước khi làm bánh sandwich, vì vậy ...

... sử dụng thistừ khóa trước khi gọi siêu lớp với super()cũng không được phép.

// valid: Add cheese after making the sandwich
class CheeseSandwich extend Sandwich {
    constructor() {
        super();
        this.supplement = "Cheese";
    }
}

// invalid: Add cheese before making sandwich
class CheeseSandwich extend Sandwich {
    constructor() {
        this.supplement = "Cheese";
        super();
    }
}

// invalid: Add cheese without making sandwich
class CheeseSandwich extend Sandwich {
    constructor() {
        this.supplement = "Cheese";
    }
}

Nếu bạn không chỉ định một phương thức khởi tạo cho một lớp cơ sở, định nghĩa sau sẽ được sử dụng:

constructor() {}

Đối với các lớp dẫn xuất, hàm tạo mặc định sau được sử dụng:

constructor(...args) {
    super(...args);
}

CHỈNH SỬA: Tìm thấy cái này trên developer.mozilla.org:

When used in a constructor, the super keyword appears alone and must be used before the this keyword can be used.

Nguồn

Chỉ cần đăng ký để đăng giải pháp này vì các câu trả lời ở đây không làm tôi hài lòng ít nhất vì thực sự có một cách đơn giản để giải quyết vấn đề này. Điều chỉnh mẫu tạo lớp của bạn để ghi đè lôgic của bạn trong một phương thức con trong khi chỉ sử dụng hàm tạo siêu và chuyển tiếp các đối số của hàm tạo tới nó.

Như trong bạn không tạo một phương thức khởi tạo trong các lớp con của mình mà chỉ tham chiếu đến một phương thức được ghi đè trong lớp con tương ứng.

Điều đó có nghĩa là bạn tự thoát khỏi chức năng khởi tạo được thực thi theo bạn và kiềm chế với một phương thức thông thường - có thể bị ghi đè và không thực thi super () khi bạn cho phép mình lựa chọn nếu, ở đâu và cách bạn muốn gọi super (đầy đủ tùy chọn) ví dụ:

super.ObjectConstructor(...)

class Observable {
  constructor() {
    return this.ObjectConstructor(arguments);
  }

  ObjectConstructor(defaultValue, options) {
    this.obj = { type: "Observable" };
    console.log("Observable ObjectConstructor called with arguments: ", arguments);
    console.log("obj is:", this.obj);
    return this.obj;
  }
}

class ArrayObservable extends Observable {
  ObjectConstructor(defaultValue, options, someMoreOptions) {
    this.obj = { type: "ArrayObservable" };
    console.log("ArrayObservable ObjectConstructor called with arguments: ", arguments);
    console.log("obj is:", this.obj);
    return this.obj;
  }
}

class DomainObservable extends ArrayObservable {
  ObjectConstructor(defaultValue, domainName, options, dependent1, dependent2) {
    this.obj = super.ObjectConstructor(defaultValue, options);
    console.log("DomainObservable ObjectConstructor called with arguments: ", arguments);
    console.log("obj is:", this.obj);
    return this.obj;
  }
}

var myBasicObservable = new Observable("Basic Value", "Basic Options");
var myArrayObservable = new ArrayObservable("Array Value", "Array Options", "Some More Array Options");
var myDomainObservable = new DomainObservable("Domain Value", "Domain Name", "Domain Options", "Dependency A", "Depenency B");

chúc mừng!

Bạn có thể bỏ qua super () trong lớp con của mình, nếu bạn bỏ qua hoàn toàn hàm tạo trong lớp con của mình. Một hàm tạo mặc định 'ẩn' sẽ tự động được đưa vào lớp con của bạn. Tuy nhiên, nếu bạn bao gồm hàm tạo trong lớp con của mình, super () phải được gọi trong hàm tạo đó.

class A{
   constructor(){
      this.name = 'hello';   
   }
}
class B extends A{
   constructor(){
      // console.log(this.name); // ReferenceError
      super();
      console.log(this.name);
   }
}
class C extends B{}  // see? no super(). no constructor()

var x = new B; // hello
var y = new C; // hello

Đọc cái này để biết thêm thông tin.

Câu trả lời bằng justyourimage là cách dễ nhất, nhưng ví dụ của anh ấy hơi quá đà. Đây là phiên bản chung:

class Base {
    constructor(){
        return this._constructor(...arguments);
    }

    _constructor(){
        // just use this as the constructor, no super() restrictions
    }
}

class Ext extends Base {
    _constructor(){ // _constructor is automatically called, like the real constructor
        this.is = "easy"; // no need to call super();
    }
}

Đừng mở rộng cái thật constructor(), chỉ sử dụng cái giả _constructor()cho logic khởi tạo.

Lưu ý, giải pháp này làm cho việc gỡ lỗi trở nên khó chịu vì bạn phải bước vào một phương pháp bổ sung cho mỗi lần khởi tạo.

Thử:

class Character {
   constructor(){
     if(Object.getPrototypeOf(this) === Character.prototype){
       console.log('invoke character');
     }
   }
}


class Hero extends Character{
  constructor(){
      super(); // throws exception when not called
      console.log('invoke hero');
  }
}
var hero = new Hero();

console.log('now let\'s invoke Character');
var char = new Character();

Demo

Tôi khuyên bạn nên sử dụng OODK-JS nếu bạn có ý định phát triển các khái niệm OOP sau đây.

OODK(function($, _){

var Character  = $.class(function ($, µ, _){

   $.public(function __initialize(){
      $.log('invoke character');
   });
});

var Hero = $.extends(Character).class(function ($, µ, _){

  $.public(function __initialize(){
      $.super.__initialize();
      $.log('invoke hero');
  });
});

var hero = $.new(Hero);
});

Giải pháp đơn giản: Tôi nghĩ rằng nó rõ ràng không cần giải thích.

class ParentClass() {
    constructor(skipConstructor = false) { // default value is false
        if(skipConstructor) return;
        // code here only gets executed when 'super()' is called with false
    }
}
class SubClass extends ParentClass {
    constructor() {
        super(true) // true for skipping ParentClass's constructor.
        // code
    }
}

@Bergi đã đề cập new.target.prototype, nhưng tôi đang tìm kiếm một ví dụ cụ thể chứng minh rằng bạn có thể truy cập this(hoặc tốt hơn, tham chiếu đến đối tượng mà mã máy khách đang tạo new, xem bên dưới) mà không cần phải gọi super().

Nói là rẻ, cho tôi xem mã ... Vì vậy, đây là một ví dụ:

class A { // Parent
    constructor() {
        this.a = 123;
    }

    parentMethod() {
        console.log("parentMethod()");
    }
}

class B extends A { // Child
    constructor() {
        var obj = Object.create(new.target.prototype)
        // You can interact with obj, which is effectively your `this` here, before returning
        // it to the caller.
        return obj;
    }

    childMethod(obj) {
        console.log('childMethod()');
        console.log('this === obj ?', this === obj)
        console.log('obj instanceof A ?', obj instanceof A);
        console.log('obj instanceof B ?',  obj instanceof B);
    }
}

b = new B()
b.parentMethod()
b.childMethod(b)

Cái nào sẽ xuất ra:

parentMethod()
childMethod()
this === obj ? true
obj instanceof A ? true
obj instanceof B ? true

Vì vậy, bạn có thể thấy rằng chúng ta đang tạo hiệu quả một đối tượng kiểu B(lớp trẻ) cũng là một đối tượng kiểu A(lớp cha của nó) và trong childMethod()các con Bchúng tôi đã thistrỏ đến đối tượng objmà chúng tôi tạo ra trong B constructorvới Object.create(new.target.prototype).

Và tất cả những điều này mà không cần quan tâm đến superchút nào.

Điều này thúc đẩy thực tế là trong JS, a constructorcó thể trả về một đối tượng hoàn toàn khác khi mã máy khách tạo một phiên bản mới với new.

Hy vọng điều này sẽ giúp ai đó.