“use strict” 严格模式使用(前端基础系列)
ECMAscript5添加一种严格模式的运行模式("use strict"),让你的js语句在更加严格的环境下进行运行;
一、主要作用:
- 消除版本javascript中一些不合理及不严谨之处,减少怪异行为
- 提高编译效率,提高运行速度
- 为新版本的javasript做铺垫兼容
二、如何使用
启动严格模式的标志就是,在开头第一行中添加"use strict"字符串,在低版本的浏览器,或是说js引擎中,只是把这个标志当做一句字符串而已,而支持ES5的浏览器会进行启动“严格模式”;具体有两种调用方式:
- 针对整个脚本文件有效
在js文件的第一行中添加"use strict",或是在<script>标签中第一行添加标志,则所有后面的语句在严格模式下进行执行;注意,所谓的第一行,表示在 "use strict" 语句之前没有可执行的有效语句(可以在空的分号后面);当使用合并压缩工具时,就要特别注意;<script type="text/javascript">
"use strict";
// 严格模式
// do something </script> <script type="text/javascript">
// 非严格模式
// do something </script> - 针对单个函数有效
将 "use strict" 放在函数的第一行,则整个函数有效function strict(){
"use strict";
// 严格模式
// do something
} - 更加通用的写法,由于第一种方法,不利于文件的合并,根据针对函数的形式,可以将脚本文件包裹在一个自执行的匿名函数中,这样相当于所有语句都在一个严格模式的函数中执行
(function(){
"use strict";
// 严格模式
// do something
}())
三、语法与行为变更
- 全局变量的显示声明
正常模式下,对于使用没有进行声明的变量,编译时默认改变量为全局变量(添加到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'
- 禁止使用with语句
正常模式下with语句允许当前代码执行在新的变量对象中,即改变了执行环境;在严格模式下,已经禁止使用with语句,由于只有运行时才知道语句的执行环境,所以执行非常耗时缓慢;var foo = {
name: "ukerxi",
hobby: 'no'
}; with(foo){
console.log(name); // ==> 'ukerxi'
}
- 创设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"
- 禁止this执行全局对象,默认指向undefined
"use strict";
console.log(this); // ==> undefined - 禁止使用arguments.caller和arguments.callee进行调用自身及被调用函数
"use strict";
function testHandle(){
console.log(arguments.caller); // 报错
console.log(arguments.callee); // 报错
} - 禁止修改arguments变量参数对象,arguments不再追踪参数的变化
"use strict";
function testHandle(){
arguments = "test"; // 报语法错误
} - 禁止删除变量
"use strict";
var name = "ukerxi";
delete name; // 报错 - 重名错误(函数参数重名&&对象重名属性)
"use strict";
// 属性重名报错
var testObj = {
name: "ukerxi",
name: "test"
}; // 参数重名报错
function testHandle(a, a, b){
// do something
} - 禁止八进制表示法
"use strict";
var n = 0100; // 语法错误 - 函数必须声明在顶层
Javascript的新版本会引入"块级作用域"。为了与新版本接轨,严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说,不允许在非函数的代码块内声明函数"use strict";
if (true) {
function f() { } // 语法错误
}
for (var i = 0; i < 5; i++) {
function f2() { } // 语法错误
} - 针对对象的操作,对于声明只读属性的对象不可修改,删除不可删除的属性报错
"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; // 报错 - 保留字
为了向将来Javascript的新版本过渡,严格模式新增了一些保留字:implements, interface, let, package, private, protected, public, static, yield。(主要是与类有关的保留字,和java类的关键字)
【参考链接】
【结束语】
系列文章,包括了原创,翻译,转载等各类型的文章;一方面是为了自己总结,另一方面页希望可以共享知识;在技术方面有输入,也要有所输出,才能更进一步!文章基于自己的实践、阅读及理解,如有不合理及错误的地方,烦请各大佬评论指出,以便改正,感谢!
“use strict” 严格模式使用(前端基础系列)的更多相关文章
- navigator.userAgent浏览器检测(前端基础系列)
对于前端来说,浏览器检测已经不陌生了,在做一些页面是,需要针对不同的浏览器进行处理不同的逻辑,最简单的就是区分pc和移动端的浏览器,或是android 和ios下的浏览器. 一.浏览器检测的由来? ...
- js作用域与执行环境(前端基础系列)
一.作用域(what?) 官方解释是:"一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域." 单从文字理解比较难懂,举个栗子: ...
- javascript 命名空间与运用(前端基础系列)
所谓代码,当你随便命名一个变量:var name = "ukerxi"; 就是一句代码:但当你的代码写出来后,对于后续维护及阅读的人,就可以看出代码是否,易读,易理解:优雅的代码总 ...
- 前端基础系列——CSS规范(文章内容为转载)
原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...
- 【前端基础系列】slice方法将类数组转换数组实现原理
问题描述 在日常编码中会遇到将类数组对象转换为数组的问题,其中常用到的一种方式使用Array.prototype.slice()方法. 类数组对象 所谓的类数组对象,JavaScript对它们定义为: ...
- 【前端基础系列】理解bind方法使用与实现
方法描述 bind()方法创建一个新函数,当被调用时,将其this关键字设置为提供的值. 语法说明 fn.bind(thisArg,arg1,arg2,..) 参数说明 thisArg:当绑定函数被调 ...
- 【前端基础系列】理解GET与POST请求区别
语义区别 GET请求用于获取数据 POST请求用于提交数据 缓存 GET请求能被缓存,以相同的URL再去GET请求会返回304 POST请求不能缓存 数据长度 HTTP协议从未规定过GET/POST请 ...
- 【C++自我精讲】基础系列六 PIMPL模式
[C++自我精讲]基础系列六 PIMPL模式 0 前言 很实用的一种基础模式. 1 PIMPL解释 PIMPL(Private Implementation 或 Pointer to Implemen ...
- 前端基础之JavaScript day51
前端基础之JavaScript JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中) ...
随机推荐
- 动态加载js,css(项目中需要的)
最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面 ...
- python基础6 迭代器 生成器
可迭代的:内部含有__iter__方法的数据类型叫可迭代的,也叫迭代对象实现了迭代协议的对象 运用dir()方法来测试一个数据类型是不是可迭代的的. 迭代器协议是指:对象需要提供next方法,它要么返 ...
- 关于在 IntellIj IDEA中JSP页面 cannot resolve method getParameter("")的解决方案
File->Project Structure->Libraries,然后点加号,将Tomcat lib文件夹下的servlet.jar和servlet-api.jar包导入.
- 浅谈MES系统SMT的JIT功能(一):JIT原理
前段时间帮忙客户实现了MES系统的SMT线上的JIT功能(JIT功能只适合电子行业的生产线),今天就来谈谈JIT功能是什么,为什么工厂车间需要用到JIT等等一些经验 首先说说JIT: 准时制生产方式( ...
- c++学习笔记---06--- 函数的重载
函数的重载 函数的重载 C++ 里的函数重载(overloading)机制比我们此前见到的东西都高深,这种语言的灵活性和强大功能在它身上体现得淋漓尽致. 所谓函数重载的实质就是用同样的名字再定义一个有 ...
- HTML学习笔记 css定位(静态,相对,固定,绝对布局)偏移案例 第十二节 (原创) 参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Webpack打包构建太慢了?试试几个方法
Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...
- 【WEB API项目实战干货系列】- WEB API入门(一)
这篇做为这个系列的第一篇,做基本的介绍,有经验的人可以直接跳到第二部分创建 ProductController. 创建 Web API 项目 在这里我们使用VS2013, .NET 4.5.1创建 ...
- 简单聊聊java中如何判定一个对象可回收
背景 说到java的特性,其中一个最重要的特性便是java通过new在堆中分配给对象的内存,不需要程序员主动去释放,而是由java虚拟机自动的回收.这也是java和C++的主要区别之一:那么虚拟机是如 ...
- C#中float, double的精度问题
在工作中我发现了一个C#浮点数的精度问题,以下的程序运行结果并未得到我预期的结果: view source print? 01 namespace FloatTest 02 03 class ...