存在的差异:
1. 私有数据继承差异 es5:执行父级构造函数并且将this指向子级 es6:在构造函数内部执行super方法,系统会自动执行父级,并将this指向子级2. 共有数据(原型链方法)继承的差异 es5:子级原型链上的赋值,继承父级原型链上数据 es6:extend 父级,会自动将父级原型链上的数据给子级3. 原型链上的共有数据是否可枚举for in es5:可以枚举 es6:不可枚举4. 构造函数的指向 es5:需要改变constructor的指向 es6:不需要改5. 静态方法的写法差异 es5:直接在构造函数.静态方法 es6:static a=1;静态方法——浏览器不支持,要用bable6. 实例_proto_的指向差异 es5:ƒ Child5(name) es6:class Child6
es6的优点:
Class在语法上面更加贴近面向对象的写法;
Class实现继承更加易读、易理解;
更易于写Java后端等语言的使用;
****本质还是语法糖,使用prototype。
es5的方法
//父级 function Parent5(name) { //构造函数 this.name=name;//私有数据 } Parent5.prototype.say=function () { //公共数据 console.log(this.name); } //子级 function Child5(name) { //构造函数 Parent5.call(this,name)//执行父级的构造函数,并将this指向子级 } Child5.prototype=new Parent5;//将父级原型上的共有数据给自己 Child5.prototype.constructor=Child5;//改变constructor的指向问题 Child5.prototype.buy=function () { console.log('buy'); } var c5=new Child5('邵');//实例 c5.say()//邵 c5.buy()//buy
es6的方法
//父级 class Parent6{ //类 constructor(name){ //构造函数 this.name=name; } say(){ console.log(this.name); } } class Child6 extends Parent6{ //将父级原型上的共有数据给自己 constructor(name){ super(name);//执行父级的构造函数,并将this指向子级 } buy(){ console.log('buy') } } var c6=new Child6('邵'); c6.say()//邵 c6.buy()//buy