认识一下 JavaScrip 中的元编程

作者：华为云开发者联盟

2024-04-23
广东
本文字数：3976 字
阅读完需：约 13 分钟

本文分享自华为云社区《元编程，使代码更具描述性、表达性和灵活性》，作者：叶一一。

背景

去年下半年，我在微信书架里加入了许多技术书籍，各种类别的都有，断断续续的读了一部分。

没有计划的阅读，收效甚微。

新年伊始，我准备尝试一下其他方式，比如阅读周。每月抽出 1~2 个非连续周，完整阅读一本书籍。

这个“玩法”虽然常见且板正，但是有效，已经坚持阅读三个月。

4 月份的阅读计划有两本，《你不知道的 JavaScrip》系列迎来收尾。

已读完书籍：《架构简洁之道》、《深入浅出的 Node.js》、《你不知道的 JavaScript（上卷）》、《你不知道的 JavaScript（中卷）》。

当前阅读周书籍：《你不知道的 JavaScript（下卷）》。

元编程

函数名称

程序中有多种方式可以表达一个函数，函数的“名称”应该是什么并非总是清晰无疑的。

更重要的是，我们需要确定函数的“名称”是否就是它的 name 属性（是的，函数有一个名为 name 的属性），或者它是否指向其词法绑定名称，比如 function bar(){..}中的 bar。

name 属性是用于元编程目的的。

默认情况下函数的词法名称（如果有的话）也会被设为它的 name 属性。实际上，ES5（和之前的）规范对这一行为并没有正式要求。name 属性的设定是非标准的，但还是比较可靠的。而在 ES6 中这一点已经得到了标准化。

在 ES6 中，现在已经有了一组推导规则可以合理地为函数的 name 属性赋值，即使这个函数并没有词法名称可用。

比如：

var abc = function () {  // ..};
abc.name; // "abc"

复制代码

下面是 ES6 中名称推导（或者没有名称）的其他几种形式：

(function(){ .. });                      // name:(function*(){ .. });                     // name:window.foo = function(){ .. };            // name:class Awesome {    constructor() { .. }                  // name: Awesome    funny() { .. }                        // name: funny}
var c = class Awesome { .. };             // name: Awesomevar o = {    foo() { .. },                          // name: foo    *bar() { .. },                        // name: bar    baz: () => { .. },                    // name: baz    bam: function(){ .. },               // name: bam    get qux() { .. },                    // name: get qux    set fuz() { .. },                    // name: set fuz    ["b" + "iz"]:      function(){ .. },                // name: biz    [Symbol( "buz" )]:      function(){ .. }                 // name: [buz]};
var x = o.foo.bind( o );                 // name: bound foo(function(){ .. }).bind( o );             // name: boundexport default function() { .. }     // name: defaultvar y = new Function();              // name: anonymousvar GeneratorFunction =    function*(){}.  proto  .constructor;var z = new GeneratorFunction();     // name: anonymous

复制代码

默认情况下，name 属性不可写，但可配置，也就是说如果需要的话，可使用 Object. defineProperty(..)来手动修改。

元属性

元属性以属性访问的形式提供特殊的其他方法无法获取的元信息。

以 new.target 为例，关键字 new 用作属性访问的上下文。显然，new 本身并不是一个对象，因此这个功能很特殊。而在构造器调用（通过 new 触发的函数/方法）内部使用 new. target 时，new 成了一个虚拟上下文，使得 new.target 能够指向调用 new 的目标构造器。

这个是元编程操作的一个明显示例，因为它的目的是从构造器调用内部确定最初 new 的目标是什么，通用地说就是用于内省（检查类型/结构）或者静态属性访问。

举例来说，你可能需要在构造器内部根据是直接调用还是通过子类调用采取不同的动作：

class Parent {  constructor() {    if (new.target === Parent) {      console.log('Parent instantiated');    } else {      console.log('A child instantiated');    }  }}
class Child extends Parent {}
var a = new Parent();// Parent instantiated
var b = new Child();// A child instantiated

复制代码

Parent 类定义内部的 constructor()实际上被给定了类的词法名称（Parent），即使语法暗示这个类是与构造器分立的实体。

公开符号

JavaScript 预先定义了一些内置符号，称为公开符号（Well-Known Symbol,WKS）。

定义这些符号主要是为了提供专门的元属性，以便把这些元属性暴露给 JavaScript 程序以获取对 JavaScript 行为更多的控制。

Symbol.iterator

Symbol.iterator 表示任意对象上的一个专门位置（属性），语言机制自动在这个位置上寻找一个方法，这个方法构造一个迭代器来消耗这个对象的值。很多对象定义有这个符号的默认值。

然而，也可以通过定义 Symbol.iterator 属性为任意对象值定义自己的迭代器逻辑，即使这会覆盖默认的迭代器。这里的元编程特性在于我们定义了一个行为特性，供 JavaScript 其他部分（也就是运算符和循环结构）在处理定义的对象时使用。

比如：

var arr = [4, 5, 6, 7, 8, 9];
for (var v of arr) {  console.log(v);}// 4 5 6 7 8 9
// 定义一个只在奇数索引值产生值的迭代器arr[Symbol.iterator] = function* () {  var idx = 1;  do {    yield this[idx];  } while ((idx += 2) < this.length);};
for (var v of arr) {  console.log(v);}// 5 7 9

复制代码

Symbol.toStringTag 与 Symbol.hasInstance

最常见的一个元编程任务，就是在一个值上进行内省来找出它是什么种类，这通常是为了确定其上适合执行何种运算。对于对象来说，最常用的内省技术是 toString()和 instanceof。

在 ES6 中，可以控制这些操作的行为特性：

function Foo(greeting) {  this.greeting = greeting;}
Foo.prototype[Symbol.toStringTag] = 'Foo';
Object.defineProperty(Foo, Symbol.hasInstance, {  value: function (inst) {    return inst.greeting == 'hello';  },});
var a = new Foo('hello'),  b = new Foo('world');
b[Symbol.toStringTag] = 'cool';
a.toString(); // [object Foo]String(b); // [object cool]a instanceof Foo; // true
b instanceof Foo; // false

复制代码

原型（或实例本身）的 @@toStringTag 符号指定了在[object ]字符串化时使用的字符串值。

@@hasInstance 符号是在构造器函数上的一个方法，接受实例对象值，通过返回 true 或 false 来指示这个值是否可以被认为是一个实例。

Symbol.species

在创建 Array 的子类并想要定义继承的方法（比如 slice(..)）时使用哪一个构造器（是 Array(..)还是自定义的子类）。默认情况下，调用 Array 子类实例上的 slice(..)会创建这个子类的新实例

这个需求，可以通过覆盖一个类的默认 @@species 定义来进行元编程：

class Cool {  // 把@@species推迟到子类  static get [Symbol.species]() {    return this;  }
  again() {    return new this.constructor[Symbol.species]();  }}
class Fun extends Cool {}
class Awesome extends Cool {  // 强制指定@@species为父构造器  static get [Symbol.species]() {    return Cool;  }}
var a = new Fun(),  b = new Awesome(),  c = a.again(),  d = b.again();
c instanceof Fun; // trued instanceof Awesome; // falsed instanceof Cool; // true

复制代码

内置原生构造器上 Symbol.species 的默认行为是 return this。在用户类上没有默认值，但是就像展示的那样，这个行为特性很容易模拟。

如果需要定义生成新实例的方法，使用 new this.constructorSymbol.species模式元编程，而不要硬编码 new this.constructor(..)或 new XYZ(..)。然后继承类就能够自定义 Symbol.species 来控制由哪个构造器产生这些实例。

代理

ES6 中新增的最明显的元编程特性之一是 Proxy（代理）特性。

代理是一种由你创建的特殊的对象，它“封装”另一个普通对象——或者说挡在这个普通对象的前面。你可以在代理对象上注册特殊的处理函数（也就是 trap），代理上执行各种操作的时候会调用这个程序。这些处理函数除了把操作转发给原始目标/被封装对象之外，还有机会执行额外的逻辑。

你可以在代理上定义的 trap 处理函数的一个例子是 get，当你试图访问对象属性的时候，它拦截[[Get]]运算。

var obj = { a: 1 },  handlers = {    get(target, key, context) {      // 注意：target === obj,      // context === pobj      console.log('accessing: ', key);      return Reflect.get(target, key, context);    },  },  pobj = new Proxy(obj, handlers);
obj.a;// 1pobj.a;// accessing: a// 1

复制代码

我们在 handlers（Proxy(..)的第二个参数）对象上声明了一个 get(..)处理函数命名方法，它接受一个 target 对象的引用（obj）、key 属性名("a")粗体文字以及 self/接收者/代理（pobj）。

代理局限性

可以在对象上执行的很广泛的一组基本操作都可以通过这些元编程处理函数 trap。但有一些操作是无法（至少现在）拦截的。

var obj = { a:1, b:2 },handlers = { .. },pobj = new Proxy( obj, handlers );typeof obj;String( obj );
obj + "";obj == pobj;obj === pobj

复制代码

总结

我们来总结一下本篇的主要内容：

在 ES6 之前，JavaScript 已经有了不少的元编程功能，而 ES6 提供了几个新特性，显著提高了元编程能力。
从匿名函数的函数名推导，到提供了构造器调用方式这样的信息的元属性，你可以比过去更深入地查看程序运行时的结构。通过公开符号可以覆盖原本特性，比如对象到原生类型的类型转换。代理可以拦截并自定义对象的各种底层操作，Reflect 提供了工具来模拟它们。
原著作者建议：首先应将重点放在了解这个语言的核心机制到底是如何工作的。而一旦你真正了解了 JavaScript 本身的运作机制，那么就是开始使用这些强大的元编程能力进一步应用这个语言的时候了。

点击关注，第一时间了解华为云新鲜技术~

发布于: 2024-04-23阅读数: 2

原文链接:【http://xie.infoq.cn/article/dc881802968599d9c0d9f74a7】。文章转载请联系作者。

华为云开发者联盟

关注

提供全面深入的云计算技术干货 2020-07-14 加入

生于云，长于云，让开发者成为决定性力量

发布

暂无评论

创作场景

认识一下 JavaScrip 中的元编程

背景

元编程

函数名称

元属性

公开符号

Symbol.iterator

Symbol.toStringTag 与 Symbol.hasInstance

Symbol.species

代理

代理局限性

总结

华为云开发者联盟

评论