前端面试题 ES5-ES6 function-class实现类的区别记录详解

在ES5中，我们是通过function来实现类和类的继承，而在ES6中，我们多了class这个语法糖，除了看起来更像一个类外，在很多方面class做到了比function更加严格

1. 写法上

在ES5中，我们是通过prototype和Object.create()来实现类和继承

function Person(){
   
   }
function Student(){
   
   }
Student.prototype = new Person()

而在ES6中，我们使用class语法，通过extends来实现类和继承，但实际原理还是通过原型链实现的

class Person{
   
   }
class Student extends Person{
   
   }

2. 提升上的区别

在ES5中的function是可以提升的，如下代码是没问题的

var foo = new Foo()
function Foo(){
   
   
    this.foo = 42
}

在JavaScript引擎扫描代码发现变量声明的时候，如果遇到变量声明的时候，如果是为var或者没有声明符直接使用赋值，又或者是使用function的时候，就会提升到作用域顶部，而如果遇到let，const时，会将变量声明放到暂时性死区TDZ中，如果访问TDZ中的变量就会导致错误，直到我们执行到这句声明的时候，才会将其从TDZ中拿出来

而class和let，const一样，所以在下面两种情况中会报错

var foo = new Foo()
class Foo{
   
   
    constructor(){
   
   
        this.foo = 42
    }
}
// Uncaught ReferenceError: Foo is not defined

function Foo(){
   
   
    this.foo = 42
}
{