js实现继承的5种方式

js是门灵活的语言，实现一种功能往往有多种做法,ECMAScript没有明确的继承机制，而是通过模仿实现的，根据js语言的本身的特性,js实现继承有以下通用的几种方式
1.使用对象冒充实现继承(该种实现方式可以实现多继承)
实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值

1. function Parent(firstname)
2. {
3. this.fname=firstname;
4. this.age=40;
5. this.sayAge=function()
6. {
7. console.log(this.age);
8. }
9. }
10. function Child(firstname)
11. {
12. this.parent=Parent;
13. this.parent(firstname);
14. delete this.parent;
15. this.saySomeThing=function()
16. {
17. console.log(this.fname);
18. this.sayAge();
19. }
20. }
21. var mychild=new  Child("李");
22. mychild.saySomeThing();

2.采用call方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链，则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

1. function Parent(firstname)
2. {
3. this.fname=firstname;
4. this.age=40;
5. this.sayAge=function()
6. {
7. console.log(this.age);
8. }
9. }
10. function Child(firstname)
11. {
12. this.saySomeThing=function()
13. {
14. console.log(this.fname);
15. this.sayAge();
16. }
17. this.getName=function()
18. {
19. return firstname;
20. }
21. }
22. var child=new Child("张");
23. Parent.call(child,child.getName());
24. child.saySomeThing();

3.采用Apply方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链，则采用5混合模式)
实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

1. function Parent(firstname)
2. {
3. this.fname=firstname;
4. this.age=40;
5. this.sayAge=function()
6. {
7. console.log(this.age);
8. }
9. }
10. function Child(firstname)
11. {
12. this.saySomeThing=function()
13. {
14. console.log(this.fname);
15. this.sayAge();
16. }
17. this.getName=function()
18. {
19. return firstname;
20. }
21. }
22. var child=new Child("张");
23. Parent.apply(child,[child.getName()]);
24. child.saySomeThing();

4.采用原型链的方式实现继承
实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承

1. function Parent()
2. {
3. this.sayAge=function()
4. {
5. console.log(this.age);
6. }
7. }
8. function Child(firstname)
9. {
10. this.fname=firstname;
11. this.age=40;
12. this.saySomeThing=function()
13. {
14. console.log(this.fname);
15. this.sayAge();
16. }
17. }
18. Child.prototype=new  Parent();
19. var child=new Child("张");
20. child.saySomeThing();

5.采用混合模式实现继承

1. function Parent(name)
2. {
3. this.name=name;
4. this.sayAge=function(){
5. console.log(this.age);
6. }
7. Parent.prototype.sayParent=function(){
8. alert("this is parentmethod!!!");
9. }
10. function Child(name){
11. Parent.call(this,name);  //继承构造函数中的属性或方法
12. this.age=40;
13. this.saySomeThing=function(){
14. console.log(this.name);
15. this.sayAge();  //继承构造函数中的方法
16. }
17. }
18. 想继承原型中的属性或方法，要使用原型链方式继承
19. Child.prototype=new  Parent();  //继承原型中的属性或方法 ；
20. var child=new Child("张");
21. child.saySomeThing();  //自身中的方法
22. child.sayParent(); //继承原型中的方法
23. Child.sayAge=function(){
24. console.log("重写方法")
25. }
26. Child.prototype.sayParent=function(){
27. console.log("重写原型中的方法")
28. }

29. 前言

    JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。

    JS继承的实现方式

    既然要实现继承，那么首先我们得有一个父类，代码如下：

    // 定义一个动物类
    function Animal (name) {
      // 属性
      this.name = name || 'Animal';
      // 实例方法
      this.sleep = function(){
        console.log(this.name + '正在睡觉！');
      }
    }
    // 原型方法
    Animal.prototype.eat = function(food) {
      console.log(this.name + '正在吃：' + food);
    };
    

    1、原型链继承

    核心： 将父类的实例作为子类的原型

    function Cat(){
    }
    Cat.prototype = new Animal();
    Cat.prototype.name = 'cat';//要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中
    
    //　Test Code
    var cat = new Cat();//创建子类实例时，无法向父类构造函数传参
    console.log(cat.name);
    console.log(cat.eat('fish'));
    console.log(cat.sleep());
    console.log(cat instanceof Animal); //true
    console.log(cat instanceof Cat); //true
    

    特点：

    1. 非常纯粹的继承关系，实例是子类的实例，也是父类的实例
    2. 父类新增原型方法/原型属性，子类都能访问到
    3. 简单，易于实现

    缺点：

    1. 要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中
    2. 无法实现多继承
    3. 来自原型对象的引用属性是所有实例共享的（详细请看附录代码： 示例1）
    4. 创建子类实例时，无法向父类构造函数传参

    推荐指数：★★（3、4两大致命缺陷）

    2、构造继承

    核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

    function Cat(name){
      Animal.call(this);
      this.name = name || 'Tom';
    }
    
    // Test Code
    var cat = new Cat();
    console.log(cat.name);
    console.log(cat.sleep());
    console.log(cat instanceof Animal); // false
    console.log(cat instanceof Cat); // true
    

    特点：

    1. 解决了1中，子类实例共享父类引用属性的问题
    2. 创建子类实例时，可以向父类传递参数
    3. 可以实现多继承（call多个父类对象）

    缺点：

    1. 实例并不是父类的实例，只是子类的实例
    2. 只能继承父类的实例属性和方法，不能继承原型属性/方法
    3. 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

    推荐指数：★★（缺点3）

    4、拷贝继承

    function Cat(name){
      var animal = new Animal();
      for(var p in animal){
        Cat.prototype[p] = animal[p];
      }
      Cat.prototype.name = name || 'Tom';
    }
    
    // Test Code
    var cat = new Cat();
    console.log(cat.name);
    console.log(cat.sleep());
    console.log(cat instanceof Animal); // false
    console.log(cat instanceof Cat); // true
    

    特点：

    1. 支持多继承

    缺点：

    1. 效率较低，内存占用高（因为要拷贝父类的属性）
    2. 无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）

    推荐指数：★（缺点1）

    5、组合继承

    核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

    function Cat(name){
      Animal.call(this);
      this.name = name || 'Tom'

30.   //Animal.call(this,name);


    }
    Cat.prototype = new Animal();
    
    // Test Code
    var cat = new Cat("张三");
    console.log(cat.name);
    console.log(cat.sleep());
    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); // true
    

31. 特点：

    1. 弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
    2. 既是子类的实例，也是父类的实例
    3. 不存在引用属性共享问题
    4. 可传参
    5. 函数可复用

    缺点：

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

    推荐指数：★★★★（仅仅多消耗了一点内存）

    6、寄生组合继承

    核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

    function Cat(name){
      Animal.call(this);
      this.name = name || 'Tom';
    }
    (function(){
      // 创建一个没有实例方法的类
      var Super = function(){};
      Super.prototype = Animal.prototype;
      //将实例作为子类的原型
      Cat.prototype = new Super();
    })();
    
    // Test Code
    var cat = new Cat();
    console.log(cat.name);
    console.log(cat.sleep());
    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); //true
    

    特点：

    1. 堪称完美

    缺点：

    1. 实现较为复杂

    推荐指数：★★★★（实现复杂，扣掉一颗星）