认识一下JavaScrip中的元编程

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

去年下半年，我在微信书架里参加了很多技术书籍，各种种别的都有，断断续续的读了一部分。
没有筹划的阅读，收效甚微。
新年伊始，我预备尝试一下其他方式，比如阅读周。每月抽出1~2个非连续周，完整阅读一本书籍。
这个“玩法”虽然常见且板正，但是有用，已经坚持阅读三个月。
4月份的阅读筹划有两本，《你不知道的JavaScrip》系列迎来收尾。
已读完书籍：《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript（上卷）》、《你不知道的JavaScript（中卷）》。
当前阅读周书籍：《你不知道的JavaScript（下卷）》。元编程

函数名称

程序中有多种方式可以表达一个函数，函数的“名称”应该是什么并非总是清晰无疑的。
更重要的是，我们需要确定函数的“名称”是否就是它的name属性（是的，函数有一个名为name的属性），或者它是否指向其词法绑定名称，比如function bar(){..}中的bar。
name属性是用于元编程目标的。
默认情况下函数的词法名称（假如有的话）也会被设为它的name属性。实际上，ES5（和之前的）规范对这一行为并没有正式要求。name属性的设定是非标准的，但照旧比较可靠的。而在ES6中这一点已经得到了标准化。
在ES6中，如今已经有了一组推导规则可以公道地为函数的name属性赋值，即使这个函数并没有词法名称可用。
比如：

1. var abc = function () {
2.   // ..
3. };
5. abc.name; // "abc"

复制代码

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

1. (function(){ .. });                      // name:
2. (function*(){ .. });                     // name:
3. window.foo = function(){ .. };            // name:
4. class Awesome {
5.     constructor() { .. }                  // name: Awesome
6.     funny() { .. }                        // name: funny
7. }
9. var c = class Awesome { .. };             // name: Awesome
10. var o = {
11.     foo() { .. },                          // name: foo
12.     *bar() { .. },                        // name: bar
13.     baz: () => { .. },                    // name: baz
14.     bam: function(){ .. },               // name: bam
15.     get qux() { .. },                    // name: get qux
16.     set fuz() { .. },                    // name: set fuz
17.     ["b" + "iz"]:
18.       function(){ .. },                // name: biz
19.     [Symbol( "buz" )]:
20.       function(){ .. }                 // name: [buz]
21. };
23. var x = o.foo.bind( o );                 // name: bound foo
24. (function(){ .. }).bind( o );             // name: bound
25. export default function() { .. }     // name: default
26. var y = new Function();              // name: anonymous
27. var GeneratorFunction =
28.     function*(){}.  proto  .constructor;
29. var z = new GeneratorFunction();     // name: anonymous

复制代码

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

元属性以属性访问的形式提供特别的其他方法无法获取的元信息。
以new.target为例，关键字new用作属性访问的上下文。显然，new本身并不是一个对象，因此这个功能很特别。而在构造器调用（通过new触发的函数/方法）内部利用new. target时，new成了一个虚拟上下文，使得new.target能够指向调用new的目标构造器。
这个是元编程操作的一个显着示例，由于它的目标是从构造器调用内部确定最初new的目标是什么，通用地说就是用于内省（检查类型/结构）或者静态属性访问。
举例来说，你大概需要在构造器内部根据是直接调用照旧通过子类调用采取不同的动作：

1. class Parent {
2.   constructor() {
3.     if (new.target === Parent) {
4.       console.log('Parent instantiated');
5.     } else {
6.       console.log('A child instantiated');
7.     }
8.   }
9. }
11. class Child extends Parent {}
13. var a = new Parent();
14. // Parent instantiated
16. var b = new Child();
17. // A child instantiated

复制代码

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

JavaScript预先定义了一些内置符号，称为公开符号（Well-Known Symbol,WKS）。
定义这些符号重要是为了提供专门的元属性，以便把这些元属性袒露给JavaScript程序以获取对JavaScript行为更多的控制。
Symbol.iterator

Symbol.iterator表示恣意对象上的一个专门位置（属性），语言机制自动在这个位置上寻找一个方法，这个方法构造一个迭代器来斲丧这个对象的值。很多对象定义有这个符号的默认值。
然而，也可以通过定义Symbol.iterator属性为恣意对象值定义自己的迭代器逻辑，即使这会覆盖默认的迭代器。这里的元编程特性在于我们定义了一个行为特性，供JavaScript其他部分（也就是运算符和循环结构）在处理定义的对象时利用。
比如：

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

复制代码

Symbol.toStringTag与Symbol.hasInstance

最常见的一个元编程任务，就是在一个值上举行内省来找出它是什么种类，这通常是为了确定其上适合实行何种运算。对于对象来说，最常用的内省技术是toString()和instanceof。
在ES6中，可以控制这些操作的行为特性：

1. function Foo(greeting) {
2.   this.greeting = greeting;
3. }
5. Foo.prototype[Symbol.toStringTag] = 'Foo';
7. Object.defineProperty(Foo, Symbol.hasInstance, {
8.   value: function (inst) {
9.     return inst.greeting == 'hello';
10.   },
11. });
13. var a = new Foo('hello'),
14.   b = new Foo('world');
16. b[Symbol.toStringTag] = 'cool';
18. a.toString(); // [object Foo]
19. String(b); // [object cool]
20. a instanceof Foo; // true
22. b instanceof Foo; // false

复制代码

原型（或实例本身）的@@toStringTag符号指定了在[object ]字符串化时利用的字符串值。
@@hasInstance符号是在构造器函数上的一个方法，担当实例对象值，通过返回true或false来指示这个值是否可以被认为是一个实例。
Symbol.species

在创建Array的子类并想要定义继承的方法（比如slice(..)）时利用哪一个构造器（是Array(..)照旧自定义的子类）。默认情况下，调用Array子类实例上的slice(..)会创建这个子类的新实例
这个需求，可以通过覆盖一个类的默认@@species定义来举行元编程：

1. class Cool {
2.   // 把@@species推迟到子类
3.   static get [Symbol.species]() {
4.     return this;
5.   }
7.   again() {
8.     return new this.constructor[Symbol.species]();
9.   }
10. }
12. class Fun extends Cool {}
14. class Awesome extends Cool {
15.   // 强制指定@@species为父构造器
16.   static get [Symbol.species]() {
17.     return Cool;
18.   }
19. }
21. var a = new Fun(),
22.   b = new Awesome(),
23.   c = a.again(),
24.   d = b.again();
26. c instanceof Fun; // true
27. d instanceof Awesome; // false
28. d instanceof Cool; // true

复制代码

内置原生构造器上Symbol.species的默认行为是return this。在用户类上没有默认值，但是就像展示的那样，这个行为特性很容易模仿。
假如需要定义生成新实例的方法，利用new this.constructor[Symbol.species](..)模式元编程，而不要硬编码new this.constructor(..)或new XYZ(..)。然后继承类就能够自定义Symbol.species来控制由哪个构造器产生这些实例。
代理

ES6中新增的最显着的元编程特性之一是Proxy（代理）特性。
代理是一种由你创建的特别的对象，它“封装”另一个平凡对象——或者说挡在这个平凡对象的前面。你可以在代理对象上注册特别的处理函数（也就是trap），代理上实行各种操作的时候会调用这个程序。这些处理函数除了把操作转发给原始目标/被封装对象之外，还有机会实行额外的逻辑。
你可以在代理上定义的trap处理函数的一个例子是get，当你试图访问对象属性的时候，它拦截[[Get]]运算。

1. var obj = { a: 1 },
2.   handlers = {
3.     get(target, key, context) {
4.       // 注意：target === obj,
5.       // context === pobj
6.       console.log('accessing: ', key);
7.       return Reflect.get(target, key, context);
8.     },
9.   },
10.   pobj = new Proxy(obj, handlers);
12. obj.a;
13. // 1
14. pobj.a;
15. // accessing: a
16. // 1

复制代码

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

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

1. var obj = { a:1, b:2 },
2. handlers = { .. },
3. pobj = new Proxy( obj, handlers );
4. typeof obj;
5. String( obj );
7. obj + "";
8. obj == pobj;
9. obj === pobj

复制代码

总结

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

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。