[Web 前端] ECMAScript5之StrictMode
cp from : https://www.cnblogs.com/giggle/p/5252185.html
ECMAScript5引入一个严格模式的概念(Strict Mode)。
它的作用就是不让Javascript的容错那么高,让我们对编写代码的规范要求高一点。
比如,当我们使用严格模式编写JavaScript代码时,我们不能隐式的申明变量,必须带var。
那怎么使用严格模式(Strict Mode)呢?
当我们想让代码启动严格模式(Strict Mode)时,我们可以在代码的开头或者函数function的开头中添加”use strict”。
倘若我们在整个代码中启用严格模式(Strict Mode),那么所有代码都必须遵循严格模式的规范;
倘若我们在一个function中启用,那么只在这个function中,得遵循严格模式的规范。
我们一起来写个demo,体验体验下。

<!DOCTYPE html>
<head>
<title>strict mode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
//启用严格模式
"use strict";
function testFunction(){
var testvar = 4;
return testvar;
}
//This causes a syntax error.
testvar = 5;
</script>
</body>
</html>

在上面的demo中,我在整个代码中启用严格模式,但我在function的外部声明变量时,没有加var,因此不符合严格模式规范,所以运行代码时会报错。

哈,有点意思。
刚才我们是在整个代码中启用严格模式,下面我们再来写个demo,在function里启用严格模式。

<!DOCTYPE html>
<head>
<title>strict mode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function testFunction(){
"use strict";
testvar = 4;
return testvar;
}
testvar = 5;
</script>
</body>
</html>

打开chrome调试器:

纳尼!!怎么没有报错?!!
我们再看看上面的代码,哈哈哈,原来是我们没有调用testFunction嘛,既然没执行它,它怎么会启用严格模式呢?
修改代码如下:

<!DOCTYPE html>
<head>
<title>strict mode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function testFunction(){
"use strict";
testvar = 4;
return testvar;
}
//调用testFunction
testFunction();
testvar = 5;
</script>
</body>
</html>

再看看chrome结果:

哇咔哇咔,严格模式还是挺严格的嘛,如果我们在写代码中,想启用的严格模式,那就得注意咯。
下面列举了在严格模式下的几个重点限制:
|
JavaScript |
限制 |
例子 |
|
变量 |
使用一个变量,但是没有用var去声明 |
testvar = 4; |
|
delete |
删除一个变量,函数或者agrument |
var testvar = 15; function testFunc(){} //causes fault delete testvar; delete testFunc; |
|
属性名 |
在声明对象时,重复使用一个属性名 |
var testObj = { prop1: 10, prop2: 15, //causes fault prop1: 20 } |
|
参数名 |
在函数参数中,重复使用一个参数名 |
function testFunc(param1,/*causes fault*/param1){ return 1; } |
|
有潜力成为关键字 |
在未来有可能成为有用的关键字,不能用来作为变量名或者函数名 |
implements interface package private protected public static yield |
|
八进制数 |
将八进制数赋给一个变量 |
var testoctal = 010; var testescape = \010; |
|
this |
当this为null或者undefined的时候,它是不能被转换成全局对象(window)的 |
function testFunc(){ return this; } var testvar = testFunc(); 在不是严格模式下,这个testvar的值是全局对象,但在严格模式下,它的值却是undefined. |
|
eval,arguments |
eval,arguments不能作为函数名或者参数名、变量名 |
var eval = 10; var arguments =10; |
|
arguments |
在函数中,我们不能通过改变arguments,来改变对应参数值 |
function testArgs(oneArg){ arguments[0] = 20; } 在非严格模式下,我们如果想改变oneArg,可以通过Arguments[0]来改变,如上代码这样,执行后,oneArg和Arguments[0]的值都是20;但是在严格模式下,我们不能通过arguments来改变参数名的值,arguments仅仅是一个拷贝而已。 |
|
arguments.callee |
不允许这么使用 |
function(testInt){ if(testInt-- == 0){ return; } arguments.callee(testInt); } |
[Web 前端] ECMAScript5之StrictMode的更多相关文章
- [转] Web前端开发工程师常用技术网站整理
1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
- Web前端性能优化——编写高效的JavaScript
前言 随着计算机的发展,Web富应用时代的到来,Web 2.0早已不再是用div+css高质量还原设计的时代.自Gmail网页版邮件服务的问世开始,Web前端开发也开启了新的纪元.用户需求不断提高,各 ...
- Web前端开发工程师常用技术网站整理
1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
- 学习WEB前端是应该自学还是参加培训机构?
先说观点,我强烈建议每个人都要自学,不要参加培训班. 我干web前端工程师这个职位已经有6年多的时间,之前在蚂蚁金服做过2年,后来离开是因为加班实在熬不住才走的,像这些已经上市的互联网公司几乎没有不加 ...
- Web前端需要熟悉大学里【高大上】的计算机专业课吗?
作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...
- web前端开发分享-目录
1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- web前端的春天 or 噩梦
「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
随机推荐
- CSS3中border-image属性详解
border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...
- 50 years, 50 colors HDU
和棋盘游戏一个类型的题目 矩阵转换为二分图最大匹配问题 每次碰撞气球都是一行或一列 #include<bits/stdc++.h> using namespace std; #defi ...
- 高能天气——团队Scrum冲刺阶段-Day 6
高能天气--团队Scrum冲刺阶段-Day 6 今日完成任务 于欣月:完善计步器功能:实现了历史步数统计和设置锻炼计划功能,并实现可视化图形界面 余坤澎:将闹钟部分和小游戏部分进行了合并 康皓越:配合 ...
- AngularJS初始化静态模板
AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面 ...
- 初识thinkphp(3)
这篇内容主要涉及请求相应内容. 该系列主要是个人笔记,且内容是连贯的,其中涉及到的自己写的模块或者方法在前面文章中有介绍咋来的,如果您看得云里雾里,给您带来不便,真的不好意思. 0x01:请求对象 官 ...
- 将NX模型导入Process Designer的方法
如何把一个有焊点的零件从nx中输入到process designer 中? 用户在NX中做了一个prt文件, 想把它输入到process designer中, 并且包括焊点信息, 该如何做? 解决 ...
- 【BZOJ 1005】 1005: [HNOI2008]明明的烦恼 (prufer数列+高精度)
1005: [HNOI2008]明明的烦恼 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 4981 Solved: 1941 Description ...
- HDU 5836 Rubik's Cube BFS
Rubik's Cube 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5836 Description As we all know, Zhu is ...
- URAL 1970 J - 皇后像廣場 dfs
J - 皇后像廣場 题目连接: http://acm.hust.edu.cn/vjudge/contest/123332#problem/J Description Vova was walking ...
- 使用 IntraWeb (18) - 基本控件之 TIWImage、TIWImageFile、TIWImageList
TIWImage //用于显示资源中的图片, 设计时通过 Picture 载入图片到资源 TIWImageFile //用于显示给定路径或地址的图片 TIWImageList //它继承于 TImag ...