聊一聊JS的继承

Posted 地铁程序员

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了聊一聊JS的继承相关的知识,希望对你有一定的参考价值。

1、组合继承

//		组合继承
		function Animal(){
			this.name=name||‘Animal‘;
			this.sleep=function(){
				console.log(this.name+‘sleep‘);
			}
		}
		Animal.prototype.eat=function(food){
			console.log(this.name+‘eat‘+food);
		}
		
		function Cat(name){
			Animal.call(this);//继承实例属性/方法,也可以继承原型属性/方法
			this.name=name||‘tom‘;//调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)
		}
		Cat.prototype=new Animal();
		Cat.prototype.constructor=Cat;//组合继承也是需要修复构造函数指向的。
		var cat = new Cat();//既是子类的实例,也是父类的实例
		console.log(Cat.prototype.constructor);
		console.log(cat.name)
		console.log(cat.eat(‘haha‘))//可传参

  

特点:

 可以继承实例属性/方法,也可以继承原型属性/方法

  1. 既是子类的实例,也是父类的实例
  2. 不存在引用属性共享问题
  3. 可传参
  4. 函数可复用

缺点:

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

推荐指数:★★★★(仅仅多消耗了一点内存)

 

2、寄生组合继承

寄生组合继承
		function Animal(){
			this.name=name||‘Animal‘;
			this.sleep=function(){
				console.log(this.name+‘sleep‘);
			}
		}
		Animal.prototype.eat=function(food){
			console.log(this.name+‘eat‘+food);
		}
		
		function Cat(name){
			Animal.call(this);
			this.name=name||‘tom‘;
		}
		
		(function(){
			var Super=function(){};// 创建一个没有实例方法的类
			Super.prototype=Animal.prototype;
			Cat.prototype=new Super(); //将实例作为子类的原型
		})()
		Cat.prototype.constructor = Cat;
		var cat=new Cat();
		console.log(cat.eat(‘haha‘))

  

特点:

  1. 堪称完美

缺点:

  1. 实现较为复杂

推荐指数:★★★★(实现复杂,扣掉一颗星)

以上是关于聊一聊JS的继承的主要内容,如果未能解决你的问题,请参考以下文章

聊一聊面向对象的三大特征

#聊一聊悟空编辑器# WuKong,让我们编辑文章更便捷!

简单聊一聊JS中的循环引用及问题

聊一聊装饰者模式

怎么理解js的原型链继承?

怎么理解js的原型链继承?