ทางเลือกตัวแปรคลาส ES6

ปัจจุบันใน ES5 พวกเราหลายคนกำลังใช้รูปแบบต่อไปนี้ในกรอบงานเพื่อสร้างคลาสและตัวแปรคลาสซึ่งสะดวกสบาย:

// ES 5
FrameWork.Class({

    variable: 'string',
    variable2: true,

    init: function(){

    },

    addItem: function(){

    }

});

ใน ES6 คุณสามารถสร้างคลาสได้ แต่ไม่มีตัวเลือกให้มีคลาสตัวแปร:

// ES6
class MyClass {
    const MY_CONST = 'string'; // <-- this is not possible in ES6
    constructor(){
        this.MY_CONST;
    }
}

น่าเสียดายที่ข้อความข้างต้นใช้งานไม่ได้เนื่องจากคลาสเท่านั้นที่สามารถมีวิธีได้

ฉันเข้าใจว่าฉันสามารถthis.myVar = trueในconstructor... แต่ฉันไม่ต้องการที่จะ 'ขยะ' คอนสตรัคของฉันโดยเฉพาะอย่างยิ่งเมื่อฉันมี 20-30 + พารามิเตอร์สำหรับการเรียนที่ใหญ่กว่า

ฉันคิดหลายวิธีในการจัดการปัญหานี้ แต่ยังไม่พบสิ่งที่ดี (ตัวอย่างเช่น: สร้างClassConfigจัดการและผ่านparameterวัตถุซึ่งมีการประกาศแยกต่างหากจากชั้นเรียนแล้วจัดการจะแนบไปกับชั้นเรียนผมคิดเกี่ยวกับ.. WeakMapsยังจะบูรณาการอย่างใด.)

คุณจะต้องมีแนวคิดอะไรในการรับมือกับสถานการณ์นี้?

ปรับปรุง 2018:

ขณะนี้มีข้อเสนอ 3 ขั้นตอน - ฉันรอคอยที่จะทำให้คำตอบนี้ล้าสมัยในไม่กี่เดือน

ในระหว่างนี้ผู้ใช้ TypeScript หรือ babel สามารถใช้ไวยากรณ์ได้:

varName = value

ภายในคลาสการประกาศ / การแสดงออกของร่างกายและมันจะกำหนดตัวแปร หวังว่าในอีกไม่กี่เดือน / สัปดาห์ฉันจะสามารถโพสต์การอัปเดตได้

อัปเดต: Chrome 74 มาพร้อมกับไวยากรณ์นี้ใช้งานได้แล้ว

หมายเหตุในวิกิ ES สำหรับข้อเสนอใน ES6 ( คลาสที่เล็กที่สุด ):

ไม่มี (โดยเจตนา) ไม่มีวิธีการประกาศโดยตรงในการกำหนดคุณสมบัติของข้อมูลต้นแบบ (นอกเหนือจากวิธีการ) คุณสมบัติคลาสหรือคุณสมบัติอินสแตนซ์

คุณสมบัติคลาสและคุณสมบัติข้อมูลต้นแบบต้องสร้างขึ้นนอกการประกาศ

คุณสมบัติที่ระบุในคำจำกัดความของคลาสจะถูกกำหนดให้กับคุณลักษณะเดียวกันกับที่ปรากฏในวัตถุตามตัวอักษร

ซึ่งหมายความว่าสิ่งที่คุณขอได้รับการพิจารณาและตัดสินใจอย่างชัดเจน

แต่ ... ทำไม

คำถามที่ดี. คนดีของ TC39 ต้องการประกาศคลาสเพื่อประกาศและกำหนดความสามารถของคลาส ไม่ใช่สมาชิก การประกาศคลาส ES6 กำหนดสัญญาสำหรับผู้ใช้

โปรดจำไว้ว่าคำจำกัดความของคลาสจะกำหนดวิธีการต้นแบบ - การกำหนดตัวแปรในต้นแบบไม่ใช่สิ่งที่คุณทำ แน่นอนคุณสามารถใช้:

constructor(){
    this.foo = bar
}

ในตัวสร้างแบบที่คุณแนะนำ ยังเห็นบทสรุปของฉันทามติที่

ES7 ขึ้นไป

ข้อเสนอใหม่สำหรับ ES7 กำลังดำเนินการซึ่งอนุญาตให้ตัวแปรอินสแตนซ์ที่กระชับมากขึ้นผ่านการประกาศคลาสและนิพจน์ - https://esdiscuss.org/topic/es7-property-initializers

เพียงเพิ่มคำตอบของเบนจามิน - ตัวแปรระดับเป็นไปได้ แต่คุณจะไม่ใช้prototypeเพื่อตั้งค่า

สำหรับตัวแปรคลาสจริงคุณต้องการทำสิ่งต่อไปนี้:

class MyClass {}
MyClass.foo = 'bar';

จากภายในวิธีการเรียนที่ตัวแปรสามารถเข้าถึงได้เป็นthis.constructor.foo(หรือMyClass.foo)

คุณสมบัติคลาสเหล่านี้มักจะไม่สามารถเข้าถึงได้จากอินสแตนซ์ของคลาส คือMyClass.fooให้'bar'แต่new MyClass().fooเป็นundefined

ถ้าคุณต้องการที่จะเข้าถึงตัวแปรคลาสของคุณจากอินสแตนซ์คุณจะต้องกำหนด getter เพิ่มเติม:

class MyClass {
    get foo() {
        return this.constructor.foo;
    }
}

MyClass.foo = 'bar';

ฉันได้ทดสอบสิ่งนี้กับ Traceur เท่านั้น แต่ฉันเชื่อว่ามันจะทำงานได้เหมือนกันในการติดตั้งแบบมาตรฐาน

จาวาสคริปต์ไม่ได้จริงๆต้องเรียน แม้จะใช้ ES6 เรากำลังมองหาภาษาเชิงวัตถุหรือต้นแบบมากกว่าภาษาที่ใช้ในระดับเดียวกัน ในการใด ๆfunction X () {}, จุดกลับไปX.prototype.constructor Xเมื่อnewผู้ประกอบการที่ใช้ในวัตถุใหม่จะถูกสร้างสืบทอดX X.prototypeใด ๆที่ไม่ได้กำหนดคุณสมบัติในการที่วัตถุใหม่ (รวมconstructor) จะเงยหน้าขึ้นมาจากที่นั่น เราสามารถคิดสิ่งนี้เป็นการสร้างคุณสมบัติของวัตถุและคลาส

Babelรองรับตัวแปรคลาสใน ESNext ให้ตรวจสอบตัวอย่างนี้:

class Foo {
  bar = 2
  static iha = 'string'
}

const foo = new Foo();
console.log(foo.bar, foo.iha, Foo.bar, Foo.iha);
// 2, undefined, undefined, 'string'

ในตัวอย่างของคุณ:

class MyClass {
    const MY_CONST = 'string';
    constructor(){
        this.MY_CONST;
    }
}

เนื่องจาก MY_CONST เป็นแบบดั้งเดิมhttps://developer.mozilla.org/en-US/docs/Glossary/Primitiveเราสามารถทำได้:

class MyClass {
    static get MY_CONST() {
        return 'string';
    }
    get MY_CONST() {
        return this.constructor.MY_CONST;
    }
    constructor() {
        alert(this.MY_CONST === this.constructor.MY_CONST);
    }
}
alert(MyClass.MY_CONST);
new MyClass

// alert: string ; true

แต่ถ้าMY_CONSTเป็นประเภทการอ้างอิงเช่นstatic get MY_CONST() {return ['string'];}การส่งออกการแจ้งเตือนเป็นสตริงเท็จ ในกรณีดังกล่าวdeleteผู้ประกอบการสามารถทำเคล็ดลับ:

class MyClass {
    static get MY_CONST() {
        delete MyClass.MY_CONST;
        return MyClass.MY_CONST = 'string';
    }
    get MY_CONST() {
        return this.constructor.MY_CONST;
    }
    constructor() {
        alert(this.MY_CONST === this.constructor.MY_CONST);
    }
}
alert(MyClass.MY_CONST);
new MyClass

// alert: string ; true

และในที่สุดสำหรับตัวแปรระดับไม่ได้const:

class MyClass {
    static get MY_CONST() {
        delete MyClass.MY_CONST;
        return MyClass.MY_CONST = 'string';
    }
    static set U_YIN_YANG(value) {
      delete MyClass.MY_CONST;
      MyClass.MY_CONST = value;
    }
    get MY_CONST() {
        return this.constructor.MY_CONST;
    }
    set MY_CONST(value) {
        this.constructor.MY_CONST = value;
    }
    constructor() {
        alert(this.MY_CONST === this.constructor.MY_CONST);
    }
}
alert(MyClass.MY_CONST);
new MyClass
// alert: string, true
MyClass.MY_CONST = ['string, 42']
alert(MyClass.MY_CONST);
new MyClass
// alert: string, 42 ; true

เนื่องจากปัญหาของคุณส่วนใหญ่เป็นโวหาร (ไม่ต้องการเติมคอนสตรัคเตอร์ด้วยการประกาศจำนวนมาก) ก็สามารถแก้ไขได้ด้วยโวหารเช่นกัน

วิธีที่ฉันดูมันภาษาที่ใช้หลายคลาสมีตัวสร้างเป็นฟังก์ชันที่ตั้งชื่อตามชื่อคลาสเอง เราสามารถใช้โวหารนั้นเพื่อสร้างคลาส ES6 ที่โวหารยังคงสมเหตุสมผล แต่ไม่จัดกลุ่มการกระทำทั่วไปที่เกิดขึ้นในคอนสตรัคเตอร์ด้วยการประกาศคุณสมบัติทั้งหมดที่เรากำลังทำอยู่ เราเพียงแค่ใช้ตัวสร้าง JS ที่แท้จริงเป็น "พื้นที่การประกาศ" จากนั้นทำคลาสฟังก์ชั่นชื่อที่เราจะถือว่าเป็น "พื้นที่ตัวสร้างสิ่งอื่น ๆ " เรียกมันในตอนท้ายของตัวสร้างที่แท้จริง

"ใช้อย่างเข้มงวด";

คลาส MyClass
{
    // ประกาศคุณสมบัติของคุณเท่านั้นแล้วเรียก thisClassName (); จากที่นี่
    คอนสตรัค () {
        this.prop1 = 'blah 1';
        this.prop2 = 'blah 2';
        this.prop3 = 'blah 3';
        this.MyClass ();
    }

    // ทุกสิ่ง "คอนสตรัคเตอร์" อื่น ๆ ทุกประเภทไม่สับสนกับการประกาศอีกต่อไป
    ห้องเรียนของฉัน() {
        ทำอะไรก็ได้();
    }
}

ทั้งสองจะถูกเรียกว่าเป็นตัวอย่างใหม่ที่ถูกสร้างขึ้น

Sorta เหมือนกับการมี 2 constructors ซึ่งคุณแยกการประกาศและการดำเนินการ constructor อื่น ๆ ที่คุณต้องการและ stylistically ทำให้ไม่ยากเกินกว่าที่จะเข้าใจนั่นคือสิ่งที่เกิดขึ้น

ฉันพบว่ามันเป็นสไตล์ที่ดีที่จะใช้เมื่อจัดการกับการประกาศจำนวนมากและ / หรือการดำเนินการจำนวนมากที่ต้องเกิดขึ้นในการสร้างอินสแตนซ์และต้องการให้แนวคิดทั้งสองแตกต่างจากกันและกัน

หมายเหตุ : ฉันตั้งใจจะไม่ใช้ความคิดที่เป็นสำนวนทั่วไปของ "การเริ่มต้น" (เช่นinit()หรือinitialize()วิธีการ) เพราะพวกเขามักจะใช้ที่แตกต่างกัน มีความแตกต่างระหว่างความคิดในการสร้างและการเริ่มต้นสันนิษฐานว่ามีความแตกต่าง การทำงานกับคอนสตรัคเตอร์คนรู้ว่าพวกเขาถูกเรียกโดยอัตโนมัติเป็นส่วนหนึ่งของการสร้างอินสแตนซ์ การเห็นinitวิธีการที่หลายคนกำลังคาดเดาโดยไม่ต้องมองแวบเดียวว่าพวกเขาต้องทำอะไรบางอย่างในรูปแบบของvar mc = MyClass(); mc.init();เพราะนั่นคือวิธีที่คุณมักจะเริ่มต้น ฉันไม่ได้พยายามที่จะเพิ่มการเริ่มต้นสำหรับผู้ใช้ของชั้นที่ฉันพยายามที่จะเพิ่มการดำเนินการก่อสร้างของชั้นเอง

ในขณะที่บางคนอาจใช้เวลาสองครั้งในขณะนั้นจริง ๆ แล้วมันเป็นประเด็น: มันสื่อสารกับพวกเขาว่าเจตนาเป็นส่วนหนึ่งของการก่อสร้างแม้ว่ามันจะทำให้พวกเขาทำสักหน่อยแล้วก็ไป "นั่นไม่ใช่ ช่างก่อสร้าง ES6 ทำงานอย่างไรและมองวินาทีที่ตัวสร้างจริงไป "โอ้พวกเขาเรียกมันว่าที่ด้านล่างฉันเห็น" ซึ่งดีกว่าการไม่สื่อสารความตั้งใจนั้น (หรือการสื่อสารที่ไม่ถูกต้อง) และอาจได้รับจำนวนมาก คนที่ใช้มันผิดพยายามเริ่มต้นจากด้านนอกและขยะ นั่นเป็นรูปแบบที่ฉันแนะนำ

สำหรับผู้ที่ไม่ต้องการทำตามรูปแบบนั้นสิ่งที่ตรงกันข้ามก็สามารถใช้ได้เช่นกัน ทำฟาร์มการประกาศออกไปยังฟังก์ชันอื่นเมื่อเริ่มต้น อาจตั้งชื่อมันว่า "คุณสมบัติ" หรือ "publicProperties" หรือบางอย่าง จากนั้นวางสิ่งของที่เหลือลงในตัวสร้างปกติ

"ใช้อย่างเข้มงวด";

คลาส MyClass
{
    คุณสมบัติ() {
        this.prop1 = 'blah 1';
        this.prop2 = 'blah 2';
        this.prop3 = 'blah 3';
    }

    ตัวสร้าง () {
        this.properties ();
        ทำอะไรก็ได้();
    }
}

โปรดทราบว่าวิธีที่สองนี้อาจดูสะอาดกว่า แต่ก็มีปัญหาโดยธรรมชาติที่propertiesได้รับการแทนที่เป็นชั้นหนึ่งโดยใช้วิธีนี้ขยายอีก คุณจะต้องให้ชื่อที่ไม่ซ้ำกันมากขึ้นpropertiesเพื่อหลีกเลี่ยง วิธีแรกของฉันไม่มีปัญหานี้เพราะครึ่งหนึ่งของคอนสตรัคเตอร์ปลอมตั้งชื่อโดยไม่ซ้ำหลังคลาส

แล้วทางโรงเรียนเก่าล่ะ?

class MyClass {
     constructor(count){ 
          this.countVar = 1 + count;
     }
}
MyClass.prototype.foo = "foo";
MyClass.prototype.countVar = 0;

// ... 

var o1 = new MyClass(2); o2 = new MyClass(3);
o1.foo = "newFoo";

console.log( o1.foo,o2.foo);
console.log( o1.countVar,o2.countVar);

ในตัวสร้างคุณพูดถึงเฉพาะ vars เหล่านั้นซึ่งจะต้องมีการคำนวณ ฉันชอบการสืบทอดดั้งเดิมสำหรับคุณลักษณะนี้ - สามารถช่วยประหยัดหน่วยความจำได้มาก (ในกรณีที่มี vars ที่ไม่ได้กำหนดจำนวนมาก)

ดังที่เบนจามินกล่าวในคำตอบของเขา TC39 ตัดสินใจอย่างชัดเจนว่าจะไม่รวมคุณลักษณะนี้อย่างน้อยสำหรับ ES2015 อย่างไรก็ตามฉันทามติดูเหมือนว่าพวกเขาจะเพิ่มใน ES2016

ยังไม่ได้ตัดสินใจเกี่ยวกับไวยากรณ์ แต่มีข้อเสนอเบื้องต้นสำหรับ ES2016 ที่จะช่วยให้คุณประกาศคุณสมบัติคงที่ในชั้นเรียน

ด้วยความมหัศจรรย์ของบาเบลคุณสามารถใช้สิ่งนี้ได้ในวันนี้ เปิดใช้งานการแปลงคุณสมบัติคลาสตามคำแนะนำเหล่านี้และคุณพร้อมแล้ว นี่คือตัวอย่างของไวยากรณ์:

class foo {
  static myProp = 'bar'
  someFunction() {
    console.log(this.myProp)
  }
}

ข้อเสนอนี้อยู่ในสถานะเริ่มต้นดังนั้นโปรดเตรียมไวยากรณ์ของคุณเมื่อเวลาผ่านไป

[ด้ายยาวไม่แน่ใจว่ามันมีอยู่แล้วในรายการเป็นตัวเลือก ... ] ทางเลือก
ง่าย ๆสำหรับผู้ที่ใช้คำพ้องเท่านั้นจะเป็นการกำหนด const นอกคลาส สิ่งนี้จะสามารถเข้าถึงได้จากโมดูลตัวเองเท่านั้นเว้นแต่จะได้รับพร้อมกับตัวรับสัญญาณ วิธีนี้จะไม่ทิ้งกระจุยกระจายและคุณจะได้รับ
prototypeconst

// will be accessible only from the module itself
const MY_CONST = 'string'; 
class MyClass {

    // optional, if external access is desired
    static get MY_CONST(){return MY_CONST;}

    // access example
    static someMethod(){
        console.log(MY_CONST);
    }
}

ES7 ไวยากรณ์สมาชิกคลาส:

ES7มีทางออกสำหรับ 'junking' ฟังก์ชั่นคอนสตรัคของคุณ นี่คือตัวอย่าง:

class Car {
  
  wheels = 4;
  weight = 100;

}

const car = new Car();
console.log(car.wheels, car.weight);

ตัวอย่างข้างต้นจะมีลักษณะดังต่อไปนี้ในES6:

class Car {

  constructor() {
    this.wheels = 4;
    this.weight = 100;
  }

}

const car = new Car();
console.log(car.wheels, car.weight);

โปรดใช้ความระมัดระวังเมื่อใช้สิ่งนี้เพื่อให้เบราว์เซอร์ทั้งหมดอาจไม่สนับสนุนเบราว์เซอร์นี้และอาจต้องมีการ transpiled JS เวอร์ชันก่อนหน้า

โบนัส: โรงงานผลิตวัตถุ:

function generateCar(wheels, weight) {

  class Car {

    constructor() {}

    wheels = wheels;
    weight = weight;

  }

  return new Car();

}


const car1 = generateCar(4, 50);
const car2 = generateCar(6, 100);

console.log(car1.wheels, car1.weight);
console.log(car2.wheels, car2.weight);

คุณสามารถเลียนแบบพฤติกรรมของคลาส es6 ... และใช้ตัวแปรคลาสของคุณ :)

ดูแม่ ... ไม่มีคลาส!

// Helper
const $constructor = Symbol();
const $extends = (parent, child) =>
  Object.assign(Object.create(parent), child);
const $new = (object, ...args) => {
  let instance = Object.create(object);
  instance[$constructor].call(instance, ...args);
  return instance;
}
const $super = (parent, context, ...args) => {
  parent[$constructor].call(context, ...args)
}
// class
var Foo = {
  classVariable: true,

  // constructor
  [$constructor](who){
    this.me = who;
    this.species = 'fufel';
  },

  // methods
  identify(){
    return 'I am ' + this.me;
  }
}

// class extends Foo
var Bar = $extends(Foo, {

  // constructor
  [$constructor](who){
    $super(Foo, this, who);
    this.subtype = 'barashek';
  },

  // methods
  speak(){
    console.log('Hello, ' + this.identify());
  },
  bark(num){
    console.log('Woof');
  }
});

var a1 = $new(Foo, 'a1');
var b1 = $new(Bar, 'b1');
console.log(a1, b1);
console.log('b1.classVariable', b1.classVariable);

ฉันวางไว้บนGitHub

วิธีที่ฉันแก้ไขสิ่งนี้ซึ่งเป็นอีกตัวเลือกหนึ่ง (ถ้าคุณมี jQuery ให้ใช้) ก็คือการกำหนดเขตข้อมูลในวัตถุโรงเรียนเก่าแล้วขยายชั้นเรียนด้วยวัตถุนั้น ฉันไม่ต้องการพริกไทยคอนสตรัคเตอร์ด้วยการมอบหมายนี่ดูเหมือนจะเป็นวิธีที่เรียบร้อย

function MyClassFields(){
    this.createdAt = new Date();
}

MyClassFields.prototype = {
    id : '',
    type : '',
    title : '',
    createdAt : null,
};

class MyClass {
    constructor() {
        $.extend(this,new MyClassFields());
    }
};

- อัปเดตความคิดเห็นการติดตามของ Bergi

ไม่มีรุ่น JQuery:

class SavedSearch  {
    constructor() {
        Object.assign(this,{
            id : '',
            type : '',
            title : '',
            createdAt: new Date(),
        });

    }
}

คุณยังท้ายด้วยตัวสร้าง 'อ้วน' แต่อย่างน้อยมันทั้งหมดในคลาสเดียวและมอบหมายในหนึ่งครั้ง

แก้ไข # 2: ตอนนี้ฉันไปครบวงจรแล้วตอนนี้ฉันกำลังกำหนดค่าในนวกรรมิกเช่น

class SavedSearch  {
    constructor() {
        this.id = '';
        this.type = '';
        this.title = '';
        this.createdAt = new Date();
    }
}

ทำไม? เรียบง่ายจริงๆโดยใช้ด้านบนบวกกับความคิดเห็นบางส่วนของ JSdoc PHPStorm ก็สามารถทำโค้ดให้สมบูรณ์ในคุณสมบัติ การกำหนด vars ทั้งหมดในการเข้าชมครั้งเดียวเป็นสิ่งที่ดี แต่การไม่สามารถเขียนโค้ดคุณสมบัติให้เสร็จสมบูรณ์นั้นไม่คุ้มค่ากับประสิทธิภาพการทำงาน (เกือบจะแน่นอนน้อยที่สุด)

คุณสามารถประกาศตัวแปรภายใน Constructor ได้

class Foo {
    constructor() {
        var name = "foo"
        this.method = function() {
            return name
        }
    }
}

var foo = new Foo()

foo.method()

ถึงกระนั้นคุณก็ไม่สามารถประกาศคลาสใด ๆ ในภาษาโปรแกรมอื่นได้ แต่คุณสามารถสร้างตัวแปรคลาสได้มาก แต่ปัญหาคือขอบเขตของคลาสอ็อบเจ็กต์ ดังนั้นตามฉันวิธีที่ดีที่สุดในการเขียนโปรแกรม OOP ใน ES6 Javascript: -

class foo{
   constructor(){
     //decalre your all variables
     this.MY_CONST = 3.14;
     this.x = 5;
     this.y = 7;
     // or call another method to declare more variables outside from constructor.
     // now create method level object reference and public level property
     this.MySelf = this;
     // you can also use var modifier rather than property but that is not working good
     let self = this.MySelf;
     //code ......... 
   }
   set MySelf(v){
      this.mySelf = v;
   }
   get MySelf(v){
      return this.mySelf;
   }
   myMethod(cd){
      // now use as object reference it in any method of class
      let self = this.MySelf;
      // now use self as object reference in code
   }
}

นี่เป็นคำสั่งผสมที่คงที่และทำให้ฉันได้ผล

class ConstantThingy{
        static get NO_REENTER__INIT() {
            if(ConstantThingy._NO_REENTER__INIT== null){
                ConstantThingy._NO_REENTER__INIT = new ConstantThingy(false,true);
            }
            return ConstantThingy._NO_REENTER__INIT;
        }
}

อื่น ๆ ที่ใช้

var conf = ConstantThingy.NO_REENTER__INIT;
if(conf.init)...