ES5与ES6类机制深度对比：语法、继承与作用域差异

function Person(name, age, job) {
 this.name = "Totora";
 this.age = 19;
 this.job = "student";
 this.sayName = function() {
  console.log(this.name);
 };
}
let person = new Person();
person.sayName();

class Person {
 constructor() {
  this.name = "Totora";
  this.age = 19;
  this.job = "student";
 }
 sayName() {
  console.log(this.name);
 }
}
let person = new Person();
person.sayName();
//当我们使用typeof检测Person的类型时：
console.log(typeof Person); //function,它的本质仍然是函数

function Person(name, age, job) {
 this.name = "Totora";
 this.age = 19;
 this.job = "student";
 this.sayName = function() {
  console.log(this.name);
 };
}
let person = Person();
console.log(person); //undefined

class Person {
 constructor() {
  this.name = "Totora";
  this.age = 19;
  this.job = "student";
 }
 sayName() {
  console.log(this.name);
 }
}
let person =Person();
console.log(person);
person.sayName(); //Class constructor Person cannot be invoked without 'new'

//变量提升
let person = new Person()
function Person(name, age, job) {
 this.name = "Totora";
 this.age = 19;
 this.job = "student";
 this.sayName = function() {
  console.log(this.name);
 };
}
person.sayName(); //Totora

let person = new Person();
class Person {
 constructor() {
  this.name = "Totora";
  this.age = 19;
  this.job = "student";
 }
 sayName() {
  console.log(this.name);
 }
}
person.sayName(); // Cannot access 'Person' before initialization

//空类定义
class Foo {}
//有构造函数的类
class Bar {
 constructor() {}
}
//有获取函数的类
class Baz {
 get myBaz() {}
}
//有静态方法的类
class Qux {
 static myQux() {}
}

class Person {
 constructor() {
  //添加到this的所有内容都会存在于不同的实例上
  this.locate = () => console.log('instance', this);
 }
 //定义在类的原型对象上
 locate() {
  console.log('prototype', this);
 }
 //定义在类本身上
 static locate() {
  console.log('class', this);
 }
}
let p = new Person();
p.locate(); //instance Person { locate: [Function (anonymous)] }
Person.prototype.locate(); //prototype {}
Person.locate(); //class [class Person]

class Person {
 static name() {
  this.job(); //此处的this指向类
 }
 static job() {
  console.log('Totora'); //不会出现在实例中
 }
 job() {
  console.log('student');
 }
}
Person.name(); //Totora

//ES5中的继承
function parent(a,b) {
 this.a = a;
 this.b = b;
}
function child(c) {
 this.c = c;
}
parent.call(child, 1, 2); //子级来继承父级
child.prototype = new parent(1, 2);

//ES6中的继承
class parent {
 constructor(a, b) {
  this.a = a;
  this.b = b;
 }
 parentMethods() {
  return this.a + this.b
 }
}
class child extends parent {
 constructor(a, b, c) {
  super(a, b); //通过super调用父类
  this.c = c;
 }
 childMethods() {
  return this.c + ',' + super.parentMethods() //通过super实例化调用父类
 }
}
const point = new child(1, 2, 3);
console.log(point.childMethods());