มีวิธีใดที่ 'สามัคคี' ในการรับชื่อคลาสจากอินสแตนซ์ของคลาส ES6 หรือไม่ นอกเหนือจากนี้

someClassInstance.constructor.name

ขณะนี้ฉันกำลังนับการใช้งาน Traceur และดูเหมือนว่าบาเบลมีพอลิฟิลFunction.nameในขณะที่เทรเกอร์ไม่ได้

เพื่อสรุปทั้งหมด: ไม่มีวิธีอื่นใน ES6 / ES2015 / Harmony และไม่มีสิ่งใดที่คาดว่าจะเป็น ATM ใน ES.Next

มันอาจให้รูปแบบที่มีประโยชน์สำหรับแอปพลิเคชันฝั่งเซิร์ฟเวอร์ที่ไม่ระบุ แต่ไม่ต้องการในแอปพลิเคชันที่มีไว้สำหรับเบราว์เซอร์ / เดสก์ทอป / มือถือ

Babel ใช้core-jsสำหรับ polyfill Function.nameควรโหลดด้วยตนเองสำหรับแอปพลิเคชั่น Traceur และ TypeScript ตามความเหมาะสม

someClassInstance.constructor.nameเป็นวิธีที่ถูกต้องในการทำเช่นนี้ Transpilers อาจไม่รองรับสิ่งนี้ แต่เป็นวิธีมาตรฐานตามข้อกำหนด ( nameคุณสมบัติของฟังก์ชั่นประกาศผ่านการผลิต ClassDeclaration ตั้งอยู่ใน14.5.15ขั้นตอนที่ 6)

ในฐานะที่เป็น @Domenic someClassInstance.constructor.nameกล่าวว่าการใช้งาน @Esteban กล่าวถึงในความคิดเห็นที่

someClassInstance.constructorเป็นฟังก์ชั่น ฟังก์ชั่นทั้งหมดมีnameคุณสมบัติ ...

ดังนั้นในการเข้าถึงชื่อคลาสแบบคงที่ให้ทำดังต่อไปนี้ (ใช้งานได้กับ Babel รุ่น BTW ของฉันตามความคิดเห็นที่ @Domenic ระยะทางของคุณอาจแตกต่างกันไป)

class SomeClass {
  constructor() {}
}

var someClassInstance = new SomeClass();
someClassInstance.constructor.name;      // === 'SomeClass'
SomeClass.name                           // === 'SomeClass'

ปรับปรุง

บาเบลไม่เป็นไร แต่ uglify / minification ทำให้ฉันมีปัญหา ฉันกำลังสร้างเกมและกำลังสร้างแฮชของทรัพยากร Sprite ที่รวมอยู่ด้วยกัน (โดยที่คีย์คือชื่อฟังก์ชัน) หลังจาก minification ทุกฟังก์ชั่น / tชั้นถูกเสนอชื่อ นี่จะเป็นการฆ่ากัญชา ฉันกำลังใช้Gulpในโครงการนี้และหลังจากอ่านเอกสารอึก - uglifyฉันพบว่ามีพารามิเตอร์เพื่อป้องกันไม่ให้ชื่อตัวแปร / ฟังก์ชั่นในท้องถิ่นนี้เกิดปัญหาขึ้น ดังนั้นใน gulpfile ของฉันฉันเปลี่ยน

.pipe($.uglify()) ถึง .pipe($.uglify({ mangle: false }))

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

ปรับปรุง

หลังจากการอภิปรายในความคิดเห็นดูเหมือนว่าการหลีกเลี่ยงการ.nameประชุมเพื่อกำหนดหน้าที่เหล่านั้นเป็นกระบวนทัศน์ที่ดี ใช้เวลาเพียงไม่กี่บรรทัดของโค้ดและจะอนุญาตให้ใช้การย่อขนาดและความสมบูรณ์ของโค้ดของคุณ (หากใช้ในไลบรารี) ดังนั้นฉันคิดว่าฉันเปลี่ยนใจและจะกำหนดgetClassNameในชั้นเรียนของฉันด้วยตนเอง ขอบคุณ@estus! . Getter / Setters เป็นความคิดที่ดีเมื่อเทียบกับการเข้าถึงตัวแปรโดยตรงอย่างไรก็ตามโดยเฉพาะอย่างยิ่งในแอปพลิเคชันที่ใช้ไคลเอ็นต์

class SomeClass {
  constructor() {}
  static getClassName(){ return 'SomeClass'; }
  getClassName(){ return SomeClass.getClassName(); }
}
var someClassInstance = new SomeClass();
someClassInstance.constructor.getClassName();      // === 'SomeClass' (static fn)
someClassInstance.getClassName();                  // === 'SomeClass' (instance fn)
SomeClass.getClassName()                           // === 'SomeClass' (static fn)

รับชื่อคลาสโดยตรงจากคลาส

คำตอบก่อนหน้านี้อธิบายว่าใช้someClassInstance.constructor.nameงานได้ดี แต่ถ้าคุณต้องการแปลงชื่อคลาสให้เป็นสตริงโดยทางโปรแกรมและไม่ต้องการสร้างอินสแตนซ์เพียงแค่นั้นให้จำไว้ว่า:

typeof YourClass === "function"

และเนื่องจากทุกฟังก์ชั่นมีnameคุณสมบัติวิธีที่ดีอีกวิธีหนึ่งในการรับสตริงที่มีชื่อคลาสของคุณคือการทำ:

YourClass.name

ต่อไปนี้เป็นตัวอย่างที่ดีว่าทำไมสิ่งนี้ถึงมีประโยชน์

กำลังโหลดส่วนประกอบของเว็บ

ในขณะที่เอกสาร MDNสอนเรานี่คือวิธีที่คุณโหลดองค์ประกอบของเว็บ:

customElements.define("your-component", YourComponent);

ในกรณีที่มีการขยายชั้นเรียนจากYourComponent HTMLElementเนื่องจากถือว่าเป็นแนวปฏิบัติที่ดีในการตั้งชื่อคลาสของคอมโพเนนต์หลังจากแท็กคอมโพเนนต์เองคุณควรเขียนฟังก์ชันตัวช่วยซึ่งส่วนประกอบทั้งหมดของคุณสามารถใช้เพื่อลงทะเบียนตัวเอง ดังนั้นนี่คือฟังก์ชันนั้น:

function registerComponent(componentClass) {
    const componentName = upperCamelCaseToSnakeCase(componentClass.name);
    customElements.define(componentName, componentClass);
}

ดังนั้นสิ่งที่คุณต้องทำคือ:

registerComponent(YourComponent);

อันไหนดีเพราะมันเกิดข้อผิดพลาดน้อยกว่าการเขียนแท็กองค์ประกอบด้วยตัวเอง เพื่อสรุปมันนี่คือupperCamelCaseToSnakeCase()ฟังก์ชั่น:

// converts `YourString` into `your-string`
function upperCamelCaseToSnakeCase(value) {
    return value
        // first char to lower case
        .replace(/^([A-Z])/, $1 => $1.toLowerCase())
        // following upper chars get preceded with a dash
        .replace(/([A-Z])/g, $1 => "-" + $1.toLowerCase());
}

สำหรับการส่ง babel (ก่อนการลดขนาด)

หากคุณใช้ Babel ด้วย@babel/preset-envอาจเป็นไปได้ที่จะเก็บคำจำกัดความของคลาสโดยไม่แปลงเป็นฟังก์ชัน (ซึ่งจะเอาconstructorคุณสมบัติออก)

คุณสามารถวางความเข้ากันได้ของเบราว์เซอร์เก่ากับการกำหนดค่านี้ในbabel.config / babelrc:

{
  "presets": [
    ["@babel/preset-env", {"targets": {"browsers": ["> 2%"]}}]
  ]
}

ข้อมูลเพิ่มเติมเกี่ยวกับtargets: https://babeljs.io/docs/en/babel-preset-env#targets

สำหรับการเบาบาง minification (หลังจาก transpilation)

ดูเหมือนว่าจะไม่มีวิธีแก้ปัญหาง่าย ๆ ในตอนนี้ ... เราจำเป็นต้องดูที่การแยกตัวออกเป็น mangling