詳解javascript中的Strict模式
簡(jiǎn)介
在ES5中,引入了strict模式,我們可以稱之為嚴(yán)格模式。相應(yīng)的sloppy mode就可以被稱為非嚴(yán)格模式。
嚴(yán)格模式并不是非嚴(yán)格模式的一個(gè)子集,相反的嚴(yán)格模式在語(yǔ)義上和非嚴(yán)格模式都發(fā)生了一定的變化,所以我們?cè)谑褂眠^(guò)程中,一定要經(jīng)過(guò)嚴(yán)格的測(cè)試。以保證在嚴(yán)格模式下程序的執(zhí)行和非嚴(yán)格模式下的執(zhí)行效果一致。
使用Strict mode
strict mode會(huì)改變javascript的一些表現(xiàn),我們將會(huì)在下一節(jié)中進(jìn)行詳細(xì)的講解。
這里先來(lái)看一下,怎么使用strict mode。
Strict mode主要用在一個(gè)完整的腳本或者function中,并不適用于block {}。 如果在block中使用strict mode是不會(huì)生效的。
除此之外,eval中的代碼,F(xiàn)unction代碼,event handler屬性和傳遞給WindowTimers.setTimeout()的string都可以看做是一個(gè)完整的腳本。我們可以在其中使用Strict mode。
如果是在script腳本中使用strict模式,可以直接在腳本的最上面加上"use strict":
// 整個(gè)腳本的strict模式 'use strict'; var v = "Hi! I'm a strict mode script!";
同樣的我們也可以在function中使用strict模式:
function strict() { // 函數(shù)的strict模式 'use strict'; function nested() { return 'And so am I!'; } return "Hi! I'm a strict mode function! " + nested(); } function notStrict() { return "I'm not strict."; }
如果使用的是ES6中引入的modules,那么modules中默認(rèn)就已經(jīng)是strict模式了,我們不需要再額外的使用"use strict":
function myModule() { // 默認(rèn)就是strict模式 } export default myModule;
strict mode的新特性
strict mode在語(yǔ)法和運(yùn)行時(shí)的表現(xiàn)上面和非嚴(yán)格模式都發(fā)生了一定的變化,接下來(lái),我們一一來(lái)看。
強(qiáng)制拋出異常
在js中,有很多情況下本來(lái)可能是錯(cuò)誤的操作,但是因?yàn)檎Z(yǔ)言特性的原因,并沒(méi)有拋出異常,從而導(dǎo)致最終運(yùn)行結(jié)果并不是所期待的。
如果使用strict模式,則會(huì)直接拋出異常。
比如在strict模式中,不允許使用未定義的全局變量:
'use strict'; globalVar = 10; //ReferenceError: globalVar is not defined
這樣實(shí)際上可以避免手誤導(dǎo)致變量名字寫(xiě)錯(cuò)而導(dǎo)致的問(wèn)題。
我再看一些其他的例子:
'use strict'; // 賦值給不可寫(xiě)的全局變量, var undefined = 5; // throws a TypeError var Infinity = 5; // throws a TypeError // 賦值給不可寫(xiě)的屬性 var obj1 = {}; Object.defineProperty(obj1, 'x', { value: 42, writable: false }); obj1.x = 9; // throws a TypeError // 賦值給一個(gè)get方法 var obj2 = { get x() { return 17; } }; obj2.x = 5; // throws a TypeError // 賦值給一個(gè)禁止擴(kuò)展的對(duì)象 var fixed = {}; Object.preventExtensions(fixed); fixed.newProp = 'ohai'; // throws a TypeError
Strict模式可以限制刪除不可刪除的屬性,比如構(gòu)造函數(shù)的prototype:
'use strict'; delete Object.prototype; // throws a TypeError
禁止對(duì)象和函數(shù)參數(shù)中的重復(fù)屬性:
'use strict'; var o = { p: 1, p: 2 }; // Duplicate declaration function sum(a, a, c) { // Duplicate declaration 'use strict'; return a + a + c; }
禁止設(shè)置基礎(chǔ)類型的屬性:
(function() { 'use strict'; false.true = ''; // TypeError (14).sailing = 'home'; // TypeError 'with'.you = 'far away'; // TypeError })();
簡(jiǎn)化變量的使用
使用Strict模式可以簡(jiǎn)化變量的使用,讓程序代碼可讀性更強(qiáng)。
首先,strict模式禁止使用with。
with很強(qiáng)大,我們可以通過(guò)將對(duì)象傳遞給with,從而影響變量查找的scope chain。也就是說(shuō)當(dāng)我們?cè)趙ith block中需要使用到某個(gè)屬性的時(shí)候,除了在現(xiàn)有的scope chain中查找之外,還會(huì)在with傳遞的對(duì)象中查找。
with (expression) statement
使用with通常是為了簡(jiǎn)化我們的代碼,比如:
var a, x, y; var r = 10; with (Math) { a = PI * r * r; x = r * cos(PI); y = r * sin(PI / 2); }
上面的例子中,PI是Math對(duì)象中的變量,但是我們可以在with block中直接使用。有點(diǎn)像java中的import的感覺(jué)。
下面的例子將會(huì)展示with在使用中的問(wèn)題:
function f(x, o) { with (o) { console.log(x); } }
我們?cè)趙ith block中輸出x變量,從代碼可以看出f函數(shù)傳入了一個(gè)x變量。但是如果with使用的對(duì)象中如果也存在x屬性的話,就會(huì)出現(xiàn)意想不到的問(wèn)題。
所以,在strict模式中,with是禁止使用的。
其次是對(duì)eval的改動(dòng)。
傳統(tǒng)模式中,eval中定義的變量,將會(huì)自動(dòng)被加入到包含eval的scope中。我們看個(gè)例子:
var x = 17; var evalX = eval("var x = 42; x;"); console.log(x);
因?yàn)閑val中引入了新的變量x,這個(gè)x的值將會(huì)覆蓋最開(kāi)始定義的x=17. 最后我們得到結(jié)果是42.
如果加入use strict,eval中的變量將不會(huì)被加入到現(xiàn)有的Scope范圍中,我們將會(huì)得到結(jié)果17.
var x = 17; var evalX = eval("'use strict'; var x = 42; x;"); console.log(x);
這樣做的好處是為了避免eval對(duì)現(xiàn)有程序邏輯的影響。
在strict模式下面,還不允許delete name:
'use strict'; var x; delete x; // !!! syntax error eval('var y; delete y;'); // !!! syntax error~~
簡(jiǎn)化arguments
在js中,arguments代表的是參數(shù)數(shù)組,首先在Strict模式下,arguments是不能作為變量名被賦值的:
'use strict'; arguments++; var obj = { set p(arguments) { } }; try { } catch (arguments) { } function arguments() { } var f = new Function('arguments', "'use strict'; return 17;");
上面執(zhí)行都會(huì)報(bào)錯(cuò)。
另外,在普通模式下,arguments是和命名參數(shù)相綁定的,并且arguments[0]和arg同步變化,都表示的是第一個(gè)參數(shù)。
但是如果在strict模式下,arguments表示的是真正傳入的參數(shù)。
我們舉個(gè)例子:
function f(a) { a = 42; return [a, arguments[0]]; } var pair = f(17); console.log(pair[0]); // 42 console.log(pair[1]); // 42
上面的例子中,arguments[0]是和命名參數(shù)a綁定的,不管f傳入的是什么值,arguments[0]的值最后都是42.
如果換成strict模式:
function f(a) { 'use strict'; a = 42; return [a, arguments[0]]; } var pair = f(17); console.log(pair[0]); // 42 console.log(pair[1]); // 17
這個(gè)模式下arguments[0]接收的是實(shí)際傳入的參數(shù),我們得到結(jié)果17.
在Strict模式下,arguments.callee是被禁用的。通常來(lái)說(shuō)arguments.callee指向的是當(dāng)前執(zhí)行的函數(shù),這會(huì)阻止虛擬機(jī)對(duì)內(nèi)聯(lián)的優(yōu)化,所以在Strict模式下是禁止的。
讓javascript變得更加安全
在普通模式下,如果我們?cè)谝粋€(gè)函數(shù)f()中調(diào)用this,那么this指向的是全局對(duì)象。在strict模式下,這個(gè)this的值是undefined。
如果我們是通過(guò)call或者apply來(lái)調(diào)用的話,如果傳入的是primitive value(基礎(chǔ)類型),在普通模式下this會(huì)自動(dòng)指向其box類(基礎(chǔ)類型對(duì)應(yīng)的Object類型,比如Boolean,Number等等)。如果傳入的是undefined和null,那么this指向的是global Object。
而在strict模式下,this指向的是傳入的值,并不會(huì)做轉(zhuǎn)換或變形。
下面的值都是true:
'use strict'; function fun() { return this; } console.assert(fun() === undefined); console.assert(fun.call(2) === 2); console.assert(fun.apply(null) === null); console.assert(fun.call(undefined) === undefined); console.assert(fun.bind(true)() === true);
為什么會(huì)安全呢?這就意味著,在strict模式下,不能通過(guò)this來(lái)指向window對(duì)象,從而保證程序的安全性。
另外,在普通模式下,我們可以通過(guò)fun.caller或者fun.arguments來(lái)獲取到函數(shù)的調(diào)用者和參數(shù),這有可能會(huì)訪問(wèn)到一些private屬性或者不安全的變量,從而造成安全問(wèn)題。
在strict模式下,fun.caller或者fun.arguments是禁止的。
function restricted() { 'use strict'; restricted.caller; // throws a TypeError restricted.arguments; // throws a TypeError } function privilegedInvoker() { return restricted(); } privilegedInvoker();
保留關(guān)鍵字和function的位置
為了保證JS標(biāo)準(zhǔn)的后續(xù)發(fā)展,在strict模式中,不允許使用關(guān)鍵字作為變量名,這些關(guān)鍵字包括implements, interface, let, package, private, protected, public, static 和 yield等。
function package(protected) { // !!! 'use strict'; var implements; // !!! interface: // !!! while (true) { break interface; // !!! } function private() { } // !!! } function fun(static) { 'use strict'; } // !!!
而對(duì)于function來(lái)說(shuō),在普通模式下,function是可以在任何位置的,在strict模式下,function的定義只能在腳本的頂層或者function內(nèi)部定義:
'use strict'; if (true) { function f() { } // !!! syntax error f(); } for (var i = 0; i < 5; i++) { function f2() { } // !!! syntax error f2(); } function baz() { // kosher function eit() { } // also kosher }
總結(jié)
Strict模式為JS的后續(xù)發(fā)展和現(xiàn)有編程模式的規(guī)范都起到了非常重要的作用。但是如果我們?cè)跒g覽器端使用的話,還是需要注意瀏覽器的兼容性,并做好嚴(yán)格的測(cè)試。
以上就是詳解javascript中的Strict模式的詳細(xì)內(nèi)容,更多關(guān)于javascript中的Strict模式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript、tab切換完整版(自動(dòng)切換、鼠標(biāo)移入停止、移開(kāi)運(yùn)行)
這篇文章主要介紹了JavaScript、tab切換完整版(自動(dòng)切換、鼠標(biāo)移入停止、移開(kāi)運(yùn)行)的相關(guān)資料,需要的朋友可以參考下2016-01-01JS實(shí)現(xiàn)的簡(jiǎn)單鼠標(biāo)跟隨DiV層效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單鼠標(biāo)跟隨DiV層效果,涉及JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JS中超越現(xiàn)實(shí)的匿名函數(shù)用法實(shí)例分析
這篇文章主要介紹了JS中超越現(xiàn)實(shí)的匿名函數(shù)用法,結(jié)合實(shí)例形式分析了javascript匿名函數(shù)定義、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06原生js實(shí)現(xiàn)寬度計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)寬度計(jì)數(shù)器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09AjaxUpLoad.js實(shí)現(xiàn)文件上傳
這篇文章主要為大家詳細(xì)介紹了AjaxUpLoad.js實(shí)現(xiàn)文件上傳的具體代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03bootstrap實(shí)現(xiàn)彈窗和拖動(dòng)效果
這篇文章主要介紹了bootstrap實(shí)現(xiàn)彈窗和拖動(dòng)效果的相關(guān)資料,需要的朋友可以參考下2016-01-01