前端面试|ES5、ES6的继承除了写法以外还有什么区别？

一、ES5、ES6的继承除了写法以外还有什么区别？

ES5的继承：

• 先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.apply(this)）；
• 通过原型或构造函数机制来实现；

ES6的继承：

• 先创建父类的实例对象this(所以必须先调用父类的super()方法)，然后再用子类的构造函数修改this。
• 通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承；
  • 子类必须在constructor方法中调用super方法，否则新建实例报错。因 为子类没有自己的 this 对象，而是继承了父类的 this 对象，然后对其进行加工。 如果不调用 super 方法，子类得不到 this 对象。
  • 注意 super 关键字指代父类的实例，即父类的 this 对象
  • 注意 在子类构造函数中，调用 super 后，才可使用 this 关键字，否则报错。

const bar = new Bar(); // it's ok 
function Bar() { this.bar = 42; }// function 声明会提升，但不会初始化赋值。

const foo = new Foo(); // ReferenceError: Foo is not defined
class Foo { constructor() { this.foo = 42; } }//Foo 进入暂时性死区，类似于 let、 const 声明变量。
复制代码

class 声明内部会启用严格模式。

// 引用一个未声明的变量 
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();
复制代码

class 的所有方法（包括静态方法和实例方法）都是不可枚举的。

// 引用一个未声明的变量
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) // []
复制代码

class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有[[construct]]，不能使用 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
复制代码

必须使用 new 调用 class。

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'
复制代码

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
复制代码

js的枚举

• 枚举指对象的属性是否可以遍历出来，简单点说就是是否可以被列举出来。可枚举性决定了这个属性能否被for…in查找遍历到。
• js中基本包装类型的原型属性是不可枚举的，比如：

基本包装类型：Boolean、Number和String，即是基本类型，也是引用类型。基本包装类型还可以像引用类型一样通过对象的方法访问它自带的一些方法，但是不能像引用类型那样自定义方法。

var num = new Number();
for(let pro in num) {
    console.log("num." + pro + " = " + num[pro]);
}
//结果为空，因为Number中内置的属性是不可枚举的；
复制代码

• 判断一个属性是否可枚举，用Object.propertyIsEnumerable()来判断，但需要注意的一点是如果需要判断的属性在object的原型链上，不管它是否可枚举，Object.propertyIsEnumerable()都会返回false.

propertyIsEnumerable() 方法返回一个布尔值，表示指定的属性是否可枚举。但是在原型链上propertyIsEnumerable不被考虑。
hasOwnProperty()方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性