ES5和ES6的类的区别

目录

一、写法上面的区别

二、二者的其他区别

1.class 不能提升

2.class只能通过new 实例

3.class的原型上属性不能遍历

 4.实现继承的方法不同

---

一、写法上面的区别

我们用ES5定义一个类：

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype = {
    say: function(){
        console.log('hello');
    },
    sayHi() {
        console.log('hi');
    }
};
Person.eat = function(){
    console.log('eat')
}
console.log (typeof Person)

我们再用ES6的方法定义一个类

class Person {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log('hello')
    }
    sayHi(){
        console.log('hi')
    }
    static eat(){
        console.log('eat');
    }
}
console.log (typeof Person)

我们用typeof Person    检测一下可以发现不管是ES6还是ES5，Person的类型都是函数（function），所以两者虽然写发上有区别但是其本质都是一样的。

二、二者的其他区别

1.class 不能提升

我们先验证ES5中的Person是否可以提升；

 console.log(Person)
function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype = {
    say: function(){
        console.log('hello');
    },
    sayHi() {
        console.log('hi');
    }
};
Person.eat = function(){
    console.log('eat')
}

 结果显而易见可以提升；我们再看看ES6：

console.log(Person)
class Person {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log('hello')
    }
    sayHi(){
        console.log('hi')
    }
    static eat(){
        console.log('eat');
    }
}

就会报错说“Cannot access 'Person' before initialization”，初始化前无法访问“Person”；因为ES6类是严格模式下的，不存在变量提升；

2.class只能通过new 实例

当我们对两段代码分别使用console.log(Person())时在ES5中

 

 而在es6中就会报错

 在没有“new”的情况下无法调用类构造函数Person

3.class的原型上属性不能遍历

在ES5中原型上的属性是可以遍历的：

var  p = new Person();
for (var i in p)
{
    console.log(i)
}

而在ES6中就不可以遍历：

 4.实现继承的方法不同

ES6中通过extends关键字完成继承

//使用class构造一个父类
class Parent {
    constructor(name,age){
      this.name = name
      this.age = age
    }
    sayName(){
      console.log(this.name);
    }
  }
//使用class构造一个子类，并使用extends实现继承，super指向父类的原型对象
class Child extends Parent{
    constructor(name,age,gender){
      super(name,age)
      this.gender = gender
    }
    sayGender(){
      console.log(this.gender);
    }
  }
//实例化对象
  let r = new Child('张三',18,'男')
  r.sayGender()
  r.sayName()
  console.log(r.age);
  console.log(r)

而ES5中实现继承的方法有主要是通过原型链实现继承的；比较好用且常见的就是组合式继承：

function Father(name,age){
    this.name = name;
    this.age = age;
}
Father.prototype.say = function(){
    console.log('hello');
}
function Son(name,age,sourse){
    Father.call(this,name,age);
    this.sourse = sourse;
}
Son.prototype = new Father();
Son.prototype.said = function(){
    console.log('hi');
}
var s1 = new Son('李四',18,60);
console.log(Son.prototype);
console.log(s1.__proto__);
console.log(s1);
s1.say();
s1.said();