A, ES5, ES6 inheritance in addition to writing other than what are the differences?

Inheritance of ES5:
  • Create an instance object of the subclass, and then add the parent class’s methods to this.Parent.apply(this));
  • Through a prototype or constructor mechanism;
ES6 inheritance:
  • Create an instance object of the superclass, this(so you must call the super() method of the superclass first), and then modify this with the constructor of the subclass.
  • Classes are defined using the class keyword, which contains constructors. Classes inherit from each other using the extends keyword.
    • Subclasses must call the super method from the constructor method, otherwise new instances report an error. The subclass does not have its own this object. Instead, it inherits this from its parent class and processes it. If you don’t call super, subclasses don’t get this.
    • Notice that the super keyword refers to an instance of the superclass, which is the this object of the superclass
    • Note that in the subclass constructor, the this keyword can be used only after super is called, otherwise an error is reported.
const bar = new Bar(); // it's ok 
function Bar() { this.bar = 42; }// function declarations are promoted, but assignments are not initialized.

const foo = new Foo(); // ReferenceError: Foo is not defined
class Foo { constructor() { this.foo = 42; }}//Foo enters a temporary dead zone, similar to let, const declaration variables.
Copy the code

Class declares that strict mode is enabled internally.

// Reference an undeclared variable
function Bar() { 
    baz = 42; // it's ok
}
const bar = new Bar();

class Foo { 
    constructor() { 
        fol = 42; // ReferenceError: fol is not defined }}const foo = new Foo();
Copy the code

All methods of class, including static and instance methods, are not enumerable.

// Reference an undeclared variable
function Bar() { 
    this.bar = 42;
}
Bar.answer = function() { 
    return 42; 
};
Bar.prototype.print = function() { 
    console.log(this.bar);
};
const barKeys = Object.keys(Bar); 
console.log(barKeys)// ['answer']
console.log(barProtoKeys) // ['print']


class Foo { 
    constructor() { 
        this.foo = 42; 
    }
    static answer() { 
        return 42; 
    }
    print() { 
        console.log(this.foo); }}const fooKeys = Object.keys(Foo); 
const fooProtoKeys = Object.keys(Foo.prototype); 
console.log(fooKeys) / / []
console.log(fooProtoKeys) / / []
Copy the code

All methods of class (static and instance methods) have no prototype object, so there is no [[construct]] to call with new.

function Bar() { 
    this.bar = 42; 
}
Bar.prototype.print = function() { 
    console.log(this.bar); 
};
const bar = new Bar(); 
const barPrint = new bar.print(); // it's ok

class Foo { 
    constructor() { 
        this.foo = 42; 
    } 
    print() { 
        console.log(this.foo); }}const foo = new Foo(); 
const fooPrint = new foo.print();//// TypeError: foo.print is not a constructor
Copy the code

Class must be called using new.

function Bar() { 
    this.bar = 42; 
}
const bar = Bar(); // it's ok

class Foo { 
    constructor() { 
        this.foo = 42; }}// const foo = new Foo();
const foo = Foo();//TypeError: Class constructor Foo cannot be invoked without 'new'
Copy the code

Class names cannot be overridden inside class.

function Bar() {
    Bar = 'Baz'; // it's ok 
    this.bar = 42; 
}
const bar = new Bar(); // Bar: 'Baz' // bar: Bar {bar: 42} 

class Foo { 
    constructor() { 
        this.foo = 42; 
        Foo = 'Fol'; // TypeError: Assignment to constant variable }}const foo = new Foo(); 
Foo = 'Fol'; // it's ok
Copy the code

Js enumeration

  • Enumeration refers to whether an object’s properties can be traversed or, more simply, enumerated. Enumerability determines whether the property can beThe for... inFind traverse to.
  • Stereotype properties for basic wrapper types in JS are not enumerable, such as:

Primitive wrapper types: Boolean, Number, and String, which are both primitive and reference types. A primitive wrapper type can also access some of its own methods through an object’s methods like a reference type, but cannot customize methods like a reference type.

var num = new Number(a);for(let pro in num) {
    console.log("num." + pro + "=" + num[pro]);
}
// The result is empty because the built-in attribute in Number is not enumerable;
Copy the code
  • To determine whether an attribute is enumerable, use theObject.propertyIsEnumerable()But it’s important to note that if the attribute you want to determine is inobjectWhether it’s enumerable or not,Object.propertyIsEnumerable()Will returnfalse.

The propertyIsEnumerable() method returns a Boolean value indicating whether the specified propertyIsEnumerable. PropertyIsEnumerable is not considered in the prototype chain. The hasOwnProperty() method returns a Boolean value indicating whether the object has the specified property in its own properties