Skip to content

Commit 6d19921

Browse files
committed
docs(proxy): fix this #1014
1 parent 3ee1320 commit 6d19921

3 files changed

Lines changed: 185 additions & 516 deletions

File tree

docs/proxy.md

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -663,7 +663,7 @@ new p() // 报错
663663
```javascript
664664
const handler = {
665665
construct: function(target, args) {
666-
console.log(this === handler);
666+
console.log(this === handler);
667667
return new target(...args);
668668
}
669669
}
@@ -1070,8 +1070,6 @@ proxy.foo // TypeError: Revoked
10701070

10711071
## this 问题
10721072

1073-
正常情况下,Proxy代理的钩子函数中的`this`指向的是Proxy代理实例(construct钩子函数除外,该钩子函数中`this`指向的是handler)
1074-
10751073
虽然 Proxy 可以代理针对目标对象的访问,但它不是目标对象的透明代理,即不做任何拦截的情况下,也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下,目标对象内部的`this`关键字会指向 Proxy 代理。
10761074

10771075
```javascript
@@ -1088,7 +1086,7 @@ target.m() // false
10881086
proxy.m() // true
10891087
```
10901088

1091-
上面代码中,一旦`proxy`代理`target.m`,后者内部的`this`就是指向`proxy`,而不是`target`
1089+
上面代码中,一旦`proxy`代理`target``target.m()`内部的`this`就是指向`proxy`,而不是`target`
10921090

10931091
下面是一个例子,由于`this`指向的变化,导致 Proxy 无法代理目标对象。
10941092

@@ -1141,6 +1139,33 @@ const proxy = new Proxy(target, handler);
11411139
proxy.getDate() // 1
11421140
```
11431141

1142+
另外,Proxy 拦截函数内部的`this`,指向的是`handler`对象。
1143+
1144+
```javascript
1145+
const handler = {
1146+
get: function (target, key, receiver) {
1147+
console.log(this === handler);
1148+
return 'Hello, ' + key;
1149+
},
1150+
set: function (target, key, value) {
1151+
console.log(this === handler);
1152+
target[key] = value;
1153+
return true;
1154+
}
1155+
};
1156+
1157+
const proxy = new Proxy({}, handler);
1158+
1159+
proxy.foo
1160+
// true
1161+
// Hello, foo
1162+
1163+
proxy.foo = 1
1164+
// true
1165+
```
1166+
1167+
上面例子中,`get()``set()`拦截函数内部的`this`,指向的都是`handler`对象。
1168+
11441169
## 实例:Web 服务的客户端
11451170

11461171
Proxy 对象可以拦截目标对象的任意属性,这使得它很合适用来写 Web 服务的客户端。

0 commit comments

Comments
 (0)