JavaScript中的继承以及实现继承的几种方法
2017-03-02 17:31
381 查看
在之前学习java和C语言的时候接触了继承,但是看到了js的继承,总是觉得似曾相识,但又是是懂非懂的感觉。所以觉得应该总结一下,加深自己对js这种OO的理解。
许多OO语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。因为ECMAScript中函数无法签名,所以不支持接口继承,只支持实现继承,而实际上实现继承主要依靠原型链实现,在前面的文章中,已经详细讲过了原型链,这里就不做详细的讲解,直接进入正题,说说js是如何实现继承的。
实现原型链有一种基本模式,代码大概如下:
非常纯粹的继承关系,实例是子类的实例,也是父类的实例
父类新增原型方法/原型属性,子类都能访问到
简单,易于实现
缺点:
要想为子类新增属性和方法,必须要在new SuperType()这样的语句之后执行,不能放到构造器中
无法实现多继承
来自原型对象的引用属性是所有实例共享的
创建子类实例时,无法向父类构造函数传参
通过使用apply()和call()方法,我们实际上是在新创建的SubType实例的环境下调用了SuperType构造函数。这样一来,就会在新SubType对象上执行SuperType()函数中定义的所有对象初始化代码。这样的话,SubType的每个实例就都会具有自己的colors属性的副本。
相对于原型链而言,借用构造函数有一个很大的优势,即可以在子类型构造函数中向超类型构造函数传递参数。如下所示:
特点:
解决了1中,子类实例共享父类引用属性的问题
创建子类实例时,可以向父类传递参数
可以实现多继承(call多个父类对象)
缺点:
实例并不是父类的实例,只是子类的实例
只能继承父类的实例属性和方法,不能继承原型属性/方法
无法实现函数复用,每个子类都有父类实例函数的副本,影响性能
特点:
弥补了方式2的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法
既是子类的实例,也是父类的实例
不存在引用属性共享问题
可传参
函数可复用
缺点:
调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)
许多OO语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。因为ECMAScript中函数无法签名,所以不支持接口继承,只支持实现继承,而实际上实现继承主要依靠原型链实现,在前面的文章中,已经详细讲过了原型链,这里就不做详细的讲解,直接进入正题,说说js是如何实现继承的。
1、原型链继承
将原型链作为实现继承的主要方法,其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系:每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。实现原型链有一种基本模式,代码大概如下:
function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return this.property; } function SubType(){ this.subproperty = false; } //继承了SuperType SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function(){ return this.subproperty; } var instance = new SubType(); console.log(instance.getSuperValue());特点:
非常纯粹的继承关系,实例是子类的实例,也是父类的实例
父类新增原型方法/原型属性,子类都能访问到
简单,易于实现
缺点:
要想为子类新增属性和方法,必须要在new SuperType()这样的语句之后执行,不能放到构造器中
无法实现多继承
来自原型对象的引用属性是所有实例共享的
创建子类实例时,无法向父类构造函数传参
2、借用构造函数
在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数的技术。这种技术的基本思想是在子类型构造函数的内部调用超类型构造函数。函数只是在特定环境中执行代码的对象,因此通过使用apply()和call()方法也可以在新创建的对象上执行构造函数。function SuperType(){ this.colors = ["red","blue","green"]; } function SubType(){ //继承了SuperType SuperType.call(this); } var instance1 = new SubType(); instance1.colors.push("yellow"); console.log(instance1.colors); var instance2 = new SubType(); console.log(instance2.colors);
通过使用apply()和call()方法,我们实际上是在新创建的SubType实例的环境下调用了SuperType构造函数。这样一来,就会在新SubType对象上执行SuperType()函数中定义的所有对象初始化代码。这样的话,SubType的每个实例就都会具有自己的colors属性的副本。
相对于原型链而言,借用构造函数有一个很大的优势,即可以在子类型构造函数中向超类型构造函数传递参数。如下所示:
function SuperType(name){ this.name = name; } function SubType(){ //继承了SuperType SuperType.call(this,"Wendy"); //实例属性 this.age = 20; } var instance1 = new SubType(); console.log(instance1.name);//“Wendy” console.log(instance1.age);//20
特点:
解决了1中,子类实例共享父类引用属性的问题
创建子类实例时,可以向父类传递参数
可以实现多继承(call多个父类对象)
缺点:
实例并不是父类的实例,只是子类的实例
只能继承父类的实例属性和方法,不能继承原型属性/方法
无法实现函数复用,每个子类都有父类实例函数的副本,影响性能
3、组合继承
组合继承指的是将原型链和借用构造函数的技术组合,从而发挥二者之长的一种继承模式。主要思想:使用原型链实现对原型属性和方法的继承,然后通过借用函数来实现对实例属性的继承。这样,即通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。function SuperType(name){ this.name = name; this.colors = ["red","blur","green"]; } SuperType.prototype.sayName = function(){ console.log(this.name); } function SubType(name,age){ //继承属性 SuperType.call(this,name); this.age = age; } //继承方法 SubType.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){ console.log(this.age); }; var instance1 = new SubType("Wendy",20); instance1.colors.push("yellow"); console.log(instance1.colors); //[ 'red', 'blur', 'green', 'yellow' ] instance1.sayName(); //Wendy instance1.sayAge(); //20 var instance2 = new SubType("Kitty",18); console.log(instance2.colors);//[ 'red', 'blur', 'green' ] instance2.sayName(); //Kitty instance2.sayAge(); //18
特点:
弥补了方式2的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法
既是子类的实例,也是父类的实例
不存在引用属性共享问题
可传参
函数可复用
缺点:
调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)
相关文章推荐
- JavaScript继承实现的几种方法
- javascript创建对象,以及实现继承的方法
- JavaScript实现网页弹出式窗口的几种方法
- Javascript实现把网页中table的内容导入到excel中的几种方法
- javascript实现继承的两种方法
- javascript 继承实现方法
- JavaScript 实现继承的六种方法
- 禁用IE的后退按钮|显示网页已过期|几种语言的实现方法|c#|javascript|html
- Javascript实现把网页中table的内容导入到excel中的几种方法
- 用JavaScript实现单继承和多继承的简单方法
- JavaScript的相关继承笔记以及使用外部库实现JavaScript的面向对象特性
- 在javascript中实现OO,通过prototype为类型添加方法,好像继承
- javascript继承实现方法(转)
- javacript实现类继承的几种方法
- 利用javascript实现页面跳转的几种方法
- JavaScript访问后台方法的几种实现方法
- 禁用IE的后退按钮|显示网页已过期|几种语言的实现方法|c#|javascript|html
- javacript实现类继承的几种方法
- javascript 继承实现方法
- javascript 继承实现方法