“use strict” 严格模式使用（前端基础系列）

时间：2023-03-08 23:21:46
“use strict” 严格模式使用（前端基础系列）

ECMAscript5添加一种严格模式的运行模式（"use strict"），让你的js语句在更加严格的环境下进行运行；

一、主要作用：

  1. 消除版本javascript中一些不合理及不严谨之处，减少怪异行为
  2. 提高编译效率，提高运行速度
  3. 为新版本的javasript做铺垫兼容

二、如何使用
启动严格模式的标志就是，在开头第一行中添加"use strict"字符串，在低版本的浏览器，或是说js引擎中，只是把这个标志当做一句字符串而已，而支持ES5的浏览器会进行启动“严格模式”；具体有两种调用方式：

  1. 针对整个脚本文件有效
    在js文件的第一行中添加"use strict"，或是在<script>标签中第一行添加标志，则所有后面的语句在严格模式下进行执行；注意，所谓的第一行，表示在 "use strict" 语句之前没有可执行的有效语句（可以在空的分号后面）；当使用合并压缩工具时，就要特别注意； 
    <script type="text/javascript">
    
    "use strict";
    
    // 严格模式
    
    // do something

</script>

<script type="text/javascript">
    
    // 非严格模式
    
    // do something

</script>
  2. 针对单个函数有效
    将 "use strict" 放在函数的第一行，则整个函数有效 
    function strict(){
    
    "use strict";
    
     // 严格模式
    
    // do something
    
}
  3. 更加通用的写法，由于第一种方法，不利于文件的合并，根据针对函数的形式，可以将脚本文件包裹在一个自执行的匿名函数中，这样相当于所有语句都在一个严格模式的函数中执行 
    (function(){
    
    "use strict";
    
    // 严格模式
    
    // do something
    
}())

三、语法与行为变更

  1. 全局变量的显示声明
    正常模式下，对于使用没有进行声明的变量，编译时默认改变量为全局变量（添加到window对象的属性中，可以使用delete进行删除），而严格模式下进行了限制，使用变量前必须声明(var/let/const)； 
    function strict(){
    
    "use strict";
    
     name = "ukerxi";
    
     console.log(name);
    
}

function noStrict(){
    
     name = "ukerxi";
    
     console.log(name);
    
}

// 执行函数
    
strict(); // 报 Uncaught ReferenceError: name is not defined（引用错误）
    
noStrict(); // ==> 'ukerxi'
  1. 禁止使用with语句
    正常模式下with语句允许当前代码执行在新的变量对象中，即改变了执行环境；在严格模式下，已经禁止使用with语句，由于只有运行时才知道语句的执行环境，所以执行非常耗时缓慢； 
    var foo = {
    
  name: "ukerxi",
    
  hobby: 'no'
    
};

with(foo){
    
  console.log(name); // ==> 'ukerxi'
    
}
  1. 创设eval的作用域
    正常模式下，Javascript语言有两种变量作用域（scope）：全局作用域和函数作用域。严格模式创设了第三种作用域：eval作用域。
    正常模式下，eval语句的作用域，取决于它处于全局作用域，还是处于函数作用域。严格模式下，eval语句本身就是一个作用域，不再能够生成全局变量了，它所生成的变量只能用于eval内部; 
    "use strict";
    
var name = 'ukerxi';
    
eval('var name = "originEval";');
    
console.log(name); // ==> "ukerxi"

    但是存在一种情况，就是当你使用变量进行缓存eval函数时，再使用缓存变量进行执行操作，会产生正常模式下执行eval函数的效果（暂时不知道这个bug是语言本身的设计，还是其他原因导致的）

    "use strict";
    
var name = 'ukerxi';
    
var globalEval = eval; // 缓存一个全局的eval函数
    
eval('var name = "originEval";');
    
console.log(name); // ==> "ukerxi" 

// 使用缓存进行执行函数，会导致变更作用域
    
globalEval('var name = "globalEval";');
    
console.log(name); // ==> "globalEval"
  1. 禁止this执行全局对象，默认指向undefined 
    "use strict";
    
console.log(this); // ==> undefined
  2. 禁止使用arguments.caller和arguments.callee进行调用自身及被调用函数 
    "use strict";
    
function testHandle(){
    
    console.log(arguments.caller); // 报错
    
    console.log(arguments.callee); // 报错
    
}
  3. 禁止修改arguments变量参数对象，arguments不再追踪参数的变化 
    "use strict";
    
function testHandle(){
    
   arguments = "test"; // 报语法错误
    
}
  4. 禁止删除变量 
    "use strict";
    
var name = "ukerxi";
    
delete name; // 报错
  5. 重名错误（函数参数重名&&对象重名属性） 
    "use strict";
    
// 属性重名报错
    
var testObj = {
    
    name: "ukerxi",
    
    name: "test"
    
};

// 参数重名报错
    
function testHandle(a, a, b){
    
    // do something
    
}
  6. 禁止八进制表示法 
    "use strict";
    
var n = 0100; // 语法错误
  7. 函数必须声明在顶层
    Javascript的新版本会引入"块级作用域"。为了与新版本接轨，严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说，不允许在非函数的代码块内声明函数 
    "use strict";
    
if (true) {
    
  function f() { } // 语法错误
    
}
    
for (var i = 0; i < 5; i++) {
    
  function f2() { } // 语法错误
    
}
  8. 针对对象的操作，对于声明只读属性的对象不可修改，删除不可删除的属性报错 
    "use strict";
    
var foo = {};
    
// 只读属性的对象不可修改
    
Object.defineProperty(foo, "v", { value: 1, writable: false });
    
foo.v = 2; // 报错

// 删除不可删除的属性报错
    
delete Object.prototype; // 报错

// 严格模式下，对一个使用getter方法读取的属性进行赋值，会报错
    
var foo1 = {
    
　　get v() { return 1; }
    
};
    
foo1.v = 2; // 报错

// 严格模式下，对禁止扩展的对象添加新属性，会报错。
    
var foo2 = {};
    
Object.preventExtensions(foo2);
    
foo2.v = 2; // 报错
  9. 保留字
    为了向将来Javascript的新版本过渡，严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。(主要是与类有关的保留字，和java类的关键字)

【参考链接】

  1. 阮一峰个人博客：http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

【结束语】

系列文章，包括了原创，翻译，转载等各类型的文章；一方面是为了自己总结，另一方面页希望可以共享知识；在技术方面有输入，也要有所输出，才能更进一步！文章基于自己的实践、阅读及理解，如有不合理及错误的地方，烦请各大佬评论指出，以便改正，感谢！

相关文章