补环境知识总结：对象类型与属性详解#

1
const target = {
2
    value: 42,
3
    getData: function() {
4
        return this.value;  // this 应该指向 target
5
    }
6
};
7

8
const proxy = new Proxy(target, {
9
    get(target, property, receiver) {
10
        const value = target[property];
11
        return value;  // 问题：函数被返回后，this 不再是 target
12
    }
13
});
14

15
proxy.getData();  // this 指向 proxy，而不是 target
16
// this.value === undefined（proxy 没有 value 属性）

1
set(target, property, newValue, receiver) {
2
    // 必须使用 Reflect.set 保持 receiver 上下文
3
    // 否则 this 的属性修改会作用在错误的对象上
4
    return Reflect.set(target, property, newValue, receiver);
5
}

1
// 数据描述符：有 value 的属性
2
Object.defineProperty(obj, 'prop1', {
3
    value: 123,
4
    writable: true,      // 可写
5
    enumerable: true,     // 可枚举
6
    configurable: true   // 可配置
7
});
8

9
// 访问器描述符：有 get/set 的属性
10
Object.defineProperty(obj, 'prop2', {
11
    get: function() { return 456; },
12
    set: function(v) { console.log('set:', v); },
13
    enumerable: true,
14
    configurable: true
15
});

1
// 检测方法1：直接访问
2
obj.prop1;  // 返回 value
3
obj.prop2;  // 调用 get
4

5
// 检测方法2：Object.getOwnPropertyDescriptor
6
const desc = Object.getOwnPropertyDescriptor(obj, 'prop');
7
if (desc) {
8
    console.log('value' in desc);      // 数据描述符有 value
9
    console.log('get' in desc);        // 访问器描述符有 get
10
    console.log('writable:', desc.writable);
11
    console.log('enumerable:', desc.enumerable);
12
    console.log('configurable:', desc.configurable);
13
}
14

15
// 检测方法3：Object.keys / for...in
16
Object.keys(obj);           // 只返回 enumerable:true 的属性
17
for (const k in obj) {}     // 遍历 enumerable:true 的属性
18

19
// 检测方法4：JSON.stringify
20
JSON.stringify(obj);        // 只序列化 enumerable:true 的属性

1
// 浏览器中，navigator.userAgent 是访问器描述符
2
const desc = Object.getOwnPropertyDescriptor(navigator, 'userAgent');
3
// { get: [Function], set: undefined, enumerable: true, configurable: true }
4

5
// 而我们自己定义的属性可能是数据描述符
6
const fakeNav = { userAgent: '...' };
7
// { value: '...', writable: true, enumerable: true, configurable: true }
8

9
// 检测代码可能区分这两种
10
if (desc.get) {
11
    // 浏览器原生的
12
} else {
13
    // 可能是伪造的
14
}

1
// 模拟浏览器使用 getter
2
Object.defineProperty(fakeNavigator, 'userAgent', {
3
    get: function() { return 'Mozilla/5.0...'; },
4
    enumerable: true,
5
    configurable: true
6
});
7

8
// 模拟只读属性
9
Object.defineProperty(fakeNavigator, 'appName', {
10
    value: 'Netscape',
11
    writable: false,       // 不可写
12
    enumerable: true,
13
    configurable: false    // 不可删除
14
});
15

16
// 模拟 Symbol 属性
17
Object.defineProperty(fakeNavigator, Symbol.toStringTag, {
18
    value: 'Navigator',
19
    writable: false,
20
    enumerable: false,     // Symbol 属性默认不可枚举
21
    configurable: false
22
});

1
window
2
├── document
3
│   ├── createElement()
4
│   ├── createEvent()
5
│   ├── createTextNode()
6
│   ├── getElementById()
7
│   ├── getElementsByTagName()
8
│   ├── querySelector()
9
│   ├── querySelectorAll()
10
│   ├── head (Element)
11
│   ├── body (Element)
12
│   └── cookie (String)
13
├── navigator
14
│   ├── userAgent (String)
15
│   ├── platform (String)
16
│   ├── language (String)
17
│   ├── languages (Array)
18
│   ├── appName (String)
19
│   ├── appVersion (String)
20
│   ├── hardwareConcurrency (Number)
21
│   ├── deviceMemory (Number)
22
│   ├── webdriver (Boolean)
23
│   ├── plugins (PluginArray)
24
│   └── connection (NetworkInfo)
25
├── location
26
│   ├── href (String)
27
│   ├── protocol (String)
28
│   ├── host (String)
29
│   ├── hostname (String)
30
│   ├── pathname (String)
31
│   ├── search (String)
32
│   ├── hash (String)
33
│   ├── assign()
34
│   ├── replace()
35
│   └── reload()
36
├── screen
37
│   ├── width (Number)
38
│   ├── height (Number)
39
│   ├── availWidth (Number)
40
│   ├── availHeight (Number)
41
│   ├── colorDepth (Number)
42
│   └── pixelDepth (Number)
43
├── history
44
│   ├── length (Number)
45
│   ├── back()
46
│   ├── forward()
47
│   └── go()
48
├── localStorage
49
│   ├── getItem()
50
│   ├── setItem()
51
│   ├── removeItem()
52
│   ├── clear()
53
│   └── key()
54
├── sessionStorage (同 localStorage)
55
└── chrome (Object)
56
    └── runtime (Object)

1
Window
2
├── Symbol.toStringTag = 'Window'
3
└── Symbol.toPrimitive
4

5
Navigator
6
├── Symbol.toStringTag = 'Navigator'
7
└── Symbol.toPrimitive
8

9
Document / HTMLDocument
10
├── Symbol.toStringTag = 'HTMLDocument'
11
└── Symbol.toPrimitive
12

13
Element / HTMLElement
14
├── Symbol.toStringTag = 'HTMLDivElement' (等)
15
└── Symbol.iterator (for...of 支持)
16

17
Location
18
├── Symbol.toStringTag = 'Location'
19
└── Symbol.toPrimitive
20

21
Array
22
├── Symbol.toStringTag = 'Array'
23
├── Symbol.iterator
24
└── Symbol.isConcatSpreadable
25

26
Object
27
├── Symbol.toString
28
└── Symbol.hasInstance

1
EventTarget
2
└── prototype
3
    ├── addEventListener()
4
    ├── removeEventListener()
5
    └── dispatchEvent()
6

7
Node (extends EventTarget)
8
└── prototype
9
    ├── appendChild()
10
    ├── removeChild()
11
    ├── insertBefore()
12
    ├── getAttribute()
13
    ├── setAttribute()
14
    └── textContent
15

16
Window (extends WindowProperties -> EventTarget)
17
└── prototype
18
    ├── alert()
19
    ├── confirm()
20
    ├── setTimeout()
21
    ├── setInterval()
22
    ├── eval()
23
    ├── document
24
    ├── navigator
25
    ├── location
26
    └── ...
27

28
HTMLDocument
29
└── prototype
30
    ├── getElementById()
31
    ├── getElementsByTagName()
32
    ├── querySelector()
33
    └── ...
34

35
HTMLElement
36
└── prototype
37
    ├── style
38
    ├── innerHTML
39
    ├── textContent
40
    ├── appendChild()
41
    └── ...

1
// 必须在加载目标代码前删除
2
delete global.Buffer;
3
delete global.process;
4
delete global.module;
5
delete global.exports;
6
delete global.require;
7
delete global.__dirname;
8
delete global.__filename;
9
delete Error.prepareStackTrace;

1
// 关键：get 时绑定 this
2
get(target, property, receiver) {
3
    const value = target[property];
4
    if (typeof value === 'function') {
5
        return value.bind(target);  // 或使用 Reflect.get
6
    }
7
    return value;
8
}
9

10
// 关键：set 时保持 receiver
11
set(target, property, newValue, receiver) {
12
    return Reflect.set(target, property, newValue, receiver);
13
}