js对象的创建对象模式和继承模式（下）---继承模式

超、凢脫俗 2022-12-08 15:31 211阅读 0赞

### 文章目录 ###

*  前言
 *  正文
 *   *  原型链
     *  借用构造函数
     *  组合继承
     *  原型式继承
     *  寄生式继承
     *  寄生组合式继承
 *  小结

# 前言 #

上一章我们讲了js对象创建模式的方式，在ES5中，js中是没有类的概念的，js的继承是基于对象去实现的，这一章我将给各位同学介绍js对象的继承模式

# 正文 #

## 原型链 ##

ECMAScript中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法

function Fruit(){ 
    	this.name = name;
    }
    function Apple(){ }
    Apple.prototype = new Fruit('apple');

但是在通过原型链实现继承时，不能使用对象字面量创建原型方法，因为这样做会重写原型链，这里需要再次提醒大家，上一章已经就这个问题具体解释过原因，**重写原型会断开与之前原型链上所有构造函数和原型的联系**

原型链虽然很强大，但是存在一个最大的问题，**引用类型值的原型属性会被所有实例共享**，而这也正是为什么要在构造函数中，而不是在原型对象中定义属性的原因，实践当中很少会单独使用原型链

## 借用构造函数 ##

这种技术的基本思想相当简单，即在子类型构造函数的内部调用超类型构造函数。这个方式有一个很大的优势，可以**从子类型构造函数向超类型构造函数内部传递参数**

function Fruit(name){ 
    	this.name = name;
    }
    
    function Apple(){ 
    	Fruit.call(this, 'apple');
    }

看过我们上一章的同学应该明白，这个方式保留了构造函数模式存在的问题，**函数方法没办法复用，而且在超类型定义的方法，对子类型也是不可见的**，所以实践当中也很少会单独使用借用构造函数的技术

## 组合继承 ##

组合继承，有时候也叫做伪经典继承，指的是将原型链和借用构造函数的技术组合到一块，从而发挥两者之长的一种继承模式。**构造函数用于继承实例属性，而原型链用于继承定义方法和共享的属性**，是js中最常用的继承模式

## 原型式继承 ##

说简单点，原型式继承就是直接在构造函数中继承原型

function object(o){ 
    	function F(){ }
    	F.prototype = o;
    	return new F();
    }

ES5中新增了object.create()方法规范化了原型式继承

> Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的\_\_proto\_\_

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]

var person = { 
    	name: 'zm',
    	age: 21
    }
    var anotherPerson = Object.create(person);

如果只是想让一个对象与另一个对象保持类似的情况下，原型式继承是可以完全胜任的，不过别忘了，包含引用类型值的属性始终都会共享相应的值，就像使用原型模式一样

## 寄生式继承 ##

寄生式继承创建一个仅用于封装继承过程的函数，该函数内部以某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象。下面举一个《javaScript高级程序设计》中的例子帮助大家理解

function createAnother(original){ 
    	var clone = object(original); // 通过调用函数创建一个新对象
    	clone.sayHi = function(){ 	// 以某种方式来增强这个对象
    		console.log('hi');
    	}
    	return clone; // 返回这个对象
    }

同构造函数模式一样，会由于函数不能复用而降低效率

## 寄生组合式继承 ##

前面说，组合继承是js最常用的继承模式，但是它有自己的不足。组合继承最大的问题就是**无论什么情况下，都会调用两次超类型构造函数**：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部

// 组合模式
    function Fruit(name){ 
    	this.name = name;
    }
    Fruit.prototype.sayName = function(){ 
    	console.log(this.name);
    }
    
    function Apple(name){ 
    	Fruit.call(this, name);	// 第二次调用
    }
    Apple.prototype = new Fruit();	// 第一次调用
    Apple.prototype.constructor = Apple;

而寄生组合式继承就是用寄生继承去封装了继承超类型的原型，来解决重复调用超类型函数的问题

// 寄生组合式继承
    function inheritPrototype(subType, superType){ 
    	var prototype = object(superType, protoType);
    	prototype.constructor = subType;
    	subType.prototype = prototype;
    }
    
    function Fruit(name){ 
    	this.name = name;
    }
    Fruit.prototype.sayName = function(){ 
    	console.log(this.name);
    }
    
    function Apple(name){ 
    	Fruit.call(this, name);	
    }
    inheritPrototype(Apple, Fruit);

这个模式的高效率就体现在它只调用了一个超类的构造函数，但是又保留了组合模式的所有优势，所以这个继承模式被认为是引用类型最理想的继承模式

# 小结 #

1、原型式继承，本质是执行对给定对象的浅复制，而复制得到的副本还可以得到进一步改造  
       2、寄生式继承，是为了结局组合继承模式由于多次调用超类型构造函数而导致的低效率问题，可以将这个模式与组合继承一起使用  
       3、集寄生式继承和组合继承的优点为一身，是实现基于类型继承的最有效方法  
  
  
       小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！  
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d12c39f9e346498e9a94f7b860cb687a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb2ZhbmRlZGFpbWE_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/f351ccafae654e348bee132ea646a29b.png