ES5和ES6继承的区别

ES5的继承方法可以看这篇：
https://blog.csdn.net/qq593249106/article/details/83098432

ES5与ES6的继承方法对照：

ES5

function Parent() {this.name = 'parent';this.arr = [1,2,3,4];
}
Parent.prototype.say = function () {console.log('say');
};
function Child(age) {Parent.call(this);this.age = age;
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
var c = new Child(12);
console.log(c.name); //输出parent
c.say(); //输出say
console.log(c.constructor); //输出function Child(age) {Parent.call(this);this.age = age;}
console.log(new Parent().constructor); //输出Parent() {this.name = 'parent';this.arr = [1,2,3,4];}

ES6

class Parent2 {constructor() {this.name = 'parent';}
}
Parent2.prototype.say = function () {console.log('say');
};
class Child2 extends Parent {constructor(age) {super();this.age = age;}
}
var c2 = new Child2(12);
console.log(c2.name); //输出parent
c2.say(); //输出say
console.log(c.constructor); //输出function Child(age) {Parent.call(this);this.age = age;}
console.log(new Parent().constructor); //输出Parent() {this.name = 'parent';this.arr = [1,2,3,4];}

ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.apply(this)），然后再把原型链继承。

ES6的继承机制完全不同，实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法，才可使用this关键字，否则报错。），然后再用子类的构造函数修改this实现继承。

ES5和ES6继承的区别相关推荐

es5和es6声明类的区别/es5和es6继承的区别
// es5和es6声明类的区别,es5没有统一语法规范.es6有统一写法规范 start. // es5声明"类"的语法--伪类 // function Person(name, ...
JS面试题--ES5和ES6有什么区别？
ES5和ES6有什么区别? ES6新增了一些技术: 1.let声明变量和const声明常量,两个都有块级作用域ES5中是没有块级作用域的,并且var有变量提升,在let中,使用的变量一定要进行声明 2 ...
ES5继承和ES6继承的区别
ES5的继承:实质是先创造子类的实例对象this,然后再将父类实的方法添加到this上( Parent.apply(this) ) function Parent(name){this.name ...
ES5 和ES6 继承机制
为什么80%的码农都做不了架构师?>>> ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this)).ES ...
ES5、ES6 继承
es5继承类型: 原型链继承:让构造函数的原型指向父类的实例,缺点是子类没有办法构建私有属性,对一个子类实例的属性进行更改,会改变所有子类的实例 function Parent(){this.name ...
ES5和ES6继承有何区别
ES5 是先新建子类的实例对象this,再将父类的属性添加到子类上. 由于父类的内部属性无法获取,导致无法继承原生的构造函数 ES6 是先新建父类的实例对象this,然后再用子类的构造函数修饰this ...
es5 vs es6 继承
ES5 继承借助构造函数继承(call, apply);无法继承父级原型上属性和方法 function Animal(name, txt) {console.log('构造函数:Animal', t ...
JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
Node.js 的基础教学之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...
常用浏览器内核的了解、ES5和ES6的区别、ES6的更新的笔试题
对浏览器的内核的了解?有哪些内核?(重点6分) 浏览器要渲染出网页给用户看,必须加载html编码和js脚本,渲染引擎渲染页面的UI和js执行引擎操作内存,就是浏览器的的重要组成程序:内核根据不同的浏 ...

ES5和ES6继承的区别

ES5与ES6的继承方法对照：

ES5和ES6继承的区别相关推荐

最新文章

热门文章