Tại sao bảng điều khiển cú pháp lớp ES6 sẽ ghi nhật ký khác với cú pháp lớp ES5?

Question

Tôi đang cố gắng học ECMAScript 6 nhiều hơn và thừa kế tốt hơn một chút.

Câu hỏi: Khi tôi điều khiển đăng xuất bob và daisy chúng khác nhau. bobnhật ký mẫu thử dưới __proto__ và hiển thị công cụ xây dựng của mình là run:true;. Tuy nhiên, khi triển khai ES6, daisy không có __proto__, tuy nhiên, nó vẫn có thể truy cập isRunning. Tại sao?

var Man = (function(){ 
    "use strict"; 
    function Man() { 
    this.run = true 
    } 

    Man.prototype.isRunning = function() { 
    console.log('yesss imma run'); 
    }; 

    return Man; 
})(); 

var bob = new Man(); 
console.log(bob); 

class Woman { 
    constructor(){ 
    this.run = true; 
    } 

    isRunning() { 
    console.log('yess imma run'); 
    } 
} 

var daisy = new Woman(); 
console.log(daisy); 

Answer 1

Đó là bởi vì các phương pháp quy định tại các lớp học ES6 là không đếm được. Trong một đối tượng Người Người đàn ông, isRunning là có thể đếm được, nhưng không phải là số Người phụ nữ. Và Chrome có cách xử lý nhật ký bảng điều khiển cụ thể. Tùy thuộc vào sự hiện diện của các thuộc tính đếm được hay không sẽ ảnh hưởng đến màn hình.

Sự khác biệt trong màn hình bảng điều khiển là tầm thường, nhưng nó cho thấy sự khác biệt thú vị trong cách lớp được xây dựng với ES6 Lớp. Để thấy rõ hơn, bạn có thể thử làm cho Man isRunning không đếm được hoặc Người phụ nữ isRunning đếm được, nó sẽ cung cấp cùng một đầu ra trong bảng điều khiển. Như thế này cho những người không thể liệt kê trong Man:

var Man = (function() { 
 
    "use strict"; 
 

 
    function Man() { 
 
     this.run = true 
 
    } 
 

 
    Object.defineProperty(Man.prototype, 'isRunning', { 
 
     value: function() { 
 
     console.log('yesss imma run'); 
 
     }, 
 
     enumerable: false 
 
    }); 
 

 
    return Man; 
 
    })(); 
 

 
    
 
    bob = new Man(); 
 
    console.log(bob); 
 

 
    class Woman { 
 
    constructor() { 
 
     this.run = true; 
 
    } 
 

 
    isRunning() { 
 
     console.log('yess imma run'); 
 
    } 
 
    } 
 

 
    daisy = new Woman(); 
 
    console.log(daisy);

Hoặc đếm được trong Woman:

var Man = (function() { 
 
    "use strict"; 
 

 
    function Man() { 
 
     this.run = true 
 
    } 
 

 
    Man.prototype.isRunning = function() { 
 
     console.log('yesss imma run'); 
 
    }; 
 

 
    return Man; 
 
    })(); 
 

 

 
    bob = new Man(); 
 
    console.log(bob); 
 

 
    class Woman { 
 
    constructor() { 
 
     this.run = true; 
 
    } 
 

 
    isRunning() { 
 
     console.log('yess imma run '); 
 
    } 
 
    } 
 
    Object.defineProperty(Woman.prototype, 'isRunning', { 
 
    enumerable: true 
 
    }); 
 
    daisy = new Woman(); 
 
    console.log(daisy);

EDIT:

Lưu ý thứ tại các bản nháp ban đầu của ES6 đã được thiết lập là đúng theo mặc định, nhưng nó đã được thay đổi, đó là một quyết định thiết kế. Bạn có thể xem các cuộc thảo luận dẫn đến quyết định đó tại đây: https://esdiscuss.org/topic/classes-and-enumerability

Về cơ bản, các nguyên mẫu gốc thường có phương pháp không đếm được, do đó, có ý nghĩa giống với các lớp do người dùng xác định.

Quyết định này đã được giới thiệu trong dự thảo rev 32. http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts#february_2_2015_draft_rev_32