ES5 和ES6 继承的区别

继承:一个对象直接使用另一个对象的属性和方法

在ES5的继承中,先创建子类的实例对象this,然后再将父类的方法添加到this上( Parent.apply(this) )。

ES6采用的是先创建父类的实例this(故要先调用 super( )方法),完后再用子类的构造函数修改this

上图的例子:

ES5

原理:

ES6

原文地址:https://www.cnblogs.com/xiaoeshuang/p/12192258.html

时间: 2024-10-09 05:52:39

ES5 和ES6 继承的区别的相关文章

关于es5与es6的继承比较

ES5中的继承 原理:首先对于属性方面,一般是在子构造函数里面调用父构造函数,通过call改变执行上下文,Father.call(this, name); 完成属性继承. 其次对原型上的方法继承,根据原型的向上查找规则,首先创建一个对象(该对象的__proto__指向父构造函数的原型),然后将该对象赋给子构造函数的原型 Son.prototype=Object.create(Father.prototype); 或者Son.prototype=new Father(); 经过上述操作(即连接了图

ES5和ES6中的继承

看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: 1 function Super() {} 2 3 function Sub() {} 4 Sub.prototype = new Super(); 5 Sub.prototype.constructor = Sub; 6 7 var sub = new Sub(); 8 9 Sub.prototype.constructor

JavaScript面向对象轻松入门之继承(demo by ES5、ES6)

继承是面向对象很重要的一个概念,分为接口继承和实现继承,接口继承即为继承某个对象的方法,实现继承即为继承某个对象的属性.JavvaScript通过原型链来实现接口继承.call()或apply()来实现实现继承. 接口继承的实现在ES5中是比较麻烦,在其它OOP语言中一个extends关键字就可以实现,但在ES5中要通过原型链去模拟,非常难理解,对初学者很不友好,并且有好几种接口继承的方式.本文为了对初学者更友好,并不打算让读者了解接口继承的原理,而是直接把接口继承实现方法封装成一个函数,大家只

js重新讲解继承,es5的一些继承,es6继承的改变 ----------由浅入深

es5 利用原型公有私有继承 function Parent(name) { this.name = name } Parent.prototype.home = '北京'; function Child() { this.age = 8; } //将父类的实例绑定在子类的原型上 Child.prototype = new Parent('aa'); //实例化原型 let child = new Child(); //这时候继承父类的公有私有属性 console.log(child.home+

ES5和ES6中对于继承的实现方法

在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是通过将子类构造函数的原型作为父类构造函数的实例,这样就连通了子类-子类原型-父类,原型链的特点就是逐层查找,从子类开始一直往上直到所有对象的原型Object.prototype,找到属性方法之后就会停止查找,所以下层的属性方法会覆盖上层. 一个基本的基于原型链的继承过程大概是这样的: //先来个父类

ES5和ES6中的继承 图解

Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了class和extends,和ES5搅在一起,加上平时很少自己写继承,简直乱成一锅粥.不过还 好,画个图一下就清晰了,下面不说话了,直接上图,上代码. ES5 ES5中的继承,看图: 1 function Super() {} 2 3 function Sub() {} 4 Sub.prototype

ES5与ES6中的继承

ES5继承在ES5中没有类的概念,所以一般都是基于原型链继承,具体的继承方法有以下几种: 父类: function Father (name) { this.name = name || 'sam' this.sleep = function () { // 实例方法 return this.name + '正在睡觉' } } Father.prototype.eat = funciton () { // 原型方法 return this.name + '正在吃饭' } 一,原型链继承核心:将父

详解ES5和ES6的继承

ES5继承 构造函数.原型和实例的关系:每一个构造函数都有一个原型对象,每一个原型对象都有一个指向构造函数的指针,而每一个实例都包含一个指向原型对象的内部指针, 原型链实现继承 基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法,即让原型对象等于另一个类型的实例 基本模式: 1 function SuperType(){ 2 this.property = true; 3 } 4 SuperType.prototype.getSuperValue = function(){ 5 re

JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)

写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向对象的文章实在是太多了,网上一搜一大堆,很多书里面也介绍的很详细.但作者当初在学习面向对象的时候还是非常困难,特别是在习惯了面向过程编程的情况下,不知道大家有没有这个感受. 作者分析了一下其中的原因,恐怕是因为里面涉及的概念太多:原型.原型链.继承.this.constructor.call等等,这