Việc sử dụng biểu thức lớp có tên hoặc chưa đặt tên trong ES6 là gì?

Question

Trong mã tôi đang sử dụng một lớp có tên là "Xe hơi". Bây giờ nếu tôi cố gắng sử dụng như var carNew = new Car("ferrari");, sau đó nó ném cho tôi một lỗi. Vì vậy, việc sử dụng biểu thức lớp được đặt tên trong ES6 là gì?

'use strict'; 
var car = class Car{ 
    constructor(model){ 
     this.model = model; 
    } 
} 
var carNew = new car("ferrari"); 

console.log(carNew); //car {model: "ferrari"} 
console.log(carNew.constructor == car); //true 

Answer 1

Trong trường hợp biểu thức lớp bạn có thể sử dụng tên lớpnội, nhưng không bên ngoài của lớp:

const Foo = class Self { 
    static greetingPrefix() { 
    return 'Hello, '; 
    } 

    greeting() { 
    return Self.greetingPrefix() + 'World'; 
    } 
}; 

const foo = new Foo(); 
console.log(foo.greeting()); // "Hello, World" 


console.log(Self); // throws "Uncaught ReferenceError: Self is not defined" 

Answer 2

Với đoạn mã sau

var car = class Car{ /* ... */ } 

var carNew = new Car("ferrari"); throws an error, why?

Car chưa bước vào phạm vi vì bạn đã viết một biểu thức lớp, tương tự như sử dụng function trong một biểu thức chức năng

var foo = function Bar() {}; 
foo; // defined 
Bar; // undefined 

var carNew = new car("ferrari"); works, why?

Đối với lập luận tương tự như trên, các định danh car được định nghĩa trong phạm vi và số điểm đó để biểu thức lớp

---

What is use of named or unnamed class expression [...]?

Hãy nhìn lại một lần nữa function. Vì vậy, bây giờ nghĩ rằng, nếu Bar không được xác định trong phạm vi chúng tôi đang làm việc, nó được xác định ở đâu?

Vâng, rõ ràng là chúng tôi có foo.name === 'Bar', nhưng chúng tôi cũng có thể làm

var foo = function Bar() {console.log(Bar)}; 
foo(); // Bar logged, we see Bar === foo here 

Tuyệt vời, vì vậy chúng tôi có thể tham khảo Bar bên trong chức năng.

Nó là giống hệt nhau với class, chúng ta có thể tham khảo Car từ bên trong biểu thức lớp bản thân, cho phép chúng ta làm những hành vi đệ quy hoặc sao chép tài liệu tham khảo tĩnh để các trường hợp, vv

Tôi đã thêm một tham chiếu như vậy để giúp dễ dàng xem trong mã bên dưới

var car = class Car { 
    constructor(model) { 
     this.model = model; 
     this.foo = Car; // the big C Car that was ReferenceErroring outside 
    } 
}; 
var bar = new car(); 
console.log(bar.foo); // logs class Car (=== car) 

Answer 3

Sử dụng giống như các hàm được đặt tên/không được đặt tên. Xem hành vi chức năng:

var a = function b() { console.log('b') } 
>> undefined 
a() 
>> b 
b() 
>> Uncaught ReferenceError: b is not defined(…) 

Điều này rất giống với trường hợp của bạn.

Vị trí và lý do bạn cần sử dụng? Thông thường, trường hợp sử dụng duy nhất cho các chức năng là đặt tên cho các chức năng được gọi là một lần cung cấp cho bạn khả năng tự ghi tài liệu:

(function bootstrap() { 
    // 
})(); 

Ở đây tên chức năng cho biết chức năng của bạn khởi động ứng dụng của bạn.

Vì vậy, tôi có thể tưởng tượng một trường hợp cho lớp bây giờ: bạn có thể sử dụng nó cho singleton lớp được sử dụng để tạo ra chỉ có một đối tượng:

var a = new (class Car{ 
    constructor(model){ 
     this.model = model; 
    } 
})('ferrari'); 

console.log(a.model); 

Ở đây bạn chỉ đặt tên cho lớp học để biết những gì nó đang làm Tuy nhiên, tên sẽ không thể truy cập ở nơi khác.

Answer 4

Nó ném một lỗi vì Car biến không được khai báo.

Từ JavaScript | MDN tài liệu:

An important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a ReferenceError

Vì vậy, để sử dụng:

var newCar = Car('ferrari'); 

Bạn cần phải xác định Car biến:

var Car = class Car{ 
    constructor(model){ 
     this.model = model; 
    } 
} 

Chú ý ở đây là chúng ta sử dụng Car và Không t car

Liên quan đến biểu thức lớp chưa được đặt tên và có tên, đây là ví dụ từ JavaScript | MDN tài liệu:

A class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body.

// unnamed 
var Polygon = class { 
    constructor(height, width) { 
    this.height = height; 
    this.width = width; 
    } 
}; 

// named 
var Polygon = class Polygon { 
    constructor(height, width) { 
    this.height = height; 
    this.width = width; 
    } 
}; 

đọc ES6 classes - JavaScript | MDN để biết thêm thông tin

Answer 5

Lớp biểu

Tương tự như chức năng, có hai loại định nghĩa lớp, hai cách để định nghĩa một lớp: khai báo lớp và biểu thức lớp.

Cũng tương tự như chức năng, các định danh của một biểu thức lớp là chỉ hiển thị trong biểu thức:

const MyClass = class Me { 
    getClassName() { 
     return Me.name; 
    } 
}; 
const inst = new MyClass(); 
console.log(inst.getClassName()); // Me 
console.log(Me.name); // ReferenceError: Me is not defined