uTools-Manuals/docs/javascript/Reference/Strict_mode/Transitioning_to_strict_mode.html

<article id="wikiArticle">
<p></p><p></p>
<p>ECMAScript 5 引入了 <a href="/zh-CN/docs/JavaScript/Strict_mode" title="/zh-CN/docs/JavaScript/Strict_mode">strict mode</a> ,现在已经被大多浏览器实现(包括IE10. 会使web浏览器更容易的解析代码(只需要添加 <code>"use strict";</code> 在源码的最上面), 由现有的代码到严格模式的过渡需要一些事做.</p>
<p>该文章旨在为开发者提供指南.</p>
<h2 id="逐步过渡">逐步过渡</h2>
<p>严格模式被仔细设计过，因此可以逐渐地进行迁移。你可以分别改变各个文件，甚至以函数级的粒度迁移至严格模式。</p>
<h2 id="非严格模式到严格模式的区别">非严格模式到严格模式的区别</h2>
<h3 id="语法错误">语法错误</h3>
<p>如果代码中使用<code>"use strict"开启了严格模式</code>,则下面的情况都会在脚本运行之前抛出<a class="new" href="/zh-CN/docs/Core_JavaScript_1.5_Guide/SyntaxError" rel="nofollow" title="/zh-CN/docs/Core_JavaScript_1.5_Guide/SyntaxError">SyntaxError</a>异常:</p>
<ul>
<li>八进制语法<code>:var n = 023和var s = "\047"</code></li>
<li><a class="new" href="https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Statements/with" rel="nofollow" title="/zh-CN/docs/JavaScript/Reference/Statements/with"><code>with</code></a>语句</li>
<li>使用<a href="https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Operators/delete" title="/zh-CN/docs/JavaScript/Reference/Operators/delete">delete</a>删除一个变量名(而不是属性名)<code>:delete myVariable</code></li>
<li>使用<code>eval</code>或<code>arguments</code>作为变量名或函数名</li>
<li>使用未来保留字(也许会在ECMAScript 6中使用):<code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>,和<code>yield</code>作为变量名或函数名</li>
<li>在语句块中使用函数声明:<code>if(a&lt;b){ function f(){} }</code></li>
<li>其他错误
  <ul>
<li>对象字面量中使用两个相同的属性名:<code>{a: 1, b: 3, a: 7}</code></li>
<li>函数形参中使用两个相同的参数名:<code>function f(a, b, b){}</code></li>
</ul>
</li>
</ul>
<p>这些错误是有利的，因为可以揭示简陋的错误和坏的实践，这些错误会在代码运行前被抛出</p>
<h3 id="新的运行时错误">新的运行时错误</h3>
<p>JavaScript曾经会在一些上下文的某些情况中静默的失败，严格模式会在这些情况下抛出错误。如果你的代码包含这样的场景，请务必测试以确保没有代码受到影响。再说一次，严格模式是可以设置在代码粒度下的。</p>
<h4 id="给一个未声明的变量赋值">给一个未声明的变量赋值</h4>
<pre class="brush: js">function f(x){
  "use strict";
  var a = 12;
  b = a + x*35; // error!
}
f();
</pre>
<p>改变一个全局对象的值可能会造成不可预期的后果。如果你真的想设置一个全局对象的值，把他作为一个参数并且明确的把它作为一个属性：</p>
<pre class="brush: js">var global = this; // in the top-level context, "this" always refers the global object
function f(){
  "use strict";
  var a = 12;
  global.b = a + x*35;
}
f();
</pre>
<h4 id="尝试删除一个不可配置的属性">尝试删除一个不可配置的属性</h4>
<pre class="brush: js">"use strict";
delete Object.prototype; // error!
</pre>
<p>在非严格模式中,这样的代码只会静默失败,这样可能会导致用户误以为删除操作成功了.</p>
<h4 id="arguments对象和函数属性">arguments对象和函数属性</h4>
<p>在严格模式下,访问<code>arguments.callee</code>, <code>arguments.caller</code>, <code>anyFunction.caller</code>以及<code>anyFunction.arguments</code>都会抛出异常.唯一合法的使用应该是在其中命名一个函数并且重用之</p>
<pre class="brush: js">// example taken from vanillajs: http://vanilla-js.com/
var s = document.getElementById('thing').style;
s.opacity = 1;
(function(){ 
  if((s.opacity-=.1) &lt; 0)
    s.display="none";
  else
    setTimeout(arguments.callee, 40);
})();</pre>
<p>可以重新写成:</p>
<pre class="brush: js">"use strict";
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fadeOut(){ // name the function
  if((s.opacity-=.1) &lt; 0)
    s.display="none";
  else
    setTimeout(fadeOut, 40); // use the name of the function
})();</pre>
<h3 id="语义差异">语义差异</h3>
<p>这些差异都是一些微小的差异。有可能单元测试没办法捕获这种微小的差异。你很有必要去小心地审查你的代码，来确保这些差异不会影响你代码的语义。幸运的是，这种小心地代码审查可以逐函数地完成。</p>
<h4 id="函数调用中的this">函数调用中的<code>this</code></h4>
<p>在普通的函数调用<code>f()中</code>,<code>this</code>的值会指向全局对象.在严格模式中,<code>this</code>的值会指向<code>undefined</code>.当函数通过<a class="new" href="/zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/call" rel="nofollow" title="/zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/call">call</a>和<a class="new" href="/zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply" rel="nofollow" title="/zh-CN/docs/Core_JavaScript_1.5_Reference/Global_Objects/Function/apply">apply</a>调用时,如果传入的<code>thisvalue</code>参数是一个<code>null</code>和<code>undefined</code>除外的原始值(字符串,数字,布尔值),则<code>this的值会成为那个原始值对应的包装对象</code>,如果<code>thisvalue</code>参数的值是<code>undefined</code>或<code>null</code>,则<code>this的值会指向全局对象</code>.在严格模式中,<code>this的值就是</code><code>thisvalue</code>参数的值,没有任何类型转换.</p>
<h4 id="arguments对象属性不与对应的形参变量同步更新"><code>arguments</code>对象属性不与对应的形参变量同步更新</h4>
<p>在非严格模式中,修改<code>arguments</code>对象中某个索引属性的值,和这个属性对应的形参变量的值也会同时变化,反之亦然.这会让JavaScript的代码混淆引擎让代码变得更难读和理解。在严格模式中<code><span style="font-family: courier,andale mono,monospace;">arguments 对象会以形参变量的拷贝的形式被创建和初始化，因此 arguments 对象的改变不会影响形参。</span></code></p>
<h4 id="eval相关的区别"><code>eval相关的区别</code></h4>
<p>在严格模式中,<code>eval</code>不会在当前的作用域内创建新的变量.另外,传入eval的字符串参数也会按照严格模式来解析.你需要全面测试来确保没有代码收到影响。另外，<span style="font-family: courier,andale mono,monospace;">如果你并不是为了解决一个非常实际的解决方案中，</span>尽量不要使用<code>eval。</code></p>
<h2 id="严格中立的代码">严格中立的代码</h2>
<p>迁移严格代码至严格模式的一个潜在消极面是，在遗留的老版本浏览器上，由于没有实现严格模式，javascript语义可能会有所不同。在一些罕见的机会下（比如差劲的关联关系或者代码最小化），你的代码可能不能按照你书写或者测试里的模式那样运行。这里有一些让你的代码保持中立的规范：</p>
<ol>
<li>按照严格模式书写你的代码，并且确保你的代码不会发生仅仅在严格模式下发生的错误（比如上文所说的<a href="#">运行时错误</a>）</li>
<li>远离语义差异
  <ol>
<li><code>eval</code>: 仅仅在你知道你在干什么的情况下使用它</li>
<li><code>arguments</code>: 总是通过形参的名字获取函数参数，或者在函数的第一行拷贝arguments <br/>
<code>var args = Array.prototype.slice.call(arguments)</code></li>
<li><code>this</code>: 仅在this指向你自己创建的对象时使用它 </li>
</ol>
</li>
</ol>
</article>