mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-12-16 15:54:22 +08:00
语法高亮，滚动条美化，设置页面调整
This commit is contained in:
fofolee
@@ -7,7 +7,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="Syntax" name="Syntax">语法</h2>
|
||||
<pre class="syntaxbox"><code>eval(<em>string</em>)</code></pre>
|
||||
<pre><code class="language-javascript"><code>eval(<em>string</em>)</code></code></pre>
|
||||
<h3 id="Parameters" name="Parameters">参数</h3>
|
||||
<dl>
|
||||
<dt><code>string</code></dt>
|
||||
@@ -20,43 +20,43 @@
|
||||
<p><code>eval()</code> 的参数是一个字符串。如果字符串表示的是表达式，<span style="font-family: consolas,monaco,andale mono,monospace;"><code>eval()</code> </span>会对表达式进行求值。如果参数表示一个或多个 JavaScript 语句， 那么 <span style="font-family: consolas,monaco,andale mono,monospace;"><code>eval()</code> 就</span>会执行这些语句。注意不要用 <span style="font-family: consolas,monaco,andale mono,monospace;"><code>eval()</code> </span>来执行一个算术表达式；因为 JavaScript 可以自动为算术表达式求值。</p>
|
||||
<p>如果你以字符串的形式构造算术表达式，则可以用 <span style="font-family: consolas,monaco,andale mono,monospace;"><code>eval()</code> </span>在随后对其求值。例如，假设你有一个变量 <code>x</code> ，您可以通过将表达式的字符串值（例如 <code>3 * x + 2</code> ）赋值给一个变量，然后在你的代码后面的其他地方调用 <code>eval()</code> ，来推迟涉及 <code>x</code> 的表达式的求值。</p>
|
||||
<p><font face="Open Sans, Arial, sans-serif">如果 <code>eval()</code> 的参数不是字符串， </font><span style="font-family: consolas,monaco,andale mono,monospace;"><code>eval()</code> </span>将会将参数原封不动的返回。在下面的例子中，<code>String</code> 构造器被指定， 而 <span style="font-family: consolas,monaco,andale mono,monospace;"><code>eval()</code> </span>返回了 <code>String</code> 对象而不是执行字符串。</p>
|
||||
<pre class="brush: js">eval(new String("2 + 2")); // 返回了包含"2 + 2"的字符串对象
|
||||
<pre><code class="language-javascript">eval(new String("2 + 2")); // 返回了包含"2 + 2"的字符串对象
|
||||
eval("2 + 2"); // returns 4
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>你可以使用通用的的方法来绕过这个限制，如使用<code>toString()</code></p>
|
||||
<pre class="brush: js">var expression = new String("2 + 2");
|
||||
<pre><code class="language-javascript">var expression = new String("2 + 2");
|
||||
eval(expression.toString());
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>如果你间接的使用 <span style="font-family: consolas,monaco,andale mono,monospace;">eval()，比如</span>通过一个引用来调用它，而不是直接的调用 <code>eval</code> 。 从 <a class="external" href="http://www.ecma-international.org/ecma-262/5.1/#sec-10.4.2" rel="noopener">ECMAScript 5</a> 起，它工作在全局作用域下，而不是局部作用域中。这就意味着，例如，下面的代码的作用声明创建一个全局函数，并且geval中的这些代码在执行期间不能在被调用的作用域中访问局部变量。</p>
|
||||
<pre class="brush: js">function test() {
|
||||
<pre><code class="language-javascript">function test() {
|
||||
var x = 2, y = 4;
|
||||
console.log(eval("x + y")); // 直接调用，使用本地作用域，结果是 6
|
||||
var geval = eval; // 等价于在全局作用域调用
|
||||
console.log(geval("x + y")); // 间接调用，使用全局作用域，throws ReferenceError 因为`x`未定义
|
||||
<code> (0, eval)('x + y'); // 另一间接调用的例子
|
||||
</code>}</pre>
|
||||
</code>}</code></pre>
|
||||
<h2 id="Don.27t_use_eval.21" name="Don.27t_use_eval.21">避免在不必要的情况下使用 <code>eval</code></h2>
|
||||
<p><code>eval()</code> 是一个危险的函数， 他执行的代码拥有着执行者的权利。如果你用 <code>eval()</code> 运行的字符串代码被恶意方（不怀好意的人）操控修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。更重要的是，第三方代码可以看到某一个eval()被调用时的作用域，这也有可能导致一些不同方式的攻击。相似的 <a href="Reference/Global_Objects/Function" title="Function 构造函数 创建一个新的Function对象。 在 JavaScript 中, 每个函数实际上都是一个Function对象。"><code>Function</code></a> 就不容易被攻击。</p>
|
||||
<p><code>eval()</code> 通常比替代方法慢，因为它必须调用 JS 解释器，而许多其他结构则由现代 JS 引擎进行优化。</p>
|
||||
<p>在常见的案例中我们都会找更安全或者更快的方案去替换 <code>eval()</code></p>
|
||||
<h3 id="访问成员属性">访问成员属性</h3>
|
||||
<p>你不应该去使用 <code>eval()</code> 来将属性名字转化为属性。考虑下面的这个例子，被访问对象的属性在它被执行之前都会未知的。这里可以用 eval 处理：</p>
|
||||
<pre class="brush: js">var obj = { a: 20, b: 30 };
|
||||
<pre><code class="language-javascript">var obj = { a: 20, b: 30 };
|
||||
var propName = getPropName(); <code>// 返回 "a" 或 "b"</code>
|
||||
|
||||
eval( 'var result = obj.' + propsName )</pre>
|
||||
eval( 'var result = obj.' + propsName )</code></pre>
|
||||
<p>但是，这里并不是必须得使用 <code>eval()</code> 。事实上，这里并不建议这样使用。可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">属性访问器</a> 进行代替，它更快而且更安全：</p>
|
||||
<pre class="brush: js">var obj = { a: 20, b: 30 }
|
||||
<pre><code class="language-javascript">var obj = { a: 20, b: 30 }
|
||||
var propName = getPropName();<code> // 返回 "a" 或 "b"</code>
|
||||
var result = obj[ propName ]; <code>// obj[ "a" ] 与 obj.a 等价</code></pre>
|
||||
var result = obj[ propName ]; <code>// obj[ "a" ] 与 obj.a 等价</code></code></pre>
|
||||
<p>你还可以使用这个方法去访问子代的属性。如下：</p>
|
||||
<pre class="brush: js">var obj = {a: {b: {c: 0}}};
|
||||
<pre><code class="language-javascript">var obj = {a: {b: {c: 0}}};
|
||||
var propPath = getPropPath(); // 例如返回 "a.b.c"
|
||||
|
||||
eval( 'var result = obj.' + propPath )
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>在这里避免 <code>eval()</code> 可以通过分割属性路径和循环遍历不同的属性来完成：</p>
|
||||
<pre class="brush: js">function getDescendantantProp(obj, desc) {
|
||||
<pre><code class="language-javascript">function getDescendantantProp(obj, desc) {
|
||||
var arr = desc.split('.');
|
||||
while(arr.length) {
|
||||
obj = obj[arr.shift()];
|
||||
@@ -66,9 +66,9 @@ eval( 'var result = obj.' + propPath )
|
||||
|
||||
var obj = {a: {b: {c: 0}}};
|
||||
var propPath = getPropPath(); // 例如返回 "a.b.c"
|
||||
var result = getDescendantantProp(obj, propPath);</pre>
|
||||
var result = getDescendantantProp(obj, propPath);</code></pre>
|
||||
<p>同样的方法也可实现设置子代的属性值:</p>
|
||||
<pre class="brush: js">function setDescendantProp(obj, desc, value) {
|
||||
<pre><code class="language-javascript">function setDescendantProp(obj, desc, value) {
|
||||
var arr = desc.split('.');
|
||||
while (arr.length > 1) {
|
||||
obj = obj[arr.shift()];
|
||||
@@ -78,14 +78,14 @@ var result = getDescendantantProp(obj, propPath);</pre>
|
||||
|
||||
var obj = {a: {b: {c: 0}}};
|
||||
var propPath = getPropPath(); // 例如返回 "a.b.c"
|
||||
var result = setDescendantProp(obj, propPath, 1); // a.b.c 值为 1</pre>
|
||||
var result = setDescendantProp(obj, propPath, 1); // a.b.c 值为 1</code></pre>
|
||||
<h3 id="使用函数而非代码段">使用函数而非代码段</h3>
|
||||
<p>JavaScript拥有 <a href="/zh-CN/docs/Glossary/First-class_Function" title="http://en.wikipedia.org/wiki/First-class_function">first-class functions</a>，这意味着你可以将函数直接作为参数传递给其他接口，将他们保存在变量中或者对象的属性中，等等。很多DOM的API都用这种思路进行设计，你也可以（或者应该）这样子设计你的代码：</p>
|
||||
<pre class="brush: js">// 代替 setTimeout(" ... ", 1000) 写法:
|
||||
<pre><code class="language-javascript">// 代替 setTimeout(" ... ", 1000) 写法:
|
||||
setTimeout(function() { ... }, 1000);
|
||||
|
||||
// 代替 elt.setAttribute("onclick", "...") 写法:
|
||||
elt.addEventListener('click', function() { ... } , false);</pre>
|
||||
elt.addEventListener('click', function() { ... } , false);</code></pre>
|
||||
<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures" title="JavaScript/Guide/Closures">闭包</a> 也有助于创建参数化函数而不用连接字符串。</p>
|
||||
<h3 id="Parsing_JSON" name="Parsing_JSON">解析 JSON（将字符串转化为JavaScript对象）</h3>
|
||||
<p>如果你在调用 <code>eval()</code> 传入的字符串参数中包含数据（如：一个数组“[1,2,3]”）而不是代码，你应该考虑将其转换为 <a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON">JSON</a> 对象，这允许你用JavaScript语法的子集来表示数据。<a href="/zh-CN/docs/Downloading_JSON_and_JavaScript_in_extensions">在扩展中下载JSON和JavaScript</a></p>
|
||||
@@ -97,26 +97,26 @@ elt.addEventListener('click', function() { ... } , false);</pre>
|
||||
<h2 id="Examples" name="Examples">例子</h2>
|
||||
<h3 id="使用_eval">使用 <code>eval</code></h3>
|
||||
<p>在下面的代码中，两种包含了 <code>eval()</code> 的声明都返回了42。第一种是对字符串 "<code>x + y + 1</code>" 求值；第二种是对字符串 "<code>42</code>"求值。</p>
|
||||
<pre class="brush: js">var x = 2;
|
||||
<pre><code class="language-javascript">var x = 2;
|
||||
var y = 39;
|
||||
var z = "42";
|
||||
eval("x + y + 1"); // returns 42
|
||||
eval(z); // returns 42
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Example:_Using_eval_to_evaluate_a_string_of_JavaScript_statements" name="Example:_Using_eval_to_evaluate_a_string_of_JavaScript_statements">使用 <code>eval</code> 执行一串 JavaScript 语句</h3>
|
||||
<p>下面的例子使用 <code>eval()</code> 来执行 <code>str</code> 字符串。这个字符串包含了如果 <code>x</code> 等于5，就打开一个Alert 对话框并对 <code>z</code> 赋值 42，否则就对 <code>z</code> 赋值 0 的 JavaScript 语句。 当第二个声明被执行，<code>eval()</code> 将会令字符串被执行，并最终返回赋值给 <code>z</code> 的 42。</p>
|
||||
<pre class="brush: js">var x = 5;
|
||||
<pre><code class="language-javascript">var x = 5;
|
||||
var str = "if (x == 5) {alert('z is 42'); z = 42;} else z = 0; ";
|
||||
<code>console.log('z is ', eval(str));</code></pre>
|
||||
<code>console.log('z is ', eval(str));</code></code></pre>
|
||||
<p>如果您定义了多个值，则会返回最后一个值。</p>
|
||||
<pre class="brush: js"><code>var x = 5;
|
||||
<pre><code class="language-javascript"><code>var x = 5;
|
||||
var str = "if (x == 5) {console.log('z is 42'); z = 42; x = 420; } else z = 0;";
|
||||
|
||||
console.log('x is ', eval(str)); // z is 42 x is 420</code>
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="Return_value" name="Return_value">返回值</h3>
|
||||
<p><code>eval</code> 返回最后一个表达式的值。</p>
|
||||
<pre class="brush: js">var str = "if ( a ) { 1+1; } else { 1+2; }";
|
||||
<pre><code class="language-javascript">var str = "if ( a ) { 1+1; } else { 1+2; }";
|
||||
var a = true;
|
||||
var b = eval(str); // returns 2
|
||||
|
||||
@@ -126,13 +126,13 @@ a = false;
|
||||
b = eval(str); // returns 3
|
||||
|
||||
<code>console.log('b is : ' + b);</code>
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="eval_中函数作为字符串被定义需要“（”和“）”作为前缀和后缀"><code>eval</code> 中函数作为字符串被定义需要“（”和“）”作为前缀和后缀</h3>
|
||||
<pre><code>var fctStr1 = 'function a() {}'
|
||||
var fctStr2 = '(function a() {})'
|
||||
var fct1 = eval(fctStr1) // return undefined
|
||||
var fct2 = eval(fctStr2) // return a function</code>
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
<tbody>
|
||||
|
||||
Reference in New Issue
Block a user