JavaScript深入之继承的多种方式和优缺点

写在前面

创新互联是一家专业提供长乐企业网站建设,专注与做网站、网站设计、H5页面制作、小程序制作等业务。10年已为长乐众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

本文讲解JavaScript各种继承方式和优缺点。

但是注意：

这篇文章更像是笔记，哎，再让我感叹一句：《JavaScript高级程序设计》写得真是太好了！

1、原型链继承

 
 
 
 
    
  
  
  
  
  1. function Parent () { 
    2. 
  
  
  
  
  2.     this.name = 'kevin'; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. Parent.prototype.getName = function () { 
    5. 
  
  
  
  
  5.     console.log(this.name); 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. function Child () { 
    8. 
  
  
  
  
  8. } 
    9. 
  
  
  
  
  9. Child.prototype = new Parent();  
    10. 
  
  
  
  
  10. var child1 = new Child(); 
    11. 
  
  
  
  
  11. console.log(child1.getName()) // kevin
    12.

问题：

1、引用类型的属性被所有实例共享，举个例子：

 
 
 
 
    
  
  
  
  
  1. function Parent () { 
    2. 
  
  
  
  
  2.     this.names = ['kevin', 'daisy']; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. function Child () { 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. Child.prototype = new Parent(); 
    7. 
  
  
  
  
  7. var child1 = new Child(); 
    8. 
  
  
  
  
  8. child1.names.push('yayu'); 
    9. 
  
  
  
  
  9. console.log(child1.names); // ["kevin", "daisy", "yayu"] 
    10. 
  
  
  
  
  10. var child2 = new Child(); 
    11. 
  
  
  
  
  11. console.log(child2.names); // ["kevin", "daisy", "yayu"]
    12.

2、在创建 Child 的实例时，不能向Parent传参

2、借用构造函数(经典继承)

 
 
 
 
    
  
  
  
  
  1. function Parent () { 
    2. 
  
  
  
  
  2.     this.names = ['kevin', 'daisy']; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. function Child () { 
    5. 
  
  
  
  
  5.     Parent.call(this); 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. var child1 = new Child(); 
    8. 
  
  
  
  
  8. child1.names.push('yayu'); 
    9. 
  
  
  
  
  9. console.log(child1.names); // ["kevin", "daisy", "yayu"] 
    10. 
  
  
  
  
  10. var child2 = new Child(); 
    11. 
  
  
  
  
  11. console.log(child2.names); // ["kevin", "daisy"]
    12.

优点：

1、避免了引用类型的属性被所有实例共享

2、可以在 Child 中向 Parent 传参

举个例子：

 
 
 
 
    
  
  
  
  
  1. function Parent (name) { 
    2. 
  
  
  
  
  2.     this.name = name; 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. function Child (name) { 
    5. 
  
  
  
  
  5.     Parent.call(this, name); 
    6. 
  
  
  
  
  6. } 
    7. 
  
  
  
  
  7. var child1 = new Child('kevin'); 
    8. 
  
  
  
  
  8. console.log(child1.name); // kevin 
    9. 
  
  
  
  
  9. var child2 = new Child('daisy'); 
    10. 
  
  
  
  
  10. console.log(child2.name); // daisy
    11.

缺点：

方法都在构造函数中定义，每次创建实例都会创建一遍方法。

3、组合继承

原型链继承和经典继承双剑合璧。

 
 
 
 
    
  
  
  
  
  1. function Parent (name) { 
    2. 
  
  
  
  
  2.     this.name = name; 
    3. 
  
  
  
  
  3.     this.colors = ['red', 'blue', 'green']; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. Parent.prototype.getName = function () { 
    6. 
  
  
  
  
  6.     console.log(this.name) 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8. function Child (name, age) { 
    9. 
  
  
  
  
  9.     Parent.call(this, name);   
    10. 
  
  
  
  
  10.     this.age = age; 
    11. 
  
  
  
  
  11. } 
    12. 
  
  
  
  
  12. Child.prototype = new Parent(); 
    13. 
  
  
  
  
  13. ChildChild.prototype.constructor = Child; 
    14. 
  
  
  
  
  14. var child1 = new Child('kevin', '18'); 
    15. 
  
  
  
  
  15. child1.colors.push('black'); 
    16. 
  
  
  
  
  16. console.log(child1.name); // kevin 
    17. 
  
  
  
  
  17. console.log(child1.age); // 18 
    18. 
  
  
  
  
  18. console.log(child1.colors); // ["red", "blue", "green", "black"] 
    19. 
  
  
  
  
  19. var child2 = new Child('daisy', '20'); 
    20. 
  
  
  
  
  20. console.log(child2.name); // daisy 
    21. 
  
  
  
  
  21. console.log(child2.age); // 20 
    22. 
  
  
  
  
  22. console.log(child2.colors); // ["red", "blue", "green"]
    23.

优点：融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。

4、原型式继承

 
 
 
 
    
  
  
  
  
  1. function createObj(o) { 
    2. 
  
  
  
  
  2.     function F(){} 
    3. 
  
  
  
  
  3.     F.prototype = o; 
    4. 
  
  
  
  
  4.     return new F(); 
    5. 
  
  
  
  
  5. }
    6.

就是 ES5 Object.create 的模拟实现，将传入的对象作为创建的对象的原型。

缺点：

包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。

 
 
 
 
    
  
  
  
  
  1. var person = { 
    2. 
  
  
  
  
  2.     name: 'kevin', 
    3. 
  
  
  
  
  3.     friends: ['daisy', 'kelly'] 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. var person1 = createObj(person); 
    6. 
  
  
  
  
  6. var person2 = createObj(person); 
    7. 
  
  
  
  
  7. person1.name = 'person1'; 
    8. 
  
  
  
  
  8. console.log(person2.name); // kevin 
    9. 
  
  
  
  
  9. person1.firends.push('taylor'); 
    10. 
  
  
  
  
  10. console.log(person2.friends); // ["daisy", "kelly", "taylor"]
    11.

注意：修改person1.name的值，person2.name的值并未发生改变，并不是因为person1和person2有独立的 name 值，而是因为person1.name = 'person1'，给person1添加了 name 值，并非修改了原型上的 name 值。

5、寄生式继承

创建一个仅用于封装继承过程的函数，该函数在内部以某种形式来做增强对象，最后返回对象。

 
 
 
 
    
  
  
  
  
  1. function createObj (o) { 
    2. 
  
  
  
  
  2.     var clone = Object.create(o); 
    3. 
  
  
  
  
  3.     clone.sayName = function () { 
    4. 
  
  
  
  
  4.         console.log('hi'); 
    5. 
  
  
  
  
  5.     } 
    6. 
  
  
  
  
  6.     return clone; 
    7. 
  
  
  
  
  7. }
    8.

缺点：跟借用构造函数模式一样，每次创建对象都会创建一遍方法。

6、寄生组合式继承

为了方便大家阅读，在这里重复一下组合继承的代码：

 
 
 
 
    
  
  
  
  
  1. function Parent (name) { 
    2. 
  
  
  
  
  2.     this.name = name; 
    3. 
  
  
  
  
  3.     this.colors = ['red', 'blue', 'green']; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. Parent.prototype.getName = function () { 
    6. 
  
  
  
  
  6.     console.log(this.name) 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8. function Child (name, age) { 
    9. 
  
  
  
  
  9.     Parent.call(this, name); 
    10. 
  
  
  
  
  10.     this.age = age; 
    11. 
  
  
  
  
  11. } 
    12. 
  
  
  
  
  12. Child.prototype = new Parent(); 
    13. 
  
  
  
  
  13. var child1 = new Child('kevin', '18'); 
    14. 
  
  
  
  
  14. console.log(child1)
    15.

组合继承最大的缺点是会调用两次父构造函数。

一次是设置子类型实例的原型的时候：

 
 
 
 
    
  
  
  
  
  1. Child.prototype = new Parent();
    2.

一次在创建子类型实例的时候：

 
 
 
 
    
  
  
  
  
  1. var child1 = new Child('kevin', '18');
    2.

回想下 new 的模拟实现，其实在这句中，我们会执行：

 
 
 
 
    
  
  
  
  
  1. Parent.call(this, name);
    2.

在这里，我们又会调用了一次 Parent 构造函数。

所以，在这个例子中，如果我们打印 child1 对象，我们会发现 Child.prototype 和 child1 都有一个属性为colors，属性值为['red', 'blue', 'green']。

那么我们该如何精益求精，避免这一次重复调用呢？

如果我们不使用 Child.prototype = new Parent() ，而是间接的让 Child.prototype 访问到 Parent.prototype 呢？

看看如何实现：

 
 
 
 
    
  
  
  
  
  1. function Parent (name) { 
    2. 
  
  
  
  
  2.     this.name = name; 
    3. 
  
  
  
  
  3.     this.colors = ['red', 'blue', 'green']; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. Parent.prototype.getName = function () { 
    6. 
  
  
  
  
  6.     console.log(this.name) 
    7. 
  
  
  
  
  7. } 
    8. 
  
  
  
  
  8. function Child (name, age) { 
    9. 
  
  
  
  
  9.     Parent.call(this, name); 
    10. 
  
  
  
  
  10.     this.age = age; 
    11. 
  
  
  
  
  11. } 
    12. 
  
  
  
  
  12. // 关键的三步 
    13. 
  
  
  
  
  13. var F = function () {}; 
    14. 
  
  
  
  
  14. F.prototype = Parent.prototype; 
    15. 
  
  
  
  
  15. Child.prototype = new F(); 
    16. 
  
  
  
  
  16. var child1 = new Child('kevin', '18'); 
    17. 
  
  
  
  
  17. console.log(child1);
    18.

最后我们封装一下这个继承方法：

 
 
 
 
    
  
  
  
  
  1. function object(o) { 
    2. 
  
  
  
  
  2.     function F() {} 
    3. 
  
  
  
  
  3.     F.prototype = o; 
    4. 
  
  
  
  
  4.     return new F(); 
    5. 
  
  
  
  
  5. } 
    6. 
  
  
  
  
  6. function prototype(child, parent) { 
    7. 
  
  
  
  
  7.     var prototype = object(parent.prototype); 
    8. 
  
  
  
  
  8.     prototype.constructor = child; 
    9. 
  
  
  
  
  9.     child.prototype = prototype; 
    10. 
  
  
  
  
  10. } 
    11. 
  
  
  
  
  11. // 当我们使用的时候： 
    12. 
  
  
  
  
  12. prototype(Child, Parent);
    13.

引用《JavaScript高级程序设计》中对寄生组合式继承的夸赞就是：

这种方式的高效率体现它只调用了一次 Parent 构造函数，并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用 instanceof 和 isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

分享题目：JavaScript深入之继承的多种方式和优缺点
文章起源：http://www.csdahua.cn/qtweb/news35/231485.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

网站营销知识

各行业网站

全网营销　　 　成都400电话申请　　 　成都网络公司　　 　成都全网营销推广　　 　成都酒店服定制　　 　重庆水土双线托管　　 　定制网站设计　　 　H5建站　　 　成都画册制作　　 　名片设计　　 　新都四新网站建设　　 　华川商务　　 　广安做网站　　 　营销推广　　 　营销网站建设　　 　邛崃网站建设　　 　广汉锦华橡塑　　 　成都服务器托管　　 　香港空间腾讯云　　 　网页改版