2019-04-21 11:50:48 +08:00

150 lines
6.4 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article id="wikiArticle">
<div></div>
<p><strong><code>handler.get()</code></strong> 方法用于拦截对象的读取属性操作。</p>
<h2 id="语法">语法</h2>
<pre><code class="language-javascript">var p = new Proxy(target, {
get: function(target, property, receiver) {
}
});
</code></pre>
<h3 id="参数">参数</h3>
<p>以下是传递给get方法的参数<code>this上下文绑定在</code>handler对象上.</p>
<dl>
<dt><code>target</code></dt>
<dd>目标对象。</dd>
<dt><code>property</code></dt>
<dd>被获取的属性名。</dd>
<dt><code>receiver</code></dt>
<dd>Proxy或者继承Proxy的对象</dd>
</dl>
<h3 id="返回值">返回值</h3>
<p>get方法可以返回任何值。</p>
<h2 id="描述">描述</h2>
<p><strong><code>handler.get</code></strong> 方法用于拦截对象的读取属性操作。</p>
<h3 id="拦截">拦截</h3>
<p>该方法会拦截目标对象的以下操作:</p>
<ul>
<li>访问属性: <code>proxy[foo]和</code> <code>proxy.bar</code></li>
<li>访问原型链上的属性: <code>Object.create(proxy)[foo]</code></li>
<li><a href="Reference/Global_Objects/Reflect/get" title="Reflect.get() 方法的工作方式就像从 object (target[propertyKey]) 中获取属性,但它是作为一个函数执行的。"><code>Reflect.get()</code></a></li>
</ul>
<h3 id="约束">约束</h3>
<p>如果违背了以下的约束proxy会抛出 <a href="Reference/Global_Objects/TypeError" title="TypeError类型错误 对象用来表示值的类型非预期类型时发生的错误。"><code>TypeError</code></a>:</p>
<ul>
<li>如果要访问的目标属性是不可写以及不可配置的,则返回的值必须与该目标属性的值相同。</li>
<li>如果要访问的目标属性没有配置访问方法即get方法是undefined的则返回值必须为undefined。</li>
</ul>
<h2 id="示例">示例</h2>
<p>以下代码演示如何拦截属性值的读取操作。</p>
<pre><code class="language-javascript">var p = new Proxy({}, {
get: function(target, prop, receiver) {
console.log("called: " + prop);
return 10;
}
});
console.log(p.a); // "called: a"
// 10
</code></pre>
<p>以下代码演示违反约束的情况。</p>
<pre><code class="language-javascript">var obj = {};
Object.defineProperty(obj, "a", {
configurable: false,
enumerable: false,
value: 10,
writable: false
});
var p = new Proxy(obj, {
get: function(target, prop) {
return 20;
}
});
p.a; //会抛出TypeError
</code></pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/ecma-262/6.0/#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver" hreflang="en" lang="en" rel="noopener">ECMAScript 2015 (6th Edition, ECMA-262)<br/><small lang="zh-CN">[[Get]]</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td>Initial definition.</td>
</tr>
<tr>
<td><a class="external" href="https://tc39.github.io/ecma262/#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver" hreflang="en" lang="en" rel="noopener">ECMAScript Latest Draft (ECMA-262)<br/><small lang="zh-CN">[[Get]]</small></a></td>
<td><span class="spec-Draft">Draft</span></td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div><div class="blockIndicator warning"><strong><a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">We're converting our compatibility data into a machine-readable JSON format</a></strong>.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
<strong><a class="new" href="/zh-CN/docs/MDN/Contribute/Structures/Compatibility_tables" rel="nofollow">Find out how you can help!</a></strong></div>
<div class="htab">
<a id="AutoCompatibilityTable" name="AutoCompatibilityTable"></a>
<ul>
<li class="selected"><a>Desktop</a></li>
<li><a>Mobile</a></li>
</ul>
</div></div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td>
<td><a href="/en-US/Firefox/Releases/18" title="Released on 2013-01-08.">18</a> (18)</td>
<td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td>
<td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td>
<td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td>
<td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td>
<td>18.0 (18)</td>
<td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td>
<td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td>
<td><span style="color: rgb(255, 153, 0);" title="Compatibility unknown; please update this.">?</span></td>
</tr>
</tbody>
</table>
</div>
<h2 id="另见">另见</h2>
<ul>
<li><a href="Reference/Global_Objects/Proxy" title="Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。"><code>Proxy</code></a></li>
<li><a href="Reference/Global_Objects/Proxy/handler" title="处理器对象用来自定义代理对象的各种可代理操作。"><code>handler</code></a></li>
<li><a href="Reference/Global_Objects/Reflect/get" title="Reflect.get() 方法的工作方式就像从 object (target[propertyKey]) 中获取属性,但它是作为一个函数执行的。"><code>Reflect.get()</code></a></li>
</ul>
</article>