当我们谈论ES6时，我们在谈论什么？

demon陈少
124 阅读4分钟

1:原型和原型链的简单例子

 function Rectangle(x, y) {
    this.x = x;this.y = y;
}
Rectangle.prototype.perimeter = function() {
    return 2 * (this.x + this.y);
}
var rectangle = new Rectangle(4, 3);
console.log(rectangle.perimeter()); // outputs '14'
rectangle.__proto__ ===  Rectangle.prototype //true

想了解更多的ES6的类和继承 查看往期回顾juejin.cn/post/699439…

2:日常前端代码开发中，值得用ES6去改进的编程优化或者规范

  1. 常用箭头函数来取代var self = this;的做法。
  2. 常用let取代var命令。
  3. 常用数组/对象的解构赋值来命名变量，结构更清晰，语义更明确，可读性更好。
// 可以看到变量式声明属性看起来更加简洁明了
let {keys, values, entries} = Object;
// vue3中的解构赋值
import {reactive,ref} form "vue"
// key和value一样可省略
let MyOwnMethods = {keys, values, entries}; // let MyOwnMethods = {keys: keys, values: values, entries: entries}
// 方法也可以采用简洁写法

let es5Fun = {
    method: function(){}
}; 
let es6Fun = {
    method(){}
}
  1. 在长字符串多变量组合场合，用模板字符串来取代字符串累加，能取得更好地效果和阅读体验。
  2. 用Class类取代传统的构造函数，来生成实例化对象。
  3. 在大型应用开发中，要保持module模块化开发思维，分清模块之间的关系，常用import、export方法。

3:ES6的模块化

  • CommonJS 是同步加载模块，ES6是异步加载模块
  • ES6 module作为新的规范，可以替代之前的AMD、CMD、CommonJS作为浏览器和服务端的通用模块方案。NodeJS在13.2.0版本后已经开始完全支持ES6 module，ES6 module在未来也会实际的模块化标准。

ps:很长一段时间以来，Node.js 项目的答案总是这样：

使用 require 来加载 ES 模块是不被支持的，因为 ES 模块是异步执行的。

但这是一种文档和其他交流方式有误导作用的情况 - 也许它们只在谈论在 Node.js 的 ESM 中发生的事情，而不是 ESM 本身被设计成什么样的。去年，当 joyeecheung 阅读 V8 代码来修复内存泄漏问题时，偶然发现 ESM 本身并不是真正设计成无条件异步的。而是设计成只在条件下异步 - 只有当代码中包含顶级 await 时才会异步。

CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。

但是，如果是浏览器环境，要从服务器端加载模块，这时就必须采用异步模式。

浏览器加载 ES6 模块是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本

  • CommonJS模块输出的是一个值的拷贝(引入后使用不会受到原文件的影响)，ES6模块输出的是值的引用（import输入的变量都是只读的，除了对象）
//counter.js

let counter = 10;
const add = () => {
    console.log(counter);
};

export { counter, add };

//index.js

add();
import { counter, add } from "./counter"; //import命令具有提升效果
counter += 1; //报错  因为是只读
console.log(counter);

//输出 10 报错

ps: import命令输入的变量都是只读的（除了对象）

`//counter.js 
let counter = {}; 
export default counter; //index.js 
import myCounter from './counter.js'; 
myCounter.hello = "helloCounter";`

上面的代码中 myCounter的属性可以成功改写，并且其他模块也可以读到改写后得值。不过这种写法很难查错，建议凡是import的变量都当做完全只读，不要轻易改变它的属性。

  • CommonJS模块是运行时加载，ES6模块是编译时静态执行。 所以不能使用表达式和变量
//报错
let module = "my_module"

import {foo} from module;

ES2020提案 引入import()函数，支持动态记载模块

ps:

  • import语句是Singleton模式
import {foo} from 'my_module'

import {bar} from 'my_module'

//等同于
import {foo,bar} from 'my_module'

  • CommonJs是单个值导出，ES6 Module可以导出多个(解构)

  • CommonJs的this是当前模块，ES6 Module的this是undefined

    po：

     -一个是浅拷贝 一个是值的引用
  一个是运行时加载 一个是编译静态执行 便于剪枝 优化
  pommonJs 就是一个函数,而ES6是一个模板化标准
  所以还有：
  CommonJs是单个值导出，ES6 Module可以导出多个(解构)
  CommonJs的this是当前模块，ES6 Module的this是undefined

4:ES6 迭代器 Iterator

查看往期回顾 juejin.cn/post/699891…

5:ES6 Promise语法详解

查看往期回顾 juejin.cn/post/700027…

6:Event Loop

查看往期回顾 juejin.cn/post/700438…

7:自执行函数和闭包

查看往期回顾 juejin.cn/post/705522…

8:JS内存机制

查看往期回顾 juejin.cn/post/707068…

9:JS内存泄漏和避免

查看往期回顾 juejin.cn/post/707068…

10:ES6 多个新特性示例（福利）

查看往期回顾 juejin.cn/post/699945…

avatar
文章
阅读
粉丝