JavaScript中的继承以及实现继承的几种方法

      在之前学习java和C语言的时候接触了继承,但是看到了js的继承,总是觉得似曾相识,但又是是懂非懂的感觉。所以觉得应该总结一下,加深自己对js这种OO的理解。

      许多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的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法
  • 既是子类的实例,也是父类的实例
  • 不存在引用属性共享问题
  • 可传参
  • 函数可复用

缺点:

  • 调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)



    

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值