前言

我为什么想写这个东西？因为几个月前，我所在项目组解散了，即将面临裁员，然后我面试了本公司的其他项目组，直到第三个项目组才面上......而今天的这个问题恰巧是前面没有面过的一个面试官问我的，我当时懵了，确确实实之前的项目中有在大佬（东哥）的指导下写过类，但是功能实现后也没有过多的去思索类的静态方法与动态方法是个什么鬼东西，甚至都忘记怎么写怎么用了，回想起来也只记得有个class、有个static......由于接下来的项目中也没有看到其他同事有写类的，所以就“逃避”了这个问题，转身忘得干干净净。就这样过了几个月，当我在新项目中遇到似曾相识的需求时，不禁思索：大家都没有写类，我或许可以写一个类。有了这个想法后，我开始查资料、尝试写类，然后运用到项目中......一切顺理成章。该来的总会来的，只是慢了点。

一、简单了解 javascript 中的类

在 javascript 中，类是一种面向对象编程的概念，它用于描述一类具有相同属性和方法的对象。类是一种模板或蓝图，用于创建对象。ES6引入了类的概念，通过class关键字定义类：

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    speak() {
        console.log(`${this.name}今年${this.age}岁了`)
    }
}

这个 Person 类有一个构造函数和一个 speak 方法。构造函数用于初始化类的属性， speak 方法用于输出人的名字与年龄。下面我们来实例化 Person 类：

let person1 = new Person('一二', 18)
person1.speak() // '一二今年18岁了'

这里我们创建了一个名为 person1 的 Person 对象，并调用了它的 speak 方法。

当然啦，除了构造函数和方法，类还可以拥有静态方法和动态方法。

二、类的静态方法与动态方法

在 javascript 中，类可以定义静态方法和动态方法。

静态方法是类的方法，而不是实例的方法。它们可以通过类本身调用，而不是通过实例调用。静态方法通常用于实现与类本身相关的功能，而不是与实例相关的功能。动态方法通常用于实现

动态方法是实例的方法，而不是类的方法。它们只能通过实例调用，而不是通过类调用。动态方法通常用于实现与实例相关的内容。

代码示例：

class MyClass {
    // 静态属性
    static type = 'class'
    // 静态方法
    static staticFn() {
        console.log('This is a static Method.')
    }
    // 动态方法
    dynamicFn() {
        console.log('This is a dynamic Method.')
    }
}
console.log(MyClass.type) // 'class'
MyClass.staticFn() // 'This is a static Method.'
// MyClass.staticFn 报错

const MyClass1 = new MyClass()
MyClass1.dynamicFn() // 'This is a dynamic Method.'
// MyClass1.staticFn() 报错

可以看出来，静态方法staticFn()只能通过类本身调用，而动态方法dynamicFn()只能通过实例调用。

三、写一个类：下载文件的静态方法

因为最近项目中下载的地方特别多，于是就尝试封装一个简单的类！

@/utils/tools.js

// 默认导出
export default class Tools {
    static downLoadFile({ data, fileName, fileType }) {
        const a = document.createElement('a')
        a.download = fileName
        const mapBlobType = {
            zip: 'application/zip',
            sheet: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        }
        const blob = new Blob([data], { type: mapBlobType[fileType] })
        // 是否具有文件流保存和打开方法
        if (window && window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(blob, decodeURIComponent(fileName))
        }
        // 兼容不同的浏览器
        const url = window.URL || window.webkitURL || window.moxURL
        a.href = url.createObjURL(blob)
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
    }
}

然后就可以在需要使用的页面 import 导入使用啦！