前言
下面两个js实现了暴露和导入功能
aa.js
export let n = 1
export const increase = () => {
n++
}
bb.js
import { n, increase } from "./aa.js"
console.log(n, increase)
乍一看{ name, sayHello }
写法和JS的解构写法一致,那么具名导入是解构吗,下文分析一下。
分析
尝试修改n
import { n, increase } from "./aa.js"
console.log(n) // 1
increase()
console.log(n) // 2
模拟将导入方式变为JS解构
:
const obj = {
n: 1,
increase() {
this.n++
},
}
const { n, increase } = obj
console.log(n) // 1
increase()
console.log(n) // 1
可以发现,二者打印结果并不一致,所以得出结论:具名导入
并不是解构。
总结
解构全称解构赋值
,是将值从对象中解构并赋值给新变量
,新变量有自己的存储空间,所以对象中的变量即使变化了,也不会影响新变量
,可以理解为新变量
的初始值只是解构那一瞬间对象中的值。
具名导入则不同,它并不会为变量开辟新空间
,而只是引用了对象中的值,所以当对象发生改变时,该值也会随之改变。
所以具名导入并非解构赋值,需要区分二者。