js中的继承详解

在js中实现的继承的方法可以有多种,除了原型继承之后,还可以使用借用、伪造构造函数的方法实现继承等等。接下来我们就详细的介绍一下这几种方式。

1.js中的原型继承

关于原型继承的内容其实在上一篇博客中已经介绍过,这里就只说一下它的实现方式,关于其他的内容就不过多重复了。
在js中实现原型继承的方式是借用构造函数的原型和实例来实现:
	<script type="text/javascript">
		function Person(name,age){
			this.name=name;
			this.age=age;
		}
		function Teacher(name,sex){
			this.name=name;
			this.sex=sex;
		}
		Person.prototype.show="kk";
		//实现原型继承
		Teacher.prototype=new Person();
		var t1=new Teacher("aa","男");
		//使用Person原型中的属性
		console.log(t1.show);
	</script>
这种方式就是基于原型实现的继承,但是原型继承有一个很大的缺点,就是没有办法使用上级函数的私有属性逻辑,并且上级函数的私有属性也会进入到下级函数的原型中,从而可能会出现undefined的情况

2.借用、伪造构造函数的方式实现继承

其实这种实现继承的方式是借助call,apply函数来实现的继承,具体如下面的代码:
	<script type="text/javascript">
		function Person(name,age){
			this.name=name;
			this.age=age;
		}
		function Teacher(sex,name,age){
			Person.call(this,name,age);
			this.sex=sex;
		}
		var t1=new Teacher("男","cc",30);
		console.log(t1.sex);
		console.log(t1.name);
		console.log(t1.age);
	</script>
这就是使用借用的方式实现的继承,这种方式和原型继承相比可以使用上级函数的私有属性啦,但是不能使用上级函数原型中的属性和方法。

3.总结比较两种继承方法

原型继承:原型继承是通过函数原型和实例的方式实现的继承,可以使用上级函数原型中的内容,但是不能使用上级函数的私有属性逻辑,并且上级函数的私有属性会传递到下级函数的原型,会造成undefined的情况
借用、伪造继承:使用call或者apply函数实现的继承可以使用上级函数的私有属性,但是不能够实现上级函数原型中的内容,并且还可以实现多继承。

4.基于这两种方式实现的继承--组合方式继承

	<script type="text/javascript">
		function Person(name,age){
			this.name=name;
			this.age=age;
		}
		function Teacher(sex,name,age){
			Person.call(this,name,age);
			this.sex=sex;
		}
		Person.prototype.show="kk";
		Teacher.prototype=new Person();
		var t1=new Teacher("男","cc",30);
		console.log(t1.sex);
		console.log(t1.name);
		console.log(t1.age);
		console.log(t1.show);
	</script>
两种实现继承的方式结合在一起,这样的话就具有了上面两种方式共同的优点
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 JavaScript 继承是一个非常常见的概念。ES6 引入了 Class 语法糖,让继承更加易于理解和实现。在 Class ,我们可以使用 extends 关键字来创建一个子类,使其继承父类的属性和方法。 下面我们来详细了解一下如何在 JavaScript 使用 extends 实现继承。 ### 基础语法 首先,我们需要定义一个父类。在 ES6 ,我们可以使用 Class 来定义一个类。例如: ```javascript class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + ' makes a noise.'); } } ``` 这个 Animal 类有一个构造函数和一个 speak 方法。构造函数会在创建实例时被调用,而 speak 方法则可以让动物发出一些声音。 接下来,我们来创建一个子类。使用 extends 关键字来创建子类,并使用 super() 方法调用父类的构造函数。例如: ```javascript class Dog extends Animal { constructor(name) { super(name); } speak() { console.log(this.name + ' barks.'); } } ``` 这个 Dog 类继承了 Animal 类,并覆盖了其 speak 方法。在构造函数,我们通过 super() 方法来调用父类的构造函数,并将传递的参数传递给它。 现在,我们可以创建一个 Dog 的实例,并调用其 speak 方法: ```javascript let d = new Dog('Mitzie'); d.speak(); // Mitzie barks. ``` ### 继承父类的方法 当一个子类继承了一个父类时,它会继承父类的属性和方法。例如,在上面的例子,Dog 类继承了 Animal 类,因此它继承了 Animal 类的 speak 方法。 当我们调用子类的方法时,如果子类没有实现该方法,它会自动调用父类的方法。例如,在上面的例子,如果我们不覆盖 Dog 类的 speak 方法,它将调用 Animal 类的 speak 方法。 ### 覆盖父类的方法 如果一个子类需要覆盖父类的方法,我们可以在子类重新定义该方法。例如,在 Dog 类,我们覆盖了 Animal 类的 speak 方法,使其输出“barks”而不是“makes a noise”。 ### 调用父类的方法 有时候,我们需要在子类调用父类的方法。我们可以使用 super 关键字来调用父类的方法。例如,在 Dog 类,我们可以通过调用 super.speak() 来调用 Animal 类的 speak 方法。 ### 总结 继承是一个非常常见的概念,也是面向对象编程的重要概念之一。在 JavaScript ,我们可以使用 extends 关键字来实现继承。通过继承,子类可以继承父类的属性和方法,也可以覆盖父类的方法,并且可以调用父类的方法。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值