@luminous/docs
搜索 K

Appearance

On this page

Javascript进阶 ​

生成器函数和迭代器 ​

生成器函数和迭代器的作用和实现如下：

  • 生成器函数是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。生成器函数使用 function*语法编写。最初调用时，生成器函数不执行任何代码，而是返回一种称为 Generator 的迭代器³。
  • 迭代器是使用户在容器对象（container，例如链表或数组）上可以遍历访问的对象，使用该接口无需关心容器对象的内部实现细节。迭代器协议定义了产生一系列值（无论是有限还是无限个）的标准方式，在JavaScript中这个标准就是一个特定的next方法。每次调用next方法，都会返回一个包含value和done属性的对象，其中value表示当前值，done表示是否结束²。
  • 生成器函数和迭代器之间有紧密的联系，通过调用生成器的next方法，可以让生成器函数恢复执行，并在遇到yield关键字时暂停，并将yield后面的表达式作为当前值返回。当再次调用next方法时，生成器函数从上次暂停的地方继续执行，直到遇到return或者抛出异常或者没有更多代码可执行为止³。
  • 以下是一个简单的生成器函数和迭代器的例子：
javascript
// 定义一个生成器函数
function* gen() {
  // 使用yield关键字来暂停并返回当前值
  yield "hello";
  yield "world";
  return "end";
}

// 调用生成器函数得到一个迭代器
const iterator = gen();

// 调用迭代器的next方法
console.log(iterator.next()); // {value: "hello", done: false}
console.log(iterator.next()); // {value: "world", done: false}
console.log(iterator.next()); // {value: "end", done: true}
console.log(iterator.next()); // {value: undefined, done: true}

元编程🔥 ​

元编程是指使用代码来操作或生成其他代码的技术。在JavaScript中，元编程可以通过使用Proxy和Reflect对象来实现，它们可以拦截和修改对象的基本操作 。

元编程的例子有很多，不同的语言和场景可能有不同的实现方式。在JavaScript中，一个简单的元编程的例子是使用Proxy对象来拦截和修改对象的属性访问²。例如，下面的代码创建了一个Proxy对象，它可以在访问对象的属性时自动添加前缀：

javascript
let obj = {name: "Alice", age: 20};
let proxy = new Proxy(obj, {
  get(target, prop) {
    return "Hello " + target[prop];
  }
});
console.log(proxy.name); // Hello Alice
console.log(proxy.age); // Hello 20

元编程在js里的应用场景也有很多，主要可以利用Proxy和Reflect对象来拦截和定义基本语言操作的自定义行为，例如属性查找、赋值、枚举、函数调用等¹。例如，你可以使用Proxy对象来实现一个虚拟DOM，它可以在访问真实DOM时进行一些优化和处理²。你也可以使用Reflect对象来实现一个动态代理，它可以在调用目标对象的方法时进行一些拦截和增强³。

虚拟DOM ​

虚拟DOM的例子有很多，比如React、Vue等前端框架都使用了虚拟DOM的技术。虚拟DOM是一个JS对象，它可以描述一个DOM节点的标签、属性和子节点。虚拟DOM可以通过render函数转化为真实的DOM，并插入到页面中。虚拟DOM还可以给任何其他实体建立映射关系，比如iOS应用、安卓应用、小程序等

虚拟DOM和真实DOM的区别主要有以下几点:

  • 真实DOM是浏览器提供的操作HTML的接口，它是一个结构化文本的抽象，可以通过JS来修改网页的内容和样式。
  • 虚拟DOM是一个普通的JS对象，它是一个用来描述真实DOM结构的对象，包含了标签、属性和子节点等信息。
  • 真实DOM操作很慢，因为每次修改都会引起浏览器的重绘和回流，消耗性能和内存。
  • 虚拟DOM操作很快，因为它只是在内存中进行计算，不会直接影响真实DOM。
  • 虚拟DOM可以通过render函数转化为真实DOM，并插入到页面中。虚拟DOM还可以通过diff算法比较两个虚拟DOM树的差异，并只更新变化的部分到真实DOM上。这样可以提高渲染效率和用户体验。

上次更新于: