js之继承 ==== js设计模式

痛定思痛。 2022-12-27 02:26 110阅读 0赞

# js之继承 #

## 前言 ##

###### 继承在js中占有非常重要的地位，那么在js中有很多中继承的方式，不过每一种继承方式都有优缺点。下面就列举几种继承的方式。 ######

###### 实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已 ######

function People(name){ 
      //属性
      this.name  = name || 'Annie'
      //实例方法
      this.sleep=function(){ 
        console.log(this.name + '正在睡觉')
      }
    }
    //原型方法
    People.prototype.eat = function(food){ 
      console.log(this.name + '正在吃：' + food);
    }

### 1.原型链继承 ###

> 父类的实例作为子类的原型

function Woman(){  
    }
    Woman.prototype= new People();
    Woman.prototype.name = 'haixia';
    let womanObj = new Woman();

#### 优点： ####

*  ###### 简单易于实现，父类的新增的实例与属性子类都能访问 ######

#### 缺点： ####

*  ###### 可以在子类中增加实例属性，如果要新增加原型属性和方法需要在new 父类构造函数的后面 ######
 *  ###### 无法实现多继承 ######
 *  ###### 创建子类实例时，不能向父类构造函数中传参数 ######

### 2.借用构造函数继承（伪造对象、经典继承） ###

> 复制父类的实例属性给子类

function Woman(name){ 
     //继承了People
      People.call(this); //People.call(this，'tom); 
      this.name = name || 'kitty'
    }
    let womanObj = new Woman();

#### 优点： ####

*  ###### 解决了子类构造函数向父类构造函数中传递参数 ######
 *  ###### 可以实现多继承（call或者apply多个父类） ######

#### 缺点： ####

*  ###### 方法都在构造函数中定义，无法复用 ######
 *  ###### 不能继承原型属性/方法，只能继承父类的实例属性和方法 ######

### 3.实例继承（原型式继承） ###

function Wonman(name){ 
      let instance = new People();
      instance.name = name || 'wangxiaoxia';
      return instance;
    }
    let wonmanObj = new Wonman();

#### 优点： ####

*  ###### 不限制调用方式 ######
 *  ###### 简单，易实现 ######

#### 缺点： ####

*  ###### 不能多次继承 ######

### 4.组合式继承 ###

> 调用父类构造函数，继承父类的属性，通过将父类实例作为子类原型，实现函数复用

#### 缺点： ####

*  ###### 由于调用了两次父类，所以产生了两份实例 ######

#### 优点： ####

*  ###### 函数可以复用 ######
 *  ###### 不存在引用属性问题 ######
 *  ###### 可以继承属性和方法，并且可以继承原型的属性和方法 ######

### 5.寄生组合继承 ###

> 通过寄生的方式来修复组合式继承的不足，完美的实现继承

//父类
    function People(name,age){ 
      this.name = name || 'wangxiao'
      this.age = age || 27
    }
    //父类方法
    People.prototype.eat = function(){ 
      return this.name + this.age + 'eat sleep'
    }
    //子类
    function Woman(name,age){ 
      //继承父类属性
      People.call(this,name,age)
    }
    //继承父类方法
    (function(){ 
      // 创建空类
      let Super = function(){ };
      Super.prototype = People.prototype;
      //父类的实例作为子类的原型
      Woman.prototype = new Super();
    })();
    //修复构造函数指向问题
    Woman.prototype.constructor = Woman;
    let womanObj = new Woman();

## 6.es6继承 ##

> 代码量少，易懂

//class 相当于es5中构造函数
    //class中定义方法时，前后不能加function，全部定义在class的protopyte属性中
    //class中定义的所有方法是不可枚举的
    //class中只能定义方法，不能定义对象，变量等
    //class和方法内默认都是严格模式
    //es5中constructor为隐式属性
    class People{ 
      constructor(name='wang',age='27'){ 
        this.name = name;
        this.age = age;
      }
      eat(){ 
        console.log(`${ this.name} ${ this.age} eat food`)
      }
    }
    //继承父类
    class Woman extends People{  
       constructor(name = 'ren',age = '27'){  
         //继承父类属性
         super(name, age); 
       } 
        eat(){  
         //继承父类方法
          super.eat() 
        } 
    } 
    let wonmanObj=new Woman('xiaoxiami'); 
    wonmanObj.eat();

###### ES5继承和ES6继承的区别： ######

###### es5继承首先是在子类中创建自己的this指向，最后将方法添加到this中 ######

###### `Child.prototype=new Parent() || Parent.apply(this) || Parent.call(this)` ######

###### es6继承是使用关键字先创建父类的实例对象this，最后在子类class中修改this ######

###### 结束语： ######

###### es6中很多代码的语法糖，很多方法简单易用。在浏览器兼容的情况下，改变原有方式。 ######

###### 虽然现在很多框架都是es6，但对于初学者还是建议多看看es5中实现的原理。 ######

===================================================================

# js设计模式 #

## 一、单例模式 ##

#### 1. 定义 ####

###### 保证一个类仅有一个实例，并提供一个访问它的全局访问点 ######

#### 2. 核心 ####

###### 确保只有一个实例，并提供全局访问 ######

#### 3. 实现 ####

###### 在vue脚手架项目开发中，我们需要对`axios`进行请求拦截，响应拦截，多次调用封装号的axios实例也仅设置一次，封装后的`axios`就是要一个单例。 ######

#### 以下是vue-cli4中axios单例模式的案例： ####

> 一般我会在项目的src目录中，新建一个network文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

// 在http.js中引入axios
    import axios from 'axios'; // 引入axios
    import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
    // vant的toast提示框组件，大家可根据自己的ui组件更改。
    import {  Toast } from 'vant';

#### 环境的切换 ####

###### 我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了。 ######

// 环境的切换
    if (process.env.NODE_ENV == 'development') {     
        axios.defaults.baseURL = 'https://www.baidu.com';} 
    else if (process.env.NODE_ENV == 'debug') {     
        axios.defaults.baseURL = 'https://www.ceshi.com';
    } 
    else if (process.env.NODE_ENV == 'production') {     
        axios.defaults.baseURL = 'https://www.production.com';
    }

#### 设置请求超时 ####

###### 通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。 ######

axios.defaults.timeout = 10000;

#### post请求头的设置 ####

###### post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为`application/x-www-form-urlencoded;charset=UTF-8` ######

axios.defaults.headers.post['Content-Type'] =
            'application/x-www-form-urlencoded;charset=UTF-8';

## 请求拦截 ##

###### 我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢，我们拦截请求是用来做什么的呢？比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。 ######

#### 请求拦截 ####

// 先导入vuex,因为我们要使用到里面的状态对象
    // vuex的路径根据自己的路径去写
    import store from '@/store/index';
     
    // 请求拦截器axios.interceptors.request.use( 
        config => {         
            // 每次发送请求之前判断vuex中是否存在token 
            // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
            // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
            const token = store.state.token;        
            token && (config.headers.Authorization = token);        
            return config;    
        },    
        error => {         
            return Promise.error(error);    
    })

## 响应的拦截 ##

// 响应拦截器
    axios.interceptors.response.use(    
        response => {    
            // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 
            // 否则的话抛出错误
            if (response.status === 200) {             
                return Promise.resolve(response);        
            } else {             
                return Promise.reject(response);        
            }    
        },    
        // 服务器状态码不是2开头的的情况
        // 这里可以跟你们的后台开发人员协商好统一的错误状态码 
        // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
        // 下面列举几个常见的操作，其他需求可自行扩展
        error => {             
            if (error.response.status) {             
                switch (error.response.status) {                 
                    // 401: 未登录
                    // 未登录则跳转登录页面，并携带当前页面的路径
                    // 在登录成功后返回当前页面，这一步需要在登录页操作。 
                    case 401:                    
                        router.replace({                         
                            path: '/login',                        
                            query: {  
                                redirect: router.currentRoute.fullPath 
                            }
                        });
                        break;
     
                    // 403 token过期
                    // 登录过期对用户进行提示
                    // 清除本地token和清空vuex中token对象
                    // 跳转登录页面 
                    case 403:
                         Toast({ 
                            message: '登录过期，请重新登录',
                            duration: 1000,
                            forbidClick: true
                        });
                        // 清除token
                        localStorage.removeItem('token');
                        store.commit('loginSuccess', null);
                  // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                        setTimeout(() => {                         
                            router.replace({                             
                                path: '/login',                            
                                query: {  
                                    redirect: router.currentRoute.fullPath 
                                }                        
                            });                    
                        }, 1000);                    
                        break; 
     
                    // 404请求不存在
                    case 404:
                        Toast({ 
                            message: '网络请求不存在',
                            duration: 1500,
                            forbidClick: true
                        });
                        break;
                    // 其他错误，直接抛出错误提示
                    default:
                        Toast({ 
                            message: error.response.data.message,
                            duration: 1500,
                            forbidClick: true
                        });
                }
                return Promise.reject(error.response);
            }
        }    
    });

###### 至此，axios的单例封装基本就完成了，再往下就是api的统一管理，就不详细说明了。 ######

#### 4.应用场景 ####

###### 封装vuex与axios，任何vue项目可以直接复用，实现axios统一调用，单通道修改vuex ######

## 二、工厂模式 ##

###### 工厂模式是我们最常用的实例化对象模式了，是用工厂方法代替new操作的一种模式。 ######

###### 因为工厂模式就相当于创建实例对象的new，我们经常要根据类Class生成实例对象，如A a=new A() 工厂模式也是用来创建实例对象的，所以以后new时就要多个心眼，是否可以考虑使用工厂模式，虽然这样做，可能多做一些工作，但会给你系统带来更大的可扩展性和尽量少的修改量。 ######

## 三、观察者、订阅者模式 ##

###### vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 ######

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dMSVVMSUFOQk8_size_16_color_FFFFFF_t_70]: /images/20221120/b70b2705322d4743bc027dee9eb0d5c7.png