ES6学习总结(六)

模块化

在运用react、vue等流行框架到时候，我们发现每个代码块都是分离的，每个js文件中定义的内容都只在本区域有作用。这就是ES6引入的模块化的概念，在此之前，一个应用的每个js文件所定义的所有内容都由全局作用域共享。
模块与脚本的不同
模块的加载方式是与js原先脚本加载方式有所区别的
1、模块代码自动运行在严格模式下，并且没有办法跳出严格模式
2、在模块的顶级作用域创建的变量，不会被添加到共享的全局作用域
3、模块顶级作用域的this值为undefined
4、模块不允许在代码中使用html风格的注释
5、对于模块外的代码需要访问的代码，模块必须导出它们
6、允许模块从其它模块导入内容
模块中的关键字
export关键字可以将需要导出的代码部分公开给其他模块
import关键字可以访问已被导出的代码部分
as 关键字可以在导入模块指定新名称
default关键字可以设置模块中的一个默认导出(唯一)
例

// 导出模块 example.js
export const name = "地瓜"
export const age = "24"
export default function sum(num1, num2) {
         return num1 + num2;
}
// 导入模块
import sum, { person as name, age } from  "./example.js"
// 需要注意默认值不能用花括号包裹除非下列写法
// import sum, { default as sum, name, age } from "./example"
console.log(person, age) // "地瓜"， "24"
console.log(sum(1,2)) // 3

代理

代理的概念是我们可以通过创建一个代理对象来替代另一个对象，并且能拦截这个对象底层操作，包括set、get、has等行为，这个拦截并响应的函数称为陷阱。
ES6中引入了一个Proxy构造器来创建一个代理，需要传入两个参数。目标对象和一个定义了一个或多个陷阱函数的处理器。
Reflect对象
Reflect对象代表的是反射接口，也就是上述提到陷阱函数的一个集合。
举一个栗子

let person = {
    name: 'digua'
}
let proxy = new Proxy(person, {
    set(tarTarget, key, value, receiver) {
          if(!tarTarget.hasOwnProperty(key)) {
               if(isNaN(value) {
                    throw new TypeError("新增属性必须是一个数组")
               })
          }
          return Reflect.set(trapTarget, key, value, receiver)
    }
})
proxy.count = 1;
console.log(proxy.count) // 1
console.log(person.count) // 1 代理对象的行为反射到了源对象
proxy.another = "xiaoxiao" // 报错