JS实现继承的方式


JS实现继承的方式

// 定义一个父类
    function Father(name) {
      // 属性
      this.name = name || "father";
      // 实例方法
      this.sayName = function() {
        console.log(this.name);
      };
      this.color = ["red", "blue"];
    }
    // 原型方法
    Father.prototype.age = 18;
    Father.prototype.sayAge = function() {
      console.log(this.age);
    };

1.原型链继承:将父类的实例作为子类的原型

function Son(name) {
      this.name = name || "son";
    }

    Son.prototype = new Father();

    let s1 = new Son("s1");
    let s2 = new Son("s2");

    s1.color.push("black");

    console.log(s1.name); //s1
    console.log(s1.color); //['red','blue','black']
    console.log(s1.age); //18
    s1.sayAge(); //18
    console.log(s2.name); //s2
    console.log(s2.color); //['red','blue','black']
优点:
1. 简单,易于实现
2. 父类新增原型方法、原型属性,子类都能访问到
缺点:
1. 无法实现多继承,因为原型一次只能被一个实例更改
2. 来自原型对象的所有属性被所有实例共享(上诉例子中的color属性)
3. 创建子类实例时,无法向父构造函数传参

2.构造继承继承:复制父类的实例属性给子类

function Son(name) {
      Father.call(this, "我是传给父类的参数");
      this.name = name || "son";
    }
    let s = new Son("son");
    console.log(s.name); // son
    //s.sayAge(); // 抛出错误(无法继承父类原型方法)
    s.sayName(); // son
    console.log(s.age); // undefined (无法继承父类原型属性)
    console.log(s instanceof Father); // false
    console.log(s instanceof Son); // true
优点:
1. 解决了原型链继承中子类实例共享父类引用属性的问题
2. 创建子类实例时,可以向父类传递参数
3. 可以实现多继承(call多个父类对象)
缺点:
1. 实例并不是父类的实例,只是子类的实例
2. 只能继承父类实例的属性和方法,不能继承其原型上的属性和方法3. 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

3.组合继承:将原型链和借用构造函数的技术组合到一块。使用原型链实现对原型属性和方法的继承,而通过构造函数来实现对实例属性的继承

 function Son(name) {
     // 第一次调用父类构造器 子类实例增加父类实例
      Father.call(this, "我是传给父类的参数");
      this.name = name || "son";
    }
    // 经过new运算符 第二次调用父类构造器 子类原型也增加了父类实例
    Son.prototype = new Father();

    let s = new Son("son");
    console.log(s.name); // son
    s.sayAge(); // 18
    s.sayName(); // son
    console.log(s.age); // 18
    console.log(s instanceof Father); // true
    console.log(s instanceof Son); // true
    console.log(s.constructor === Father); // true
    console.log(s.constructor === Son); // false
优点:
1. 弥补了构造继承的缺点,现在既可以继承实例的属性和方法,也可以继承原型的属性和方法
2. 既是子类的实例,也是父类的实例
3. 可以向父类传递参数
4. 函数可以复用
缺点:
1. 调用了两次父类构造函数,生成了两份实例
2. constructor指向问题

4.实例继承:为父类实例添加新特征,作为子类实例返回

 function Son(name) {
      let f=new Father('传给父类的参数')
      f.name=name||'son'
      return f
    }

    let s = new Son("son"); //或者直接调用子类构造函数 let s = Son("son");
    console.log(s.name); // son
    s.sayAge(); // 18
    s.sayName(); // son
    console.log(s.age); // 18
    console.log(s instanceof Father); // true
    console.log(s instanceof Son); // false
    console.log(s.constructor === Father); // true
    console.log(s.constructor === Son); // false
优点:
1. 不限制调用方式,不管是new 子类()还是子类(),返回的对象具有相同的效果
缺点:
1. 实例是父类的实例,不是子类的实例2. 不支持多继承

5.拷贝继承:对父类实例中的的方法与属性拷贝给子类的原型

function Son(name) {
      let f = new Father("传给父类的参数");
      for (let k in f) {
        Son.prototype[k] = f[k];
      }
      Son.prototype.name = name;
    }

    let s = new Son("son");
    console.log(s.name); // son
    s.sayAge(); // 18
    s.sayName(); // son
    console.log(s.age); // 18
    console.log(s instanceof Father); // false
    console.log(s instanceof Son); // true
    console.log(s.constructor === Father); // false
    console.log(s.constructor === Son); // true
优点:
1. 支持多继承
缺点:
1. 效率低,性能差,占用内存高(因为需要拷贝父类属性)
2. 无法获取父类不可枚举的方法(不可枚举的方法,不能使用for-in访问到)

6.寄生组合继承:通过寄生方式,砍掉父类的实例属性,避免了组合继承生成两份实例的缺点

function Son(name) {
      Father.call(this);
      this.name = name || "son";
    }

    // 方法一  自己动手创建一个中间类
    // (function() {
    //   let NoneFun = function() {};
    //   NoneFun.prototype = Father.prototype;
    //   Son.prototype = new NoneFun();
    //   Son.prototype.constructor = Son;
    // })();

    // 方法二  直接借用Object.create()方法
    Son.prototype = Object.create(Father.prototype);
    // 修复构造函数指向
    Son.prototype.constructor = Son;

    let s = new Son("son");
    console.log(s.name); // son
    s.sayAge(); // 18
    s.sayName(); // son
    console.log(s.age); // 18
    console.log(s instanceof Father); // true
    console.log(s instanceof Son); // true
    console.log(s.constructor === Father); // false
    console.log(s.constructor === Son); // true
优点:
1. 比较完美(js实现继承首选方式)
缺点:
1.实现起来较为复杂(可通过Object.create简化)

7.es6–Class继承:使用extends表明继承自哪个父类,并且在子类构造函数中必须调用super

class Son extends Father {
      constructor(name) {
        super(name);
        this.name = name || "son";
      }
    }

    let s = new Son("son");
    console.log(s.name); // son
    s.sayAge(); // 18
    s.sayName(); // son
    console.log(s.age); // 18
    console.log(s instanceof Father); // true
    console.log(s instanceof Son); // true
    console.log(s.constructor === Father); // false
    console.log(s.constructor === Son); // true

文章作者: 曹豆芽
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 曹豆芽 !
 上一篇
HTTP协议和会话详解 HTTP协议和会话详解
HTTP协议为什么要学习http?因为前端和后台进行交互的时候,使用的就是这个协议。 HTTP协议,叫超文本传输协议(Hypertext transfer protocol)。是一个规则,规定了浏览器和万维网服务器之间通信的规则。 HTTP
2020-06-02
下一篇 
linux的CentOS7防火墙的使用 linux的CentOS7防火墙的使用
linux的CentOS7防火墙的使用整理了一些关于防火墙的命令行使用 基本命令行启动:systemctl start firewalld.service 停止:systemctl stop firewalld.service 重启: sy
2020-05-19
  目录