web-dev-qa-db-ja.com

ES6のクラス以外の値を返す

最近、ES6でクラスをテストしてきましたが、クラスを作成するときに、コンストラクターによって指定された値を指定できないことに気付きました。

以前はES5でこれが可能でした。

どちらの場合でも、new MyClassを使用してクラスをインスタンス化します。これを行う理由は、関数のみを含む現在のクラスのサブセットを返すことができるようにするためです。

ES5-My class was init with: Blahを返します

var MyClass = function() {
  this.initVar = 'Blah'

  return 'My Class was init with: ' + this.initVar
}

ES6-{}を返します

class Bob {
  constructor() {
   return 'hello' 
  }
}
javascriptconstructorecmascript-6
18
MikaAK

TC39 Webサイトの Class article によると、ES6クラス構文には、クラス定義でそのような関数が提供されていない場合に呼び出される暗黙のコンストラクター関数があります。

これは、独自のコンストラクタを提供し、必要なオブジェクトを返すことでオーバーライドできます。例：

class Bob {
  constructor(name) {
    return {hi: name};  // returns an object other than *this*.
  }
}

実行中：

var bob = new Bob('bob');
console.log(bob.hi); // 'bob'

クラスを拡張するには、次のようにします。

class Bill extends Bob {
}

ただし、extendsにも暗黙のコンストラクターがあるため、Bob.prototypeから継承するBillの新しいインスタンスを返します。 hiはコンストラクタで定義されていて継承されていないため、次のようになります。

var bill = new Bill('bill');
console.log(bill.hi);  // undefined

BillをBobと同じように初期化するには、superを呼び出すコンストラクタを提供します。この呼び出しは、thisBillのオブジェクトもsuperによって返される値に変更します。

class Bill extends Bob {
  constructor(name) {
    super(name);
  }
}

今：

var bill = new Bill('bill');
console.log(bill.hi); // bill

classDeclarationの本体は常に strict mode code であることにも注意してください。

実行可能なスニペットとして：

class Bob {
  constructor(name) {
    return {hi: name};  // returns an object other than *this*.
  }
}

var bob = new Bob('bob');
console.log(bob.hi); // 'bob'

class Bill extends Bob {
  constructor(name) {
    super(name);
  }
}

var bill = new Bill('bill');
console.log(bill.hi); // bill
29
RobG

次のフィドルを比較してください： es5 および es6

Es5で可能だったと言うことがes6でも可能です。新しいキーワードを使用すると、そのクラスの新しいオブジェクトが作成され、newを使用しないと、関数が実行されるという小さなことがあります。

  1. したがって、es5とes6の両方でvar x= Bob();と言うと、コンストラクター関数を実行し、新しいオブジェクトを作成しないため、何かを返します。

  2. そして、var x= new Bob();と言うと、コンストラクター関数によって初期化された新しいオブジェクトを取得します。

これはes5クラスとes6の両方に適用されます。これは、es6クラスは何も新しいことを行わないため、構文のためにのみ導入されているためです。

Edit：クラスを拡張する場合：es6でクラスを拡張して、スーパーコンストラクターが呼び出されることを期待することはできないため、明示的に呼び出す必要があります子クラスコンストラクター内。コードを参照してください：

class Bob {
  constructor() {
    return {hi: 'bob'}
  }
}

class Bill extends Bob {
  constructor() {
   return super();// here you should retun the called super constructer
  }
}

var x=  Bob();
console.log(Bob);

 x= new Bill();
console.log(x.hi);

this は機能しませんが、- this は機能します。

0
Naeem Shaikh

ES6は実際には{}を返しませんが、その場合はクラス（（constructor））オブジェクトを返します。クラスコンストラクターはオブジェクトを返すことができますが、プリミティブ値を返すことはできません。したがって、[String] "hello"の代わりに[Object] Bobを返します。次の方法で任意の値を返すことができます。

class Bob {
  constructor() {
   return ()=>'hello';
  }
}
const bob = new Bob()();

返された[Function]はオブジェクトであるため、返してすぐに起動して、いくつかのプリミティブ値を返すことができます。 [文字列] "hello"。

0
Paweł