Có cách nào 'hài hòa' để lấy tên lớp từ thể hiện của lớp ES6 không? Khác với

someClassInstance.constructor.name

Hiện tại tôi đang tính đến việc thực hiện Traceur. Và có vẻ như Babel có một polyfill Function.nametrong khi Traceur thì không.

Tóm lại: không có cách nào khác trong ES6 / ES2015 / Harmony và ATM không có gì được mong đợi trong ES.Next.

Nó có thể cung cấp các mẫu hữu ích cho các ứng dụng phía máy chủ chưa được tối ưu hóa nhưng không mong muốn trong các ứng dụng dành cho trình duyệt / máy tính để bàn / thiết bị di động.

Babel sử dụngcore-js để polyfill Function.name, nó nên được tải thủ công cho các ứng dụng Traceur và TypeScript khi thích hợp.

someClassInstance.constructor.namechính xác là cách chính xác để làm điều này. Transpilers có thể không hỗ trợ điều này, nhưng đó là cách tiêu chuẩn theo thông số kỹ thuật. ( nameThuộc tính của các hàm được khai báo thông qua các sản phẩm ClassDeclaration được đặt trong 14,5.15 , bước 6.)

Như @Domenic nói, hãy sử dụng someClassInstance.constructor.name. @Esteban đề cập đến trong các ý kiến ​​rằng

someClassInstance.constructorlà một chức năng. Tất cả các chức năng có một nametài sản ...

Do đó, để truy cập tên lớp một cách tĩnh, hãy làm như sau (cách này hoạt động với phiên bản Babel BTW của tôi. Theo nhận xét trên @Domenic số dặm của bạn có thể thay đổi).

class SomeClass {
  constructor() {}
}

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

Cập nhật

Babel vẫn ổn, nhưng uglify / minifying đã khiến tôi gặp vấn đề. Tôi đang tạo một trò chơi và đang tạo ra một hàm băm tài nguyên Sprite gộp (trong đó khóa là tên hàm). Sau khi thu nhỏ, mọi hàm / lớp được đặt tên t. Điều này giết chết băm. Tôi đang sử dụng Gulptrong dự án này và sau khi đọc các tài liệu gulp-uglify tôi đã phát hiện ra có một tham số để ngăn chặn việc xáo trộn tên biến / tên hàm cục bộ này xảy ra. Vì vậy, trong gulpfile của tôi, tôi đã thay đổi

.pipe($.uglify()) đến .pipe($.uglify({ mangle: false }))

Có một sự đánh đổi giữa hiệu suất và khả năng đọc ở đây. Không xáo trộn các tên sẽ dẫn đến một tệp xây dựng lớn hơn (một chút) (nhiều tài nguyên mạng hơn) và có khả năng thực thi mã chậm hơn (cần dẫn nguồn - có thể là BS). Mặt khác, nếu tôi giữ nguyên như vậy, tôi sẽ phải xác định thủ công getClassNametrên mọi lớp ES6 - ở cấp độ tĩnh và thể hiện. Không, cám ơn!

Cập nhật

Sau khi thảo luận trong các ý kiến, có vẻ như tránh .namequy ước có lợi cho việc xác định các chức năng đó là một mô hình tốt. Nó chỉ mất một vài dòng mã và sẽ cho phép thu nhỏ và tổng quát mã của bạn (nếu được sử dụng trong thư viện). Vì vậy, tôi đoán rằng tôi đã thay đổi ý định và sẽ tự xác định getClassNamecác lớp học của mình. Cảm ơn @estus! . Getter / Setters thường là một ý tưởng tốt so với dù sao truy cập biến trực tiếp, đặc biệt là trong một ứng dụng dựa trên máy khách.

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)

Lấy tên lớp trực tiếp từ lớp

Các câu trả lời trước đã giải thích rằng nó someClassInstance.constructor.namehoạt động tốt, nhưng nếu bạn cần lập trình chuyển đổi tên lớp thành một chuỗi và không muốn tạo một cá thể chỉ cho điều đó, hãy nhớ rằng:

typeof YourClass === "function"

Và, vì mọi hàm đều có một thuộc nametính, một cách hay khác để có được một chuỗi với tên lớp của bạn là chỉ cần làm:

YourClass.name

Điều gì sau đây là một ví dụ tốt về lý do tại sao điều này là hữu ích.

Đang tải các thành phần web

Như tài liệu MDN dạy chúng tôi, đây là cách bạn tải một thành phần web:

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

Trong trường hợp YourComponentđược một lớp học kéo dài từ HTMLElement. Vì nó được coi là cách thực hành tốt để đặt tên lớp của thành phần của bạn theo chính thẻ thành phần, nên sẽ rất tốt khi viết một hàm trợ giúp mà tất cả các thành phần của bạn có thể sử dụng để tự đăng ký. Vì vậy, đây là chức năng:

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

Vì vậy, tất cả những gì bạn cần làm là:

registerComponent(YourComponent);

Điều này là tốt vì nó ít bị lỗi hơn là tự viết thẻ thành phần. Để gói nó, đây là upperCamelCaseToSnakeCase()chức năng:

// 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());
}

Đối với dịch chuyển babel (trước khi thu nhỏ)

Nếu bạn đang sử dụng Babel @babel/preset-env, có thể giữ các định nghĩa lớp mà không chuyển đổi chúng thành các hàm (loại bỏ thuộc constructortính)

Bạn có thể bỏ một số khả năng tương thích trình duyệt cũ với cấu hình này trong babel.config / babelrc:

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

Thông tin thêm về targets: https://babeljs.io/docs/en/babel-preset-env#t Target

Đối với việc thu nhỏ babel (sau khi dịch mã)

Có vẻ như không có giải pháp dễ dàng nào ngay bây giờ ... Chúng ta cần xem xét các loại trừ xáo trộn.