探索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: Awesome
var 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: bound
export default function() { .. } // name: default
var y = new Function(); // name: anonymous
var 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; // true
d instanceof Awesome; // false
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]]运算。

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;
// 1
pobj.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的运作方式，就可以开始利用这些强大的元编程能力来进一步应用这门语言。