一、写法上面的区别

我们用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 = namethis.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();

ES5和ES6的类的区别相关推荐

es5和es6声明类的区别/es5和es6继承的区别
// es5和es6声明类的区别,es5没有统一语法规范.es6有统一写法规范 start. // es5声明"类"的语法--伪类 // function Person(name, ...
JavaScript、ES5和ES6的介绍和区别
JavaScript简介 JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能. JavaScript由三部分组成: ECMAScript(核心)+DOM ...
typescript学习之路(四) —— ts类的继承（包含es5以及es6的类继承）
上一文已经写了es5,es6等类的定义,所以本章主要写es5和es6的继承,由于es6的继承和ts的继承如出一辙,只是加了类型定义而已,所以ts的继承稍微写下,不会太详细. 文章目录 es5继承原型 ...
详解JavaScript中ES5和ES6的类、继承之间区别和联系
导读: 很多JavaScript的初学者(比如说我)在刚开始学习这门语言的时候,往往会对函数.对象.类.继承这些概念感到迷茫和疑惑,感觉他们彼此之间长得十分相似,这就导致很难分清他们什么时候该怎么用. ...
ES5和ES6的类，静态方法，继承实现代码
ES5 类和静态方法 function Person(info) {//构造函数里面的方法和属性this.name = 'fur'this.age = 1this.run = function() { ...
带你认识Javascript、ES5和ES6的介绍和区别
一.什么是Javascript? JavaScript(简称"JS")一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能. 动态: 在运行时确定数据类型 ...
实现es5和es6的类
类的由来 JavaScript语言的传统方法是通过构造函数定义并生成新对象,这种写法和传统的面向对象语言差异较大.所以,ES6引入了Class这个概念作为对象的模板. class可以看作只是一个语法糖 ...
typescript学习之路(三) —— ts定义类的方法（包含es5以及es6的定义类）
提起类,不得不说一下,强类型编程语言,如php,java,c++等都有类的概念.而js作为一门弱类型语言,是没有类这个概念的,虽然也能模拟类的实现,但总归不是类.so,ts也只是模拟类而已,使得更贴切 ...
es5和es6的区别
最近在看阮一峰的<ECMAScript6入门>,讲真,这本书对初学者真的很有帮助,在这里也推荐给大家.接下来,我要说的一些例子也大多来源于这本书,如果对这本书感兴趣的小伙伴,也可以戳这里哦 ...

ES5和ES6的类的区别