关于es5与es6的继承比较

ES5中的继承

原理:首先对于属性方面,一般是在子构造函数里面调用父构造函数,通过call改变执行上下文,Father.call(this, name); 完成属性继承

其次对原型上的方法继承,根据原型的向上查找规则,首先创建一个对象(该对象的__proto__指向父构造函数的原型),然后将该对象赋给子构造函数的原型

Son.prototype=Object.create(Father.prototype);

或者Son.prototype=new Father();

经过上述操作(即连接了图中6操作+7操作+1操作)后,这时的Son.prototype.constcuctor指向的是Father(),而一般原型的constructor指向函数本身,

因此,需要操作Son.prototype.constcuctor=son;(图中2操作)让它重新指向Son()。

 1    function Father(name) {
 2         this.name = name;
 3     }
 4
 5     function Son(name, age) {
 6         Father.call(this, name);
 7         this.age = age;
 8     }
 9     Father.prototype.getName = function() {
10         console.log(this.name);
11     }
12     // 子类的原型是父类的一个实例,可以new一个出来,也可以create一个出来
13     // Son.prototype = new Father;
14     Son.prototype=Object.create(Father.prototype);
15     // 修正构造器,这里注意要修改Son的构造器指向赋值为Son
16     Son.prototype.constructor = Son;
17     //子类自己的方法
18     Son.prototype.getAge = function() {
19         console.log(this.age);
20     }
21     var s1 = new Son(‘李四‘, 222);
22     console.log(s1); // Son {name:‘李四‘,age:22}
23     s1.getName(); // 李四
24     console.log(Son.prototype.constructor); // Son
25     console.log(s1.constructor); // Son
26     s1.getAge(); // 22
27     //HACK:这里通过__proto__这个s1实例的属性找到了Son的prototype,并为其添加了say的方法
28     s1.__proto__.say = function() {
29         console.log(‘hhhhhhhhhhhhhhhhhhhhhhhh‘);
30     }
31     s1.say() //  打印 hhhhhhhhhhhhhhh
32     // NOTE: __proto__这个属性是具体到某个实例化后的对象才有的属性,指向他所属的类的原型
33     console.log(new Son(‘a‘,2).__proto__); //  为Son对象

ES6中的继承

原理:ES6封装了class,extends关键字来实现继承。

子类通过extends继承父类,然后通过在子类中构造函数 super(name); 完成属性继承。注意这句代码需要在构造函数中的第一行。

区别于ES5,这里不再需要修改子类的原型的构造函数指向。

 1   class Father {
 2         constructor(name) {
 3             this.name = name;
 4         }
 5         getName() {
 6             console.log(this.name);
 7         }
 8         //  这里是父类的f方法
 9         f() {
10             console.log(‘fffffffffffffffffffffff‘);
11         }
12     }
13     class Son extends Father {
14         constructor(name, age) {
15             super(name); // HACK: 这里super()要在第一行
16             this.age = age;
17         }
18         getAge() {
19             console.log(this.age);
20         }
21         //  子类的f方法
22         f() {
23             console.log(‘sssssssssssssssssssssss‘);
24         }
25     }
26     var s1 = new Son(‘张一‘, 12);
27     s1.getName();
28     s1.getAge();
29     console.log(s1.__proto__.constructor); //  为Son,不用修正
30     s1.f(); //  打印ssssssssssssss

原文地址:https://www.cnblogs.com/xiaohuai/p/8125415.html

时间: 2024-10-08 14:39:49

关于es5与es6的继承比较的相关文章

详解ES5和ES6的继承

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

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

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

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中要通过原型链去模拟,非常难理解,对初学者很不友好,并且有好几种接口继承的方式.本文为了对初学者更友好,并不打算让读者了解接口继承的原理,而是直接把接口继承实现方法封装成一个函数,大家只

浅谈es5和es6中的继承

首先给大家介绍下在es5中构造函数的继承 1 function A(){ 2 2 //构造函数A 3 3 this.name="我是A函数"; 4 4 } 5 5 6 6 A.prototype={ 7 7 constructor:A, 8 8 render(){ 9 9 console.log("我是A实例的render方法") 10 10 } 11 11 } 12 12 13 13 let a=new A(); 14 14 15 15 function B(a)

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

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

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

多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方式.点击桌面空白处.点击任务栏等弹出的菜单都是不同的. 方法重写(override): 即子类定义一个与父类名字相同的方法,以此覆盖父类方法,以此来实现不同的功能. 1 function Animal(){} 2 var AnimalP = Animal.prototype; 3 AnimalP.eat =

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

本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对象只能通过特定的接口访问,这也是面向接口编程思想的一部分. 封装是面向对象编程里非常重要的一部分,让我们来看看没有封装的代码是什么样的: 1 function Dog(){ 2 this.hairColor = '白色';//string 3 this.breed = '贵宾';//string 4 this

ES5与ES6的研究

今天开始ES5与ES6的研究. 1.什么是ES5与ES6? 就是ECMAScript的第五个版本与第六个版本,那么问题来了,什么是ECMAScript?首先它是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言,又被称为JavaScript,但其实JavaScript是ECMA-262标准的实现与扩展(说了那么多其实它就是JavaScript的一套标准),具体的名字由来及历史可以参照ECMAScript百度百科.