元编程 (Meta Programming) 是指编写可以操作或改变其他程序的程序。元编程可以改变 JavaScript 的一些基本操作的行为

主要与这三个对象有关：

Symbol：通过内置 Symbol 值复写 JS 语言中的基本操作
Proxy：通过钩子函数拦截、改变 JS 语言的基本操作
Reflect：获取 JS 语言内部的基本操作

什么是基本操作

基本操作包括：属性访问和赋值、属性删除、属性枚举、函数调用、对象构造等

属性访问 (get) 和赋值 (set)

使用 . 或 [] 访问对象的属性，使用 = 给属性赋值

let obj = { a: 1 }
console.log(obj.a)    // 属性访问
obj.b = 2             // 属性赋值
console.log(obj['b']) // 属性访问

属性删除

let obj = { a: 1 }
delete obj.a

属性枚举

const obj = {
    name: 'test',
    age: 18,
}
 
for (k in obj) {
    console.log(obj[k])
}

函数调用

function add(a, b) {
    return a + b
}
 
const result = add(1, 2)

对象构造

function Person(name, age) {
    this.name = name
    this.age = age
}
 
const alice = new Person('Alice', 25)

Symbol

通过内置 Symbol 值复写 JS 语言中的内部实现

Reflect

Reflect 是一个内置的全局对象，对一些函数式的操作提供了面向对象的 API。 Reflect 不是一个函数对象，因此它是不可构造的。它所有的方法都是静态的，类似于 Math 对象

目前共 13 个静态方法，可以分为函数相关、原型相关、对象相关三大类

函数相关

`apply`

通过指定的 this 和参数列表发起对目标 (target) 函数的调用

Reflect.apply(target, thisArg, argumentsList)

参数：
- target：目标函数
- thisArg：target 函数调用时绑定的 this 对象
- argumentsList：类数组，target 函数调用时的参数列表
返回值：调用完带着指定参数和 this 值的给定的函数后返回的结果
异常：如果 target 对象不可调用，抛出 TypeError 异常

示例：

function greet(name, age) {
  console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
const args = ['John', 30];
Reflect.apply(greet, null, args);
 
// 类似于：
// greet(...args)
// greet.apply(null, args)
// Function.prototype.apply.call(greet, null, args)

construct

该方法的行为有点像 [[007.原型与原型链#^new|new 操作符]] 构造函数，相当于运行 new target(...args)

Reflect.construct(target, argumentsList[, newTarget])

参数：
- target：被运行的目标构造函数
- argumentsList：类数组，target 构造函数调用时的参数
- newTarget（可选）：作为新创建对象的原型对象的 constructor 属性，参考 new.target 操作符，默认值为 target
返回值：以 target（如果 newTarget 存在，则为 newTarget）函数为构造函数，argumentList 为其初始化参数的对象实例
异常：如果 target 或者 newTarget 不是构造函数，抛出 TypeError 异常

示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const args = ['John', 30];
const instance = Reflect.construct(Person, args);
 
// 类似于：
// new Person(...args)

`Reflect.construct()` Vs. `Object.create()`：

function OneClass() {
  this.name = "one";
}
 
function OtherClass() {
  this.name = "other";
}
 
// 创建一个对象：
var obj1 = Reflect.construct(OneClass, args, OtherClass);
 
// 与上述方法等效：
var obj2 = Object.create(OtherClass.prototype);
OneClass.apply(obj2, args);
 
console.log(obj1.name); // 'one'
console.log(obj2.name); // 'one'
 
console.log(obj1 instanceof OneClass); // false
console.log(obj2 instanceof OneClass); // false
 
console.log(obj1 instanceof OtherClass); // true
console.log(obj2 instanceof OtherClass); // true

虽然两种方式结果相同，但在创建对象过程中仍一点不同：

当使用 Object.create() 和 Function.prototype.apply() 时，如果不使用 new 操作符调用构造函数，构造函数内部的 new.target 值会指向 undefined
当调用 Reflect.construct() 来创建对象，new.target 值会自动指定到 target（或者 newTarget，前提是 newTarget 指定了）

function OneClass() {
  console.log("OneClass");
  console.log(new.target);
}
function OtherClass() {
  console.log("OtherClass");
  console.log(new.target);
}
 
var obj1 = Reflect.construct(OneClass, args);
// 输出：
//     OneClass
//     function OneClass { ... }
 
var obj2 = Reflect.construct(OneClass, args, OtherClass);
// 输出：
//     OneClass
//     function OtherClass { ... }
 
var obj3 = Object.create(OtherClass.prototype);
OneClass.apply(obj3, args);
// 输出：
//     OneClass
//     undefined

原型相关

getPrototypeOf

与 Object.getPrototypeOf() 方法几乎是一样的，都是返回指定对象的原型（即内部的 [[Prototype]] 属性的值）

Reflect.getPrototypeOf(target)

参数：
- target：获取原型的目标对象
返回值：给定对象的原型。如果给定对象没有原型，则返回 null
异常：如果 target 不是 Object，抛出一个 TypeError 异常

示例：

const obj = { x: 1 };
const proto = Reflect.getPrototypeOf(obj); // 相当于 Object.getPrototypeOf(obj)
console.log(proto === Object.prototype); // true

setPrototypeOf

除了返回类型以外，Reflect.setPrototypeOf() 与 Object.setPrototypeOf() 方法是一样的。它可设置对象的原型（即内部的 [[Prototype]] 属性）为另一个对象或 null，如果操作成功返回 true，否则返回 false

Reflect.setPrototypeOf(target, prototype)

参数：
- target：设置原型的目标对象
- prototype：target 对象的新原型（一个对象或 null）
返回值：返回一个 Boolean 值表明是否原型已经成功设置
异常：如果 target 不是对象，或 prototype 既不是对象也不是 null，抛出一个 TypeError 异常

示例：

const obj = { x: 1 };
Reflect.setPrototypeOf(obj, Array.prototype); // 设置 obj 的原型为 Array.prototype
console.log(obj instanceof Array); // true

对象相关

get

用于获取属性值，与从对象中读取属性类似 (target[propertyKey])，但 receiver 参数可以改变 getter 的 this 对象

Reflect.get(target, propertyKey[, receiver])

参数：
- target：需要取值的目标对象
- propertyKey：需要获取的值的键值
- receiver（可选）：receiver 为 getter 调用时的 this 值
返回值：属性的值
异常：如果 target 不是 Object，抛出一个 TypeError 异常

set

用于设置属性值，等同于 target[propertyKey] = value，但 receiver 参数可以改变 setter 的 this 对象

Reflect.set(target, propertyKey, value[, receiver])

参数：
- target：设置属性的目标对象
- propertyKey：需要设置的值的键值
- value：设置的值
- receiver（可选）：receiver 为 setter 调用时的 this 值
返回值：一个 Boolean 值表明是否成功设置属性
异常：如果 target 不是 Object，抛出一个 TypeError 异常

has

基本等同于 propertyKey in target，用于检查一个属性是否在某个对象中

Reflect.has(target, propertyKey)

参数：
- target：目标对象
- propertyKey：属性名，需要检查目标对象是否存在此属性
返回值：一个 Boolean 值指示是否存在此属性
异常：如果 target 不是 Object，抛出一个 TypeError 异常

deleteProperty

用于删除属性，类似于 delete 操作符

Reflect.deleteProperty(target, propertyKey)

参数：
- target：目标对象
- propertyKey：属性名
返回值：一个 Boolean 值表明该属性是否被成功删除
异常：如果 target 不是 Object，抛出一个 TypeError 异常

示例：

var obj = { x: 1, y: 2 };
Reflect.deleteProperty(obj, "x"); // true
obj; // { y: 2 }
 
var arr = [1, 2, 3, 4, 5];
Reflect.deleteProperty(arr, "3"); // true
arr; // [1, 2, 3, , 5]
 
// 如果属性不存在，返回 true
Reflect.deleteProperty({}, "foo"); // true
 
// 如果属性不可配置，返回 false
Reflect.deleteProperty(Object.freeze({ foo: 1 }), "foo"); // false

defineProperty

基本等同于 Object.defineProperty()，但返回值略有不同：

Object.defineProperty 返回一个对象，或者如果属性没有被成功定义，抛出一个 TypeError
Reflect.defineProperty 方法只返回一个 Boolean，来说明该属性是否被成功定义

Reflect.defineProperty(target, propertyKey, attributes)

参数：
- target：目标对象
- propertyKey：要定义或修改的属性的名称
- attributes：要定义或修改的属性的描述
返回值：Boolean 值指示了属性是否被成功定义
异常：如果 target 不是 Object，抛出一个 TypeError 异常

getOwnPropertyDescriptor

用于获取对象自身的某个属性的属性描述符，与 Object.getOwnPropertyDescriptor() 方法相似。如果在对象中存在，则返回给定的属性的属性描述符，否则返回 undefined

Reflect.getOwnPropertyDescriptor(target, propertyKey)

参数：
- target：需要寻找属性的目标对象
- propertyKey：获取属性描述符的属性名
返回值：如果属性存在于给定的目标对象中，则返回属性描述符；否则，返回 undefined
异常：如果 target 不是 Object，抛出一个 TypeError 异常

ownKeys

返回一个由目标对象自身的属性键组成的数组，等同于 Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))

Reflect.ownKeys(target)

参数：
- target：目标对象
返回值：由目标对象的自身属性键组成的 Array
异常：如果 target 不是 Object，抛出一个 TypeError 异常

preventExtensions

使一个对象变为不可扩展（阻止新属性添加到对象），基本等同于 Object.preventExtensions()，但有一些不同：

Reflect.preventExtensions() 的第一个参数不是一个对象，将抛出一个 TypeError 异常
Object.preventExtensions() 非对象的第一个参数会被强制转换为一个对象

Reflect.preventExtensions(target)

参数：
- target：目标对象
返回值：一个 Boolean 值表明目标对象是否成功被设置为不可扩展
异常：如果 target 不是 Object，抛出一个 TypeError 异常

isExtensible

判断一个对象是否可扩展（即是否能够添加新的属性）。与 Object.isExtensible() 方法相似，但有一些不同：

Reflect.isExtensible() 的第一个参数不是一个对象，将抛出一个 TypeError 异常
Object.isExtensible() 非对象的第一个参数会被强制转换为一个对象

Reflect.isExtensible(target)

参数：
- target：目标对象
返回值：返回一个 Boolean 值表明该对象是否可扩展
异常：如果 target 不是 Object，抛出一个 TypeError 异常

Proxy

为什么 Proxy 里一定要使用 Reflect？

不使用 Reflect：

const obj = {
    _name: 'test',
    get name() {
        return this._name;
    }
};
const proxyObj = new Proxy(obj, {
    get(target, property, receiver) {
        return target[property];
    },
});
 
const child = {
    _name: 'child'
};
Reflect.setPrototypeOf(child, proxyObj);
 
child.name // test，期望为 child
proxyObj.name // test

因为代理对象的 get 拦截中固定返回的 target[property]，target 永远指向 obj，所以拿到的永远是 obj 的 _name 属性值

const obj = {
    _name: 'test',
    get name(){
        return this._name;
    }
};
const proxyObj = new Proxy(obj,{
    get(target, property, receiver){
        return Reflect.get(target, property, receiver)
    },
});
 
const child = {
    _name: 'child'
};
Reflect.setPrototypeOf(child, proxyObj);
 
child.name // child 
proxyObj.name // test

当使用 Reflect 时可以正确转发运行时上下文，其实主要就是 receiver 这个参数，receiver 代表的是代理对象本身或者继承自代理对象的对象，它表示触发 get 时正确的上下文

My-Notes

全部文章

015.元编程

什么是基本操作

属性访问 (get) 和赋值 (set)

属性删除

属性枚举

函数调用

对象构造

Symbol

Reflect

函数相关

`apply`

construct

`Reflect.construct()` Vs. `Object.create()`：

原型相关

getPrototypeOf

setPrototypeOf

对象相关

get

set

has

deleteProperty

defineProperty

getOwnPropertyDescriptor

ownKeys

preventExtensions

isExtensible

Proxy

为什么 Proxy 里一定要使用 Reflect？

目录

反向链接

关系图谱

My-Notes

全部文章

015.元编程

什么是基本操作

属性访问 (get) 和赋值 (set)

属性删除

属性枚举

函数调用

对象构造

Symbol

Reflect

函数相关

apply

construct

Reflect.construct() Vs. Object.create()：

原型相关

getPrototypeOf

setPrototypeOf

对象相关

get

set

has

deleteProperty

defineProperty

getOwnPropertyDescriptor

ownKeys

preventExtensions

isExtensible

Proxy

为什么 Proxy 里一定要使用 Reflect？

目录

反向链接

关系图谱

`apply`

`Reflect.construct()` Vs. `Object.create()`：