本文介绍结构赋值、运算符的扩展、装饰器新旧版本的基本用法。




# 变量的解构赋值
## 数组的解构赋值
- 模式匹配
- 只要对象具有`Iterator`接口就可以结构 类遍历器对象也可以
- 可以设置默认值 
    - 如果默认值是表达式 与函数参数特性一样， 惰性求值
    - 只有`undefined`才触发默认值

## 对象的解构赋值
- 先找同名属性，然后再赋值给对应的变量
- 对象的解构赋值可以取到继承的属性
- 支持设置默认值、支持别名

注意点：
- 如果要将一个已经声明的变量用于解构赋值，必须非常小心
- 允许等号左边的模式之中无变量
- 数组是特殊的对象

注： 函数参数也是对象， 因此可以使用对象的方式进行解构

## 基本数据类型的解构赋值
`boolean` `string` `number` `BigInt` `Symbol`只要有包装对象（排除了 `null` `undefined`）就可以进行解构，获取原型链上的方法或属性。

## 圆括号问题
1. 不使用圆括号的场景
    2. 变量声明语句
    3. 函数参数
    4. 赋值语句的模式
3. 可以使用圆括号的场景
    - 赋值语句的非模式部分

## 用途
1. 交换变量的值
2. 从函数返回多个值
3. 函数参数的定义
4. 提取 JSON 数据
5. 函数参数的默认值
6. 遍历 Map 结构
7. 输入模块的指定方法

# 运算符的扩展

## 指数运算符
- `**`
- `**=`

## ?. 链判断运算符
- `?.`
- `?.[]`
- `?.()`

注意事项
1. 它是短路机制
2. 一般来说，使用`?.`运算符的场合，不应该使用圆括号。
3. 报错场合
4. 右侧不得为十进制数值

## Null 判断运算符
- `??` 他的行为类似 `||` 但只有`null`或`undefined`，才会返回右侧的值
- 配合`?.`使用
- 与其他逻辑运算在一起 必须表明优先级

## 逻辑赋值运算符
- `||=`
- `&&=`
- `??=`

## !命令
```bash
#!/usr/bin/env node
```

## 扩展运算符
用途
- 解构赋值
- 函数rest参数
- 遍历 可遍历对象（或类遍历器对象）
- copy对象属性 
    - 会自动执行取值函数

# 装饰器
> 其实装饰器从ES6诞生开始就有，一直到现在才进入第三阶段（候选），不过也就差最后一步了，由于很多项目都用到装饰器，这一块不得不认真学。
## 旧版本语法
### 环境准备
1. package.json
```json
{
  // ...
  "dependencies": {
    "@babel/cli": "^7.22.10",
    "@babel/core": "^7.22.10",
    "@babel/plugin-proposal-decorators": "^7.22.10",
    "@babel/preset-env": "^7.22.10",
    "core-js": "3"
  },
  "browserslist": [
    "chrome >= 100"
  ]
}
```
2. babel.config.js
```js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: {
          version: 3,
          proposals: true, // 默认值是false, 对stage阶段的全局对象上的方法打补丁
        },
      },
    ],
  ],
  plugins: [
    [
      "@babel/plugin-proposal-decorators",
      {
        legacy: true,
      },
    ],
  ],
};
```
3. build.sh
```sh
#!/bin/bash
run() {
  local name=$1
  eval "npx babel $1 --out-file dist/$1"
  eval "node dist/$1"
}
run  $1
```
执行命令 `sh build.sh 1.js`

### 基本使用
```js
@decorator
class A {}

// 等价于
A = decorator(A) || A

class MyReactComponent extends React.Component {}
connect(mapStateToProps, mapDispatchToMap)(MyReactComponent);

// 使用装饰器优化React-Reduce代码
@connect(mapStateToProps, mapDispatchToMap);
```
- 类装饰器就一个参数 `target` 值为被修饰的类
- 方法（原型方法）装饰器有三个参数
    - 参数1是类的原型对象
    - 参数2是所要装饰的属性名
    - 参数3是该属性的描述对象 `descriptor`
- 没有属性(实例属性)装饰器 因为装饰器是在编译时执行的
- 静态（方法or属性）装饰器
    - 参数1是类
    - 参数2与3同方法装饰器

注意： 装饰器不能修饰函数， 因为函数声明语句存在提升。应采用高阶函数方式替代

### 装饰器的执行顺序
1. 先执行方法装饰器（后定义的先执行性），再执行类装饰器
2. 从下到上执行
```js
@decorator1
@decorator2
class A {
  @decoratorMethod1
  @decoratorMethod2
  say(text) {
    console.log('A.prototype.say()', text);
  }
}
```
1. `decoratorMethod2`
2. `decoratorMethod1`
3. `decorator2`
4. `decorator1`


装饰器对类的行为的改变，是**代码编译时发生的**，而不是在运行时。
这意味着什么呢？
- 调用方法装饰不管是静态方法还是原型方法，this指向undefined
- 存值器、取值器、access装饰器 也是如此


## 新版本语法
### API

![image.png](https://blog.warmplace.cn:11443/static/img/1770ae16277d49a09788b719df0a39cd.image.webp)

`kind`的值是啥含义
| `kind`枚举值 | 含义 | 对value的影响 |
| --- | --- |--- |
| `class` | 类装饰器 | 对应的类 |  |
| `method` | 方法装饰器<br>包括原型方法和静态方法 | 对应的方法` |
| `field` | 属性装饰器 | `value`为 `undefined` |
| `getter` | 取值器装饰器 | `value`为 取值器 |
| `setter` | 存值器装饰器 | `value`为 存值器 |
| `accesser` | 它是存取器的简写 | `value`为 一个对象，内含取值器和存值器 |


- 类装饰器API
```js
type ClassDecorator = (value: Function, context: {
  kind: "class";
  name: string | undefined; // 如果被装饰的类是一个匿名类时其值为undefined
  addInitializer(initializer: () => void): void;
}) => Function | void;
```
- 方法装饰器API
```ts
type ClassMethodDecorator = (value: Function, context: {
  kind: "method";
  name: string | symbol;
  access: { get(): unknown };
  static: boolean;
  private: boolean;
  addInitializer(initializer: () => void): void;
}) => Function | void;
```
- 存取器装饰器 accessor装饰器 与方法装饰器API类似
- 属性装饰器  与方法装饰器项目没有初始化逻辑`addInitializer()`


### 环境准备
1. `package.json`
```json
{
  "dependencies": {
    "@babel/cli": "^7.22.10",
    "@babel/core": "^7.22.10",
    "@babel/plugin-proposal-decorators": "^7.22.10",
    "@babel/preset-env": "^7.22.10"
  },
  "browserslist": [
    "chrome >= 100"
  ]
}
```
2. babel.config.js
与前面 babel的配置基本相同，只要改一下`@babel/plugin-proposal-decorators`的配置即可。

![image.png](https://blog.warmplace.cn:11443/static/img/db6c392d769d894a22c278d09c8ac68b.image.webp)

3. build.sh同上， 执行命令 `sh build.sh 1.js`

### 基本使用
示例
```js
function logged(value, { kind, name }) {
  if (kind === "class") {
    return class extends value {
      constructor(...args) {
        super(...args);
        console.log(`constructing an instance of ${name} with arguments ${args.join(", ")}`);
      }
    }
  }
}

@logged
class C {}
new C(1);
// constructing an instance of C with arguments 1
```

类装饰器实际上执行的是下面的语法。
```js
class C {}
C = logged(C) ?? C

function trace(value, context) {
  return function(...args) {
    console.log('trace hello ', this.name);
    value.call(this, ...args);
  }
}

class Person {
  constructor(name) {
    this.name = name;
  }
  @trace
  hello() {
    console.log(`Hi ${this.name}!`)
  }
}

const robin = new Person('Robin');
console.log(robin.hello()); 
// trace hello  Robin
// Hi Robin!
```

方法装饰器
- 必须返回一个函数 或`undefined`, 否则报错
- 如果返回函数取代原方法，如果返回`undefined`则使用原方法

### addInitializer()

示例1  webComponents
```js
function customElement(name) {
    return function(value, context) {
      context.addInitializer(() => {
        customElements.define(name, this);
      })
    }
}

@customElement('my-element');
class MyElement extends HTMLElement { }
```

示例2: bound
```js
class C {
  message = 'hello';
  @bound
  m() {
    console.log(this.message)
  }
}
function bound(value, {addInitializer, name}) {
  addInitializer(function() {
    this[name] =  this[name].bind(this)
  })
}
var c = new C();
const {m} = c;
console.log(m());
```
## core-decorators.js
目前`core-decorators.js`采用的是老的装饰器语法实现的
- `@autobind`
- `@readonly`
- `@override`
- `@deprecate`


# 其他
以下内容挪到了其他文章中讲解
- 属性简写
- 箭头函数 [《Web前端JS知识梳理》](https://blog.warmplace.cn:11443/post/32)
- `class语法` `class继承` [《JavaScript面向对象》](https://blog.warmplace.cn:11443/post/34)
- `async函数`  `Generator` `for await..of` [《JavaScript异步编程》](https://blog.warmplace.cn:11443/post/35)
- `import` `export` [《JavaScript模块化》](https://blog.warmplace.cn:11443/post/33)

ES6新增句法

本篇文章将讲述 `npm`包的发展进化史，`npm`与`yarn`及`pnpm`的区别，详解`package.json`内容, `npm`命令, npm实用技巧等内容。



# 语义化版本
npm使用的SemVer版本规范
- 主版本号：不兼容的 API 修改
- 次版本号：向下兼容的功能性新增
- 修订号：向下兼容的问题修正

## 版本范围
在使用第三方依赖时，我们通常会在package.json中指定依赖的版本范围，语义化版本范围规定：
- `~`：只升级修订号
- `^`：升级次版本号和修订号
- `*`：升级到最新版本

## 先行版本号
- 例如`1.0.0-alpha.1`，`1.0.0-beta.4`，`2.0.0-rc.1`等。常用的先行版本一般为`alpha`，`beta`，`rc`，`stable`，`csp`等。
- `Alpha`: 是内部测试版,一般不向外部发布,会有很多Bug.
- `Beta`: 该版本相对于α版已有了很大的改进，消除了严重的错误，但还是存在着一缺陷，需要经过多次测试来进一步消除。这个阶段的版本会一直加入新的功能。
- `RC`：(Release Candidate) Candidate是候选人的意思，用在软件上就是候选版本。
- `GA`：首次发行稳定的版本，也就是官方开始推荐广泛使用了
- `Release`: 该版本意味“最终版本”


# npm包发展

关于前端包管理器推荐阅读 [《前端包管理器探究》](https://mp.weixin.qq.com/s/HZ2GKmuSv2zPrqxgk2z5BQ)。这篇文章写的很好比较幽默也很全面，这里我做一些个人总结。

##  1. npm v1/v2 依赖嵌套
这种方式非常简单，但最大的问题是**依赖地狱**

## 2. npm v3 扁平化
- 将子依赖项安装到主项目所在的目录中（hoising提升）
- npm的依赖查找算法也要适配--**递归向上查找**(有开发过`Monorepo`项目的同学会深有体会), 在遇到版本冲突时才会在模块下的 node_modules 目录下存放该模块子依赖，

虽然解决了依赖地狱问题，但也引入了新的问题
-  **幽灵依赖**  未在`package.json`中定义, 但可以引用。 **幽灵依赖的问题是 依赖不兼容 和 依赖缺失**
- **多重依赖**   **破坏单例模式**  **types冲突**
- **不确定性问题** 部署时发现与本地node_modules不一致

## 3. npm v5 扁平化+lock
> 在npm v5中新增了`package-lock.json`。当项目有`package.json`文件并首次执行`npm install`安装后，会自动生成一个`package-lock.json`文件，该文件里面记录了`package.json`依赖的模块，以及模块的子依赖。并且给每个依赖标明了版本、获取地址和验证模块完整性哈希值。通过`package-lock.json`，保障了依赖包安装的确定性与兼容性，使得每次安装都会出现相同的结果。

**解决了依赖缺失和不确定性问题**

## 4. yarn
`Yarn` 是在2016年开源的，`yarn` 的出现是为了**解决 `npm v3` 中的存在的一些问题**，那时 `npm v5` 还没发布。`Yarn` 被定义为快速、安全、可靠的依赖管理。

与npm一样，yarn也适用本地缓存，区别是yarn还提供了离线模式

**Yarn v1 lockfile**
`yarn.lock` 与 `package-lock.json` 的大体思路一致，具体区别如下
- 文件格式 `yarn`使用自定义格式 `npm`使用`json`格式
- `package-lock.json` 文件里记录的依赖的版本都是确定的， 不会出现范围符号。 而 `yarn.lock` 文件里仍然会出现语义化版本范围符号
- `package-lock.json` 文件内容更丰富，实现了更密集的锁文件，**包括子依赖的提升信息**
    - `npm v5` 只需要 `package.lock` 文件就可以确定 `node_modules` 目录结构
    - `yarn.lock` 无法确定顶层依赖，需要 `package.json` 和 `yarn.lock` 两个文件才能确定 `node_modules` 目录结构。`node_modules` 目录中 `package` 的位置是在 `yarn` 的内部计算出来的，在使用不同版本的 `yarn` 时可能会引起不确定性。


**Yarn v2 NPN模式**
- Node依赖node_modules查找依赖，有两个问题
    - 1 安装慢， 包含一些系列重IO操作（下载、解压、复制）
    - 2 依赖查找耗时， 递归向上查找
- 所以Yarn反其道而行，
    - 通过全局缓存解决安装慢的问题，
    - 通过映射表确定依赖位置

pnp模式优缺点也非常明显：
- 优：摆脱node_modules，安装、模块速度加载快；所有 npm 模块都会存放在全局的缓存目录下，避免多重依赖；严格模式下子依赖不会提升，也避免了幽灵依赖
- 缺：自建resolver 处理Node require方法，执行Node文件需要通过yarn node解释器执行，脱离Node现存生态，兼容性不太好

## 5. pnpm
> `pnpm1.0`诞生于2017年，它说它也是为了解决`npm`和`yarn`存在的问题😂 ，并声称具有安装速度快、节约磁盘空间、安全性好等优点

因为依赖结构本质上是有向无环图（DAG），但是npm和yarn通过文件目录和node resolve算法模拟的是有向无环图的一个超级（多了许多错误的祖先节点和兄弟节点之间的连接。pnpm也是通过硬链接和软链接结合的方式，更加精准的模拟DAG来解决yarn和npm的问题。

**硬链接与软链接**
- 硬链接  有A、B两个文件，假设B是A的硬链接，它们都指向同一个文件允许同一个文件有多个路径，无论是往A还是B文件中写内容，两者都会同步变化， 一些重要的文件通过该机制防止误删
- 软链接 也叫符号链接 类似windows下面的快捷方式，删除原文件，快捷链接也访问不了了
- `ls source_file link_name` 创建硬链接
- `ln -s source_file link_name` 创建软连接

来看一下官方的一张图

![image.png](https://blog.warmplace.cn:11443/static/img/6ec449c3b9f2d0b12cb1710b17912b20.image.webp)
- 依赖与依赖之间是软链接关系
- 依赖与全局缓存是硬链接关系

这里就很好的解决了幽灵依赖问题

局限性
1. 需要使用自身的锁文件 `pnpm-lock.yaml`
2. 符号链接兼容性 。存在符号链接不能适用的一些场景，比如 Electron 应用、部署在 lambda 上的应用无法使用 pnpm。
3. 不同应用的依赖是硬链接到同一份文件，如果在调试时修改了文件，有可能会无意中影响到其他项目。
4. 子依赖提升到同级的目录结构，虽然由于 Node.js 的父目录上溯寻址逻辑，可以实现兼容。但对于类似 Egg、Webpack 的插件加载逻辑，在用到相对路径的地方，需要去适配。

## cnpm
- `cnpm`是由阿里维护并开源的npm国内镜像源，支持官方npm registry 的镜像同步。
- `tnpm`是在`cnpm`基础之上，专为阿里巴巴经济体的同学服务，提供了私有的 `npm` 仓库，并沉淀了很多 `Node.js` 工程实践方案。


![image.png](https://blog.warmplace.cn:11443/static/img/79d843e427b84997cbac05bf100f4bfa.image.webp)

- cnpm/tnpm的依赖管理是**借鉴了pnpm ，通过符号链接方式创建非扁平化的node_modules结构**，最大限度提高了安装速度。安装的依赖包都是在 node_modules 文件夹以包名命名，然后再做符号链接到 版本号 @包名的目录下。与pnpm不同的是，**cnpm没有使用硬链接，也未把子依赖符号链接到单独目录进行隔离**。

## 命令行
|  | npm | yarn | pnpm |
| --- | --- | --- | --- |
| 安装所有依赖 | `npm install` | `yarn` | `pnpm install` |
| 安装依赖 | `npm install <pkg>` | `yarn add <pkg>` | `pnpm install <pkg>`<br> `pnpm add <pkg>`|
| 移除依赖 | `npm uninstall <pkg>` | `yarn remove <pkg>` | `pnpm uninstall <pkg>`<br> `pnpm remove <pkg>` |
| 更新依赖 | `npm update <pkg>` | `yarn update <pkg>` | `pnpm update <pkg>` |
| 运行脚本 | `npm run <script>` | `yarn run <script>` | `pnpm  run <script>` |

注： `pnpm` 没有全局依赖的概念（它已经做了全局缓存了）

执行`npm install`安装常用的有两个参数
   - --save   简写  -S   写入dependencies项目运行所依赖的包
   - --save-dev  简写  -D   写入devDependencies开发过程中依赖的包
   - 没有参数 = -S
- 记录该包基本信息(包名版本号其他描述信息)及所依赖的包的信息（最低版本号）
- 依赖包版本号 

|  |  |
| --- | --- |
| `npm i vue` | `"vue": "^3.3.4"` |
| `npm i vue@latest` | `"vue": "^3.3.4"` |
| `npm i vue@2` | `"vue": "^2.7.14"` |
| `npm i vue@2.1` | `"vue": "^2.1.10"` |
| `npm i vue@2.1.2` | `"vue": "^2.1.2"` |

除了 `^`、`*`、`~` 符号，
还支持 `>` `>=` `<` `<=` `1.2.x`


# nrm
npm的镜像源管理工具 
- `npm install -g nrm`
- `nrm ls`  # 查看可选的源
- `nrm use [源名称]`  # 切换源
- `nrm add registry [你公司的npm私服地址]`  # 增加源
- `nrm del [源名称]`   #删除对应的源
- `nrm test [源名称]`  #测试相应源的响应时间

# nvm
npm的版本管理

安装 以mac为例   

- [安装 nvm 的脚本](https://github.com/nvm-sh/nvm#install--update-script)       可以不用卸载系统node   (注意要翻墙)
- `vi .bash_profile`  (在`Users/youname`目录下) 增加插入这端的内容

```bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
```

- `nvm list` #查看node版本列表
- `nvm install [版本号]` #安装某个nodejs版本
- `nvm use [版本号]   && npm alias default [版本号]` # 切换到某个版本
- 切回 到系统node  `nvm use system && nvm alias default system`

# npm私服&发包
开源私服 [verdaccio](https://github.com/verdaccio/verdaccio)

## 本地调试开发中的npm包
本地开发模块调试  假设你在开发B项目，有个组件你想封装成npm包C
- 在npm包C执行 `npm link` 
- 在B项目根目录下执行 `npm link C` 软链接
- 开发完成在B项目中移除软链接 ` npm unlink B`
- `npm run env` # 查看环境变量

## 发包

- 进入npm包目录，执行 `npm publish` 命令 (可能需要`npm login`)
- package.json
    - `files` 字段决定上传哪些内容
    - `bin` 创建全局命令通常在开发脚手架需要用到这个

# package.json详解
## 导出

- `type`  指定`.js`文件是CJS还是ESM规范，
   - 值有两种`commonjs`、`module` 前者是默认值
   - `.mjs`是 ESM规范，`.cjs`是CJS规范，优先于`type`字段
- `main` 指定包入口文件
- `exports`
   - 优先于`main`字段
   - 有多种用法
      - 子目录别名，main的别名，条件加载
- `module` 字段  指定ESM模块的入口，如果你想开发一个包即支持EMS又支持CommonJS，就需要配置 `module` 和`main` 两个字段

## 辅助信息字段
`description` `respository` `autor` `license` `keywords` `homepage` `bugs` `contributors`

## 开发相关字段
- `devDependencies`      开发依赖 `npm i XXX -D`     
- `dependencies`	 运行依赖 `npm i XXX -S`  `npm i XXX`
- `peerDependencies`	如果你安装我，那么你最好也安装X,Y和Z.	[参考](https://www.cnblogs.com/wonyun/p/9692476.html)
- `optionalDependencies` 可选的包
- `bundledDependencies`  你的包依赖一些第三方包，你担心某个或某几个三方包发生变更导致你的包也不能用了，那么就配置这个字段包，将这些第三方包和你的包绑定起来。
- `overrides`
   - 假如你的项目依赖`package A`，`package A`依赖`B@0.1.0`版本，你知道依赖B存在问题，应该使用使用`B@0.1.1` 版本，则配置`overrides:{"A":{"B":"0.1.1"}}`
   - 再或者package C依赖 `B@0.1.1` 你期望任何地方都使用`B@0.1.1`, 则配置`overrides:{"B":"0.1.1"}`
   - 在`yarn`中 使用 `resolutions`字段 具体用法[点这里](https://yarn.bootcss.com/docs/selective-version-resolutions/) 
   - 先有的`resolutions`，再有的 `overrides` (npm8)
- `engines` 配置项目启动所需的node版本npm版本条件
- `script` 构建脚本  `npm run XXX` 执行脚本
   - `precommit` 通常配合`lint-staged`使用，`git commit`前进行检查
   - `prepush`   `git push`前进行检查，如执行单元测试
- `lint-staged` 字段   
- `version` 包版本号  `alpha` `beta`  `rc` `state`
- `name`  包名称
- `config` 通过 `process.env.XXX`读取	

## 功能字段

- `bin`	非常重要，通常做一些脚手架包会用到如 `vue-cli` `egg-cli`，会在脚本头部插入`#!/usr/bin/env node`表示执行node脚本，作为前端有很多人只会一些shell命令，对shell编程不太熟，可以用node进行编程操纵shell脚本`require('child_process').exec`
- `man`	说明帮助， 值为字符串 或字符串数组
- `private` 不希望上传到npm上，用它
- `publishConfig` 发布相关的配置，非常重要，比如`publishConfig.registry`字段就非常有用，能让你避免把包发不到其他私服（如cnpm私服，无需登录就能发包，比较恶心，不知道是不是故意这样设计的，利用别人的失误，窃取别人公司的代码）

## 非官方字段

- `typing/types` 		TS解析文件入口，为用户提供更好的IDE支持
- `lint-staged`			通常配置eslint校验
- `module`				
- `sideEffects`			声明该模块是否含有副作用，为webpack TreeShake提供更大的压缩空间
- `babel`
- `eslint`
- `style`、`less`
- `flat`  `yarn install --flat` 将所有依赖项安装在项目的顶层 node_modules 目录下，而不是嵌套在子目录中。
- `bowerserslist` 目标环境（浏览器及node环境） [参考](https://juejin.cn/post/6844903669524086797)
- `browser` 指定浏览器环境的入口，以便在打包时可以根据目标环境选择不同的文件。

参考资料 
- [package.json非官方字段](https://segmentfault.com/a/1190000016365409)
- [package.json官方文档](https://docs.npmjs.com/cli/v8/configuring-npm/package-json)
- [package.json详解](https://mp.weixin.qq.com/s/SKjEgoHvWXSKgpsRqcza4w)


## package-lock.json
`package-lock.json`就是锁定安装时的包的版本号，以保证其他人在`npm install`时大家的依赖能保持一致。需要将该文件提交至git [官方是这样说的package-lock.json](https://github.com/npm/npm/blob/v5.0.0/doc/files/package-lock.json.md#version-1)。（一开始我网上查到一般不需要将改文件提交，但有些例外情况比如使用了第三方包即将废弃的api。后来朋友提醒应该文件需要提交）

# npm实用技巧

## 模块管理
- `npm list/ls`
- `npm la/ll` // 相当于`npm ls --long`
- `npm list/ls --depth=0` // 只列出父包依赖的模块
- `npm list/ls <packageName>`
- `npm view/info <packageName>`
- `npm outdated`
- `npm prune`  # 整理项目中无关的模块


## 查看模块文档 
- `npm [home | resp | bugs | docs] <packageName>` 
- `npm run dev --prefix /path/to/your/folder`  #在不同的目录下运行脚本
- `npm audit [--json] `  # 安全漏洞检查，加上--json，以 JSON 格式生成漏洞报告
- `npm audit fix` #自动修复安全漏洞

## 依赖锁定
- `npm config set save-prefix="~"`
- `npm`默认安装模块时，会通过脱字符`^`来限定所安装模块的主版本号。
- 可以配置`npm`通过波浪符`~`来限定安装模块版本号：
- 当然还可以配置`npm`仅安装精确版本号的模块：`npm config set save-exact true`
- 项目版本号管理： 尽量使用 [npm version](https://docs.npmjs.com/cli/version) 指令来自动更新`version`

- `npm version xxx -m "upgrade to %s for reasons"  # %s` 会自动替换为新版本号

## npx 是什么?
运行的时候，会到`node_modules/.bin`路径和环境变量`$PATH`里面，检查命令是否存在。<br>
由于 npx 会检查环境变量`$PATH`，所以系统命令也可以调用。
`./node_modules/.bin/babel src --out-dir lib` 
等价于 `npx babel src --out-dir lib`

`npx`可以调用 `./node_modules/.bin/`下面的命令及系统命令

[你所需要的npm知识储备都在这了](https://juejin.im/post/5d08d3d3f265da1b7e103a4d#heading-0)

## npm安装或启动失败问题
由于众所周知的问题，国内安装npm包可能失败，这里简单写一点笔记。

- 首先最好自己有梯子
- 努力看报错信息、
- `node-sass`是个坑，如遇到这方面的报错，请切换node版本或切换`node-sass`版本 它与npm版本有个对应关系
- 尝试使用`cnpm`、`yarn` or `pnpm`试试
- 尝试切换源、切换node版本、切换某个包或某块功能的包的版本试试

## 如果依赖包的依赖存在问题怎么办？
- 参考pkg.resolutions字段 或者 pkg.overrides字段
- 另一个方案是 使用`patch-package`这个包给`node_modules`下面的文件打补丁 具体用法[点这里](https://juejin.cn/post/6962554654643191815)

## npm命令行传参数
```bash
# server.js
# console.log(process.args)
node server --port=3100
# 输出 
#[
#  '/Users/XXX/node',
#  '/Users/XXX/node/server',
#  '--port=3100'
#]

# 或者配置pkg.script字段 `"server": "node server"`
npm run server -- --port=3100
# 可以得到同样的结果
```
参考资料： [npm script中命令行传参数](https://wayou.github.io/2020/08/20/npm-script-%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%8F%82%E6%95%B0/)

前端包管理器详解

JavaScript异步编程

本文将系统梳理JavaScript OOP编程，包含原型链、es5继承的社区方案、es6 Class语法、class 继承等内容。


<img width='100%' src="https://blog.warmplace.cn:11443/static/img/977894ae31c095dc8160a554091b49cc.image.webp">

详细思维导图链接[点这里](https://static.warmplace.cn:11443/blog-resources/jsmind/index.html?id=oop)




# OOP编程

## 何为面向对象？
定义： 
- **分析、设计、实现软件的一种编程思想**
- **基于对象的概念建立模型，模拟客观世界**
- 完整定义： 系统中一切事物皆对象。基于对象的概念建立模型，模拟客观世界，分析、设计、实现软件的编程思想。通过面向对象的理念使得计算机软件能与现实中的系统一一对应。
- **面向对象(OOP)是一种常见的编程范式，常见的编程范式有POP、OOP、FP**

## 相关概念
- 类（Class）：定义了一件事物的抽象特点，包含它的属性和方法
- 对象（Object）：类的实例，通过 new 生成
- 面向对象（OOP）的三大特性：封装、继承、多态
- 封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
- 继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
- 多态（Polymorphism）：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。
- 存取器（getter & setter）：用以改变属性的读取和赋值行为
- 修饰符（Modifiers）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
- 抽象类（Abstract Class）：抽象类是供其他类继承的基类，抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
- 接口（Interfaces）：不同类之间公有的属性或方法，可以抽象成一个接口。接口可以被类实现（implements）。一个类只能继承自另一个类，但是可以实现多个接口

# 原型链
JS是基于原型链的继承

![image.png](https://blog.warmplace.cn:11443/static/img/4e86289f85a445fc562b11270af3da72.extend.webp)

写一些代码验证上图
```js
function Foo(){
}
const f = new Foo();
console.log(f.__proto__  === Foo.prototype);
console.log(Foo.prototype.__proto__ === Object.prototype)

const o = new Object({});
console.log(o.__proto__ === Object.prototype);
console.log(Object.__proto__ === null);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Object.__proto__ === Function.prototype);

console.log(Function.__proto__ === Function.prototype);
console.log(Foo.__proto__ === Function.prototype);

// 恒等式 Function 与 Object 互为原型
console.log(Function.__proto__ === Object.__proto__);
```
# es5的继承
在es5中 
- 如果是对象可以通过`Object.create`实现继承
- 如果是方法需要构造函数继承和原型继承

```js
/* 手动继承 */
function Rectangle(length, width) {
  this.l = length
  this.w = width
}
Rectangle.prototype.getArea = function () {
  return this.l * this.w
}
function Square(length) {
  // 构造函数继承
  Rectangle.call(this, length, length)
}
// 原型继承
Square.prototype = Object.create(Rectangle.prototype, {
  constructor: { // 修复constructor指向，不然使用instanceof就有问题
    value: Square
  }
})
var square = new Square(3);
// square.__proto__.__proto__ = Rectangle.prototype;
square.__proto__.constructor = Square

console.log(square.getArea())
console.log(square instanceof Square)
console.log(square instanceof Rectangle)
```

# es5继承的社区方案
社区总结了一些继承的方式，关键点围绕构造函数和原型。

## 1.1 直接原型链继承
```js
function Game(name){
  this.name = name ?? 'LOL'
  this.skins = ['s']
}
Game.prototype.getName = function() {
  return this.name;
}

function LOL() {}
LOL.prototype = new Game();
LOL.prototype.constructor = LOL;
/*
本质是重写原型链
缺点:
1) 原型链上的方法和属性都被共享了
2) 子类实例化的时候无法向父类传参
*/
const game1 = new LOL();
const game2 = new LOL();
game1.skins.push('ss');
console.log(game2.skins); // 原型链上的方法和属性是共享的
```
## 1.2 原型式继承
Object.create(proto[, propertiesObject])
第一个参数是父类原型，第二个参数是子类原型
```js
var person = {
    name: 'Yvette',
    hobbies: ['reading']
}
var person1 = Object.create(person);
person1.name = 'Jack';
person1.hobbies.push('coding');
var person2 = Object.create(person);
person2.name = 'Echo';
person2.hobbies.push('running');
console.log(person.hobbies); // [ 'reading', 'coding', 'running' ]
console.log(person1.hobbies); // [ 'reading', 'coding', 'running' ]

// 补充 Object.create原理
function create(super, properties) {
    function F(){}
    F.prototype = new super();
    var f = new F();
    properties && Object.defineProperties(F, properties);
    return f;
}
```



## 2. 构造函数（对象冒充）继承
```js
function SuperType(name) {
    this.name = name;
    this.colors = ['pink', 'blue', 'green'];
}
SuperType.prototype.work = function() {
    console.log(`I am ${this.name}, I can work`);
}
function SubType(name) {
    SuperType.call(this, name);
}
let instance1 = new SubType('Yvette');
instance1.colors.push('yellow');
console.log(instance1.colors); // ['pink', 'blue', 'green', yellow]
 
let instance2 = new SubType('Jack');
console.log(instance2.colors); // ['pink', 'blue', 'green']

w.run() // 已经继承造函数里面的属性和方法
w.work() // 但是没有继承原型链上面的属性和方法
```
## 3.1 组合继承(原型链 + 借用构造函数
```js
function Game() {
  this.name = 'LOL'
  this.skins = ['s']
}
// 继承属性
function LOL() {
  Game.call(this, arguments);
}
// 遗传方法
LOL.prototype = new Game();
LOL.prototype.constructor = LOL;

/*
优点：
  可以向超类传递参数
  每个实例都有自己的属性
  实现了函数复用
缺点是什么（考虑一个问题应该从功能、性能、可读性三方面讲）
  父类构造方法执行了两次
*/
```

## 3.2 寄生组合继承
```js
function Game() {
  this.name = 'LOL'
  this.skins = ['s']
}
// 继承属性
function LOL() {
  Game.call(this, arguments);
}
// 遗传方法
LOL.prototype = Object.create(Game.prototype);
LOL.prototype.constructor = LOL;

// 优点： 解决了父类构造方法执行了两次的问题
```
> 扩展： 有道面试题： `{}`, `new Object()` 及 `Object.create`的区别

## 3.3 封装一个方法
```
function extend(subClass, superClass) {
  function F() {}
  F.prototype = superClass.prototype;
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;
  subClass.superClass = superClass.prototype;
  if(superClass.prototype.constructor === Object) {
    superClass.prototype.constructor = superClass;
  }
}

// 测试用例
function Person(name, age) { // 父类构造函数
  this.name = name
  this.age = age
  this.sayIntroduce = function() { // 实例方法
    console.log(`My name is ${name}, I am ${age} years old`)
  }
}
Person.prototype.eat = function () {
  console.log('Person.prototype.eat 我是个吃货')
}
function Student(name, age, school) {
  Student.superClass.constructor.call(this, name, age);
  this.school = school
  this.say = function () { // 实例方法
    console.log('爸爸妈妈在上班，我上幼儿园')
  }
}
extend(Student, Person);

var feifei = new Student('feifei', '3', '乡村幼儿园')
console.log(feifei.age) // 子类实例属性
console.log(feifei.school) // 父类实例属性
console.log(feifei.say()) // 子类实例方法
console.log(feifei.sayIntroduce()) // 父类实例方法
console.log(feifei.eat()) // 父类原型方法
```

## 4. 多继承-混入方式
```js
function MyClass() {
     SuperClass.call(this);
     OtherSuperClass.call(this);
}

// 继承一个类
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function() {
     // do something
};
```

# es6 Class语法
## 基本语法
```js
class Foo {
    age = 12; // 定义实例属性新方式 建议写在头部
    get school () {  // 定义实例属性 支持 get set 存取器
        return '清华';
    }
    // 构造函数， 不写默认会填充
    constructor(name) {
        // 构造函数可以定义实例方法
        this.name = name;
        // return this  // 默认返回this
    }
    
    /**
     * 原型方法   相当于es5 
        Object.defineProperty(Foo, 'say', {
            configurable: true,
            writable: true,
            enumerable: false,
            value: ƒ say()
        })
     */
    say(){
        console.log(`Hello, I am ${this.name}`)
    }

    // 不管是实例还是静态是属性或方法 都支持属性简写
    // [methodName] () {}

    // 静态方法  不可枚举
    static staticMethod(){}
    // 静态属性  可枚举
    static staticProp = 'staticProp'
}
const foo = new Foo('zs'); // 必须new
const foo2 = new Foo('ls');
foo.__proto__ === foo2.__proto__; // 与es5继承一样，原型是共享的

// 支持class表达式
const MyClass = class Me { };
```
## 私有属性
- 传统方案
    - “_”命名
    - 移除到外部
    - 利用symbol
- ES2022 增加了class私有属性 以#开头

### 私有属性的定义和使用
```js
/* 私有属性定义与使用 */
class Bar {
  #age = 101; // 私有属性
  #getAge() {
    // 私有方法
    return this.#age;
  }
  // 私有属性也支持存取器
  get #x() {}

  /**
   * 私有属性和方法使用方式一：在内部(构造函数或原型方法中)通过this引用
   * 并且必须知道名字才能使用 无法通过Reflect.ownKeys获取
   */
  constructor() {
    console.log(this.#age, this.#getAge());
    console.log(Reflect.ownKeys(this));
    console.log(Object.getOwnPropertyDescriptor(this, "#age"));
  }
}
const bar = new Bar();
// console.log(bar.#age);  // 严格模式下报错
// console.log(bar.#getAge());  // 严格模式下报错

// 私有属性和方法使用方式二: 类内部的静态方法中
// 私有属性不限于从this引用，只要是在类的内部，实例也可以引用私有属性
class Foo {
  #privateValue = 42;
  static getPrivateValue(foo) {
    return this.#privateValue;
  }
}
Foo.getPrivateValue(new Foo()); // 42

// 私有属性必须声明才能使用，否则编译时就报错，
// 访问不存在的私有属性也一样编译时就报错

// 私有静态属性及方法 与 私有属性及方法的 用法特性一致
```

### 检测私有属性
```js
// 可以通过静态方法try/catch的方式检测是否存在私有属性
// es2022 改进了 in  可以检测私有属性了
class C {
  #brand;
  static isC(obj) {
    /* try {
            obj.#brand;
            return true;
        } catch {
            return false;
        } */
    return #brand in obj;
  }
}

// 子类从父类继承的私有属性，也可以使用in运算符来判断。
class A {
  #foo = 0;
  static test(obj) {
    console.log(#foo in obj);
  }
}

class SubA extends A {}

A.test(new SubA()); // true
// 注意，in运算符对于Object.create()、Object.setPrototypeOf形成的继承，
// 是无效的，因为这种继承不会传递私有属性。
class A {
  #foo = 0;
  static test(obj) {
    console.log(#foo in obj);
  }
}
const a = new A();

const o1 = Object.create(a);
A.test(o1); // false
A.test(o1.__proto__); // true

const o2 = {};
Object.setPrototypeOf(o2, a);
A.test(o2); // false
A.test(o2.__proto__); // true
```

## 静态块
- 静态块用于静态代码初始化
- 静态块的另一个作用是将私有属性与类的外部代码分享

```js
// 静态块 处理静态属性需要初始话的逻辑
class polygon {
    static x = ...;
    static y;
    static {
        try {
            this.y = doSomethingWith(this.x)
        } catch {
            this.y = ...;
        }
    }
}

// 静态块 将私有属性与类的外部代码分享
let getX;
class D {
    #x = 1;
    static {
        getX = (inst) => inst.#x;
    }
}
console.log(getX(new D())) // 1
```
## 解构会导致this指向错乱，如何固定class中的this?
1. 箭头函数
2. Proxy 劫持 放入缓存池时进行bind

## new.target 属性
如果构造函数不是通过new命令或Reflect.construct()调用的，new.target会返回undefined
```js
function Person(name) {
  if (new.target === Person) {
    this.name = name;
  } else {
    throw new Error('必须使用 new 命令生成实例');
  }
}
var p1 = new Person('张三'); // ok
var p2 = Reflect.construct(Person, ['ls']); // ok
p2 instanceof Person // true
Person.call(person, '张三');  // 报错

// Class 内部调用new.target，返回当前 Class
class A {
    constructor() {
        console.log(new.target === A); // true
    }
}
class B extends A {}
new B(); // false // 子类继承父类时，new.target会返回子类
// 这个特性用于创建抽象类
```
## 其他
- 类和模块的内部，默认就是严格模式
- 不存在提升，可重复声明
- 如果定义了`symbol.iterator`方法，该类创建的实例就可以遍历

# Class 继承
## class extends 语法
```js
class A {
    constructor(name, age) {
        this.name = name;
        this.age = age
    }
}
class B extends A {
    // 构造函数可以省略 默认填充如下内容
    constructor() {
        super(...arguments)
    }
}
class C extends B {
    constructor(...args) {
        /* 一但写了构造函数就不能省略super()
         这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，
         得到与父类同样的实例属性和方法，然后再对其进行加工，添加子类自己的实例属性和方法 
        */
        super(...args);
        // 只有调用super()之后才可以使用this关键字，否则报错
        console.log(this.age);
    }
}
// 私有属性或（方法包含静态的）都不能继承
class AA {
    #a = 1
    #getA() {return this.#a}
    static #b = 'static prop';
    static #getB(){return this.#b};
}
class BB extends AA {
    constructor() {
        super();
        console.log(this.#a); // 编译时报错
        this.#getA(); // 编译时报错
    }
    static log() {
        console.log(this.#b); // 编译时报错
        console.log(this.#getB()); // 编译时报错
    }
}
// 想要访问私有属性需要借助普通方法
class Foo {
    #p = 1;
    getP() {
      return this.#p;
    }
    setP(num) {
        this.#p=num;
    }
}
  
class Bar extends Foo {
    constructor() {
      super();
    }
}
let bar1 = new Bar();
let bar2 = new Bar();
bar1.setP(123);
bar1.getP(); // 123
bar2.getP(); // 1
// 这个可否理解私有实例属性是被继承的？
```

## es6继承与es5继承的异同
```js
class A{}
class B extends A{}
let b = new B();
```
1. es6的继承包含静态继承
    - `B.__proto__ === A`; // 类继承 静态属性的继承是浅copy
    - `B.prototype.__proto__ === A.prototype` // 原型继承继承
    - 构造函数继承
2. es6内部定义的方法都是不可枚举的
3. 机制不同 es6 "继承在前，实例在后" 对原生构造函数的继承继承就能体现这一点。
4. 与 ES5 一样，类的所有实例共享一个原型对象。


## super关键字
- 必须指明是作为函数还是作为对象使用
- 作为函数时只能用在子类的构造函数中
    - 由于`super()`在子类构造方法中执行时，子类的属性和方法还没有绑定到`this`，所以如果存在同名属性，此时拿到的是父类的属性。
- 作为对象时
    - 在普通方法中指向父类的原型对象，
    - 在静态方法中指向父类
    - `super.x` 取值，可以取到父类原型上的属性或方法，取不到实例上的属性或方法
    - `super.x` 赋值，修改的是子类的实例属性
    - `super.x()`作为方法调用父类方法，父类静态方法中的this指向子类，父类普通方法中的`this`指向子类实例

由于对象总是继承其他对象的，所以可以在任意对象中使用`super`

```js
var obj = {
    toString() {
        return `MyToString ${super.toString()}`;
    }
}
obj.toString(); // 'MyToString [object Object]'
```

## 原生构造函数的继承
- es6与es5继承的行为差异
- 带版本功能的`MyArray`
- 继承`Object`的子类，有一个行为差异

```js
class VersionedArray extends Array {
    constructor() {
        super();
        this.history = [[]];
    }
    commit() {
        this.history.push(this.slice());
    }
    revert() {
        const last = this.history.pop() || [];
        this.splice(0, this.length, ...last);
    }
}
```

## Mix模式的实现
```js
function mix(...mixins) {
  class Mix {
    constructor() {
      for (let mixin of mixins) {
        copyProperties(this, new mixin()); // 拷贝实例属性
      }
    }
  }

  for (let mixin of mixins) {
    copyProperties(Mix, mixin); // 拷贝静态属性
    copyProperties(Mix.prototype, mixin.prototype); // 拷贝原型属性
  }

  return Mix;
}

function copyProperties(target, source) {
  for (let key of Reflect.ownKeys(source)) {
    if ( key !== 'constructor'
      && key !== 'prototype'
      && key !== 'name'
    ) {
      let desc = Object.getOwnPropertyDescriptor(source, key);
      Object.defineProperty(target, key, desc);
    }
  }
}
```