好程式設計師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 = 3 for ( var eval in obj) {} function eval () {} function func( eval ) {}
3)eval作用域 JS中作用域有兩種,全域性作用域和函式作用域。嚴格模式帶來了第三種作用域:eval作用域,如下
'use strict' var a = 10eval ( 'var a = 20; console.log(a)' ); //20 console.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 = 1 delete 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' ) // string func.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 ) // undefined func.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() // null f2() // 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()
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69913864/viewspace-2689550/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Javascript 嚴格模式詳解JavaScript模式
- 好程式設計師web前端分享JavaScript中常見的反模式程式設計師Web前端JavaScript模式
- 好程式設計師web前端教程之Node.Js流程程式設計師Web前端Node.js
- 好程式設計師web前端教程之前端模組化開發程式設計師Web前端
- 好程式設計師前端教程之JavaScript閉包和匿名函式的關係詳解程式設計師前端JavaScript函式
- 好程式設計師web前端分享前端 javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師web前端學習教程之Node Js流程程式設計師Web前端JS
- 好程式設計師web前端教程JavaScript系列之HTTP程式設計師Web前端JavaScriptHTTP
- 好程式設計師web前端教程分享JavaScript面試題程式設計師Web前端JavaScript面試題
- 好程式設計師web前端教程分享js模板模式程式設計師Web前端JS模式
- 好程式設計師web前端培訓分享JavaScript學習筆記之設計模式程式設計師Web前端JavaScript筆記設計模式
- 好程式設計師web前端分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端分享前端javascript練習題一程式設計師Web前端JavaScript
- 好程式設計師web前端培訓分享JavaScript框架J程式設計師Web前端JavaScript框架
- 好程式設計師web前端教程分享javascript 練習題程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享JavaScript簡寫方法程式設計師Web前端JavaScript
- 好程式設計師web前端培訓分享學習JavaScript程式設計師Web前端JavaScript
- 好程式設計師Web前端教程分享JavaScript開發技巧程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題二程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端javascript練習題三程式設計師Web前端JavaScript
- 好程式設計師web前端教程分享前端 javascript 練習題二程式設計師Web前端JavaScript
- 好程式設計師web前端教程之JS繼承實現方式解析程式設計師Web前端JS繼承
- 好程式設計師web前端學習路線分享Jsonp詳解程式設計師Web前端JSON
- 好程式設計師web前端細解cookie那些事程式設計師Web前端Cookie
- 好程式設計師web前端教程:字串程式設計師Web前端字串
- 好程式設計師web前端培訓分享詳解JavaScript學習筆記建構函式程式設計師Web前端JavaScript筆記函式
- 好程式設計師分享JavaScript名稱空間模式例項詳解程式設計師JavaScript模式
- 好程式設計師:web前端解答為什麼要學JavaScript程式設計師Web前端JavaScript
- 好程式設計師web前端培訓分享JavaScript學習指南程式設計師Web前端JavaScript
- 好程式設計師web前端教程分javascript練習題-事件程式設計師Web前端JavaScript事件
- 好程式設計師web前端之JavaScript陣列去重方法程式設計師Web前端JavaScript陣列
- 好程式設計師web前端分享javascript列舉演算法程式設計師Web前端JavaScript演算法
- 好程式設計師web前端教程分享JavaScript Math(算數)物件程式設計師Web前端JavaScript物件
- 好程式設計師web前端教程分享前端javascript練習題之promise程式設計師Web前端JavaScriptPromise
- 好程式設計師Web前端分享前端CSS篇程式設計師Web前端CSS
- 好程式設計師web前端分享html中meta標籤及用法詳解程式設計師Web前端HTML
- 好程式設計師web前端學習路線大廠面試題詳解程式設計師Web前端面試題
- 好程式設計師web前端分享應該怎樣學好web前端?程式設計師Web前端