当前位置:首页 > JavaScript

js 实现反射

2026-02-02 02:40:08JavaScript

反射的基本概念

反射是指在运行时动态获取和操作对象属性和方法的能力。JavaScript 提供了多种方式实现反射功能,主要通过内置对象和方法实现。

获取对象属性

使用 Object.keys() 可以获取对象所有可枚举属性的键名数组:

const obj = { a: 1, b: 2 };
const keys = Object.keys(obj); // ['a', 'b']

Object.getOwnPropertyNames() 会返回对象所有属性(包括不可枚举属性):

const obj = {};
Object.defineProperty(obj, 'hidden', { value: true, enumerable: false });
const props = Object.getOwnPropertyNames(obj); // ['hidden']

检查属性存在性

in 操作符可以检查对象或其原型链上是否存在指定属性:

const obj = { a: 1 };
console.log('a' in obj); // true
console.log('toString' in obj); // true(继承自原型)

Object.prototype.hasOwnProperty() 只检查对象自身属性:

const obj = { a: 1 };
console.log(obj.hasOwnProperty('a')); // true
console.log(obj.hasOwnProperty('toString')); // false

动态访问属性

使用方括号表示法可以动态访问属性:

const obj = { key: 'value' };
const propName = 'key';
console.log(obj[propName]); // 'value'

方法调用

可以通过字符串形式动态调用方法:

const obj = {
  greet: function(name) { return `Hello ${name}`; }
};
const methodName = 'greet';
console.log(obj[methodName]('World')); // 'Hello World'

修改对象结构

Reflect API 提供了更完整的反射操作:

const obj = {};
Reflect.set(obj, 'key', 'value'); // 等价于 obj.key = 'value'
console.log(Reflect.get(obj, 'key')); // 'value'

原型操作

通过 Object.getPrototypeOf()Object.setPrototypeOf() 可以操作原型链:

const parent = { inherited: true };
const child = {};
Object.setPrototypeOf(child, parent);
console.log(Object.getPrototypeOf(child) === parent); // true

构造函数调用

使用 Reflect.construct() 可以动态调用构造函数:

class Person {
  constructor(name) { this.name = name; }
}
const instance = Reflect.construct(Person, ['Alice']);
console.log(instance.name); // 'Alice'

属性描述符操作

Object.getOwnPropertyDescriptor() 可以获取属性配置:

const obj = {};
Object.defineProperty(obj, 'readOnly', { value: 1, writable: false });
const desc = Object.getOwnPropertyDescriptor(obj, 'readOnly');
console.log(desc.writable); // false

js 实现反射

标签: 反射js
分享给朋友:

相关文章

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与…

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以直…

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现打印

js实现打印

使用window.print()方法实现打印 在JavaScript中,可以通过调用window.print()方法直接触发浏览器的打印功能。这会打开系统的打印对话框,用户可以选择打印机和设置打印选项…

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Paren…