好程序员web前端教程之详解JavaScript严格模式

简介:

  好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版。旨在改善错误检查功能并且标识可能不会延续到未来JavaScript版本的脚本。ES5严格模式是限制性更强的JavaScript变体,它与常规JavaScript的语义不同,其分析更为严格。
  目前,除了IE6-9,其它浏览器均已支持ES5严格模式。
一、严格模式的使用
严格模式 的使用很简单,只有在代码首部加入字符串 “use strict”。有两种应用场景,一种是全局模式,一种是局部模式。
1)全局模式
'use strict'//code
2)局部模式
将”use strict”放到函数内的第一行,如下
function() {

"use strict";
//code}

二、严格模式下的执行限制
1)不使用var声明变量严格模式中将不通过
我们知道JS中,不使用var声明的变量默认转为全局变量。但在严格模式中将不允许,会报语法错误。
'use strict'g = 100 //错误
比如for循环
'use strict'for (i=0; i<5; i++) { //错误 console.log(i)}
2)任何使用’eval’的操作都会被禁止
'use strict'var obj = {}var eval = 3for (var eval in obj) {}function eval() {}function func(eval) {}
3)eval作用域 JS中作用域有两种,全局作用域和函数作用域。严格模式带来了第三种作用域:eval作用域,如下
'use strict'var a = 10eval('var a = 20; console.log(a)'); //20console.log(a) //10
4)with被禁用
'use strict'var obj = {
name:'zhangsan',
age:100,
sex:'男'}with(obj) { //报错 console.log(name);

console.log(age);
console.log(sex);}

5)caller/callee 被禁用
function func() {

'use strict'
arguments.callee
arguments.caller}func()

6)对禁止扩展的对象添加新属性会报错
'use strict'var obj = {}Object.preventExtensions(obj)obj.a = 1 // 报错
7)删除系统内置的属性会报错
'use strict'delete Object.prototype // 报错delete Function.prototype // 报错
8)delete使用var声明的变量或挂在window上的变量报错
'use strict'var obj = {a:1}window.a = 1delete obj // 报错delete a // 报错
9)delete不可删除属性(isSealed或isFrozen)的对象时报错
'use strict'var obj = {a: 1}Object.seal(obj)delete obj.a //报错
10)对一个对象的只读属性进行赋值将报错
'use strict'var obj = {}Object.defineProperty(obj, 'a', {value: 1, writable: false})obj.a = 2 // 报错
11)函数有重名的参数将报错
'use strict'function func(a, a) {

alert(a)}func()

而在非严格模式中,后面的同名参数将覆盖前面的。
12)八进制表示法被禁用
'use strict'var num = 022
13)arguments严格定义为参数,不再与形参绑定
function func(a) {

arguments[0] = 2
alert(a) // 2}  func(1)

func调用时传参为1,函数内部通过arguments修改为2,此时alert的为修改后的2。 而在严格模式中则不能被修改,如下
'use strict'function func(a) {

arguments[0] = 2
alert(a) // 1}  func(1)

14)函数必须声明在顶层
我们知道函数声明和函数表达式是两个不同的概念。一般函数声明都在最顶层,ES5前的JS宽松,你可以写在if或for内。当然Firefox的解析方式与其他浏览器不同,见SJ9002。而在严格模式中这些写法将直接报错
'use strict'if (true) {

function func1() { } // 语法错误}for (var i = 0; i < 5; i++) {
function func2() { } // 语法错误}

15)ES5里新增的关键字不能当做变量标示符使用,如implements, interface, let, package, private, protected, public, static, yield
'use strict'var let = 10 //报错var yield = 20
16)call/apply的第一个参数直接传入不包装为对象
'use strict'function func() {

console.log(typeof this)}func.call('abcd') // stringfunc.apply(1)     // number

依次为”string”,”number”。而在非严格模式中call/apply将对值类型的”abcd”,1包装为对象后传入,即两次输出都为”object”。
17)call/apply的第一个参数为null/undefined时,this为null/undefined 这里以call来示例
'use strict'function func() {

console.log(this)}func.call(undefined) // undefinedfunc.call(null)      // null

依次是undefined,null。而非严格模式中则是宿主对象,浏览器里是window,node.js环境则是global。
18)bind的第一个参数为null/undefined时,this为null/undefined bind是ES5给Function.prototype新增的一个方法,它和call/apply一样在function上直接调用。它返回一个指定了上下文和参数的函数。当它的第一个参数为null/undefined时,情形和call/apply一样,this也为null/undefined。
'use strict'function func() {

console.log(this)}var f1 = func.bind(null)var f2 = func.bind(undefined)f1() // nullf2() // undefined

而在非严格模式中输出的都是window(或global)。
“use strict” 的位置必须在首部。首部指其前面没有任何有效js代码。以下都是无效的,将不会触发严格模式。
a)“use strict” 前有代码, 无效
var width = 10'use strict' g = 100
b)“use strict” 前有个空语句,无效
;//这里是空语句'use strict' g = 100

function func() {

;
'use strict'
g = 200}

function func() {

;'use strict'
localVar = 200}

当然,“use strict”前加注释是可以的
// strict mode'use strict'g = 100
function func() {

// strict mode    'use strict'
g = 200}func()
相关文章
|
15天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
16天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
17天前
|
编解码 前端开发 JavaScript
Web 前端开发中的最佳实践
本文将介绍 Web 前端开发中的最佳实践,包括代码组织、性能优化、响应式设计和用户体验等方面。通过遵循这些实践,开发人员可以提高开发效率,优化用户体验,并减少潜在的问题和错误。
|
9天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
10天前
|
前端开发 JavaScript vr&ar
前端新技术探索:WebAssembly、Web Components与WebVR/AR
【4月更文挑战第12天】WebAssembly、Web Components和WebVR/AR正重塑Web应用的未来。WebAssembly允许C/C++等语言在Web上高效运行,提供接近原生的性能,如游戏引擎。Web Components通过Custom Elements和Shadow DOM实现可复用的自定义UI组件,提升模块化开发。WebVR/AR(现WebXR)则让VR/AR体验无需额外应用,直接在浏览器中实现。掌握这些技术对前端开发者至关重要。
15 3
|
22天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
机器学习/深度学习 前端开发 算法
利用机器学习优化Web前端性能的探索与实践
本文将介绍如何利用机器学习技术来优化Web前端性能,探讨机器学习在前端开发中的应用,以及通过实际案例展示机器学习算法对前端性能优化的效果。通过结合前端技术和机器学习,提升Web应用的用户体验和性能表现。
|
1月前
|
API
2024常用Web支付开发讲解教程
本教程为web支付开发,讲解了最常用的两钟支付:支付宝支付和微信支付,服务器配置和API对接,学完本课程可以学会微信支付、和支付宝支付开发。
18 2
2024常用Web支付开发讲解教程
|
1月前
|
架构师 前端开发
web全栈架构师第16期教程
互联网时代已进入后半场,行业环境发生了显著变化。互联网人,尤其是技术人员,如何在加速更迭的技术浪潮中持续充电,提升自身价值,是当下必须面对的挑战。课程涉及了现下前端实际开发时所需要的各块内容,并深度对标 阿里 P6+级别所具备的知识储备及开发技能,奠定源码阅读基础和全栈开发能力。
19 3
web全栈架构师第16期教程
|
1月前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
44 3
Web前端全栈HTML5通向大神之路