首頁 web前端 js教程 跟我學習javascript的嚴格模式_javascript技巧

跟我學習javascript的嚴格模式_javascript技巧

May 16, 2016 pm 03:32 PM

一、概述

除了正常運作模式,ECMAscript 5增加了第二種運作模式:「嚴格模式」(strict mode)。顧名思義,這種模式使得Javascript在更嚴格的條件下運作。

設立」嚴格模式」的目的,主要有以下幾個:

  • 消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為;
  • 消除程式碼運作的一些不安全之處,保證程式碼運作的安全;
  • 提高編譯器效率,增加運轉速度;
  • 為未來新版的Javascript做好鋪墊。

「嚴格模式」體現了Javascript更合理、更安全、更嚴謹的發展方向,包括IE 10在內的主流瀏覽器,都已經支持它,許多大項目已經開始全面擁抱它。

另一方面,同樣的程式碼,在”嚴格模式”中,可能會有不一樣的運行結果;一些在”正常模式”下可以運行的語句,在”嚴格模式下將不能運行。掌握這些內容,有助於更細緻、深入理解Javascript,讓你變成更好的程式設計師。

本文將對」嚴格模式」做詳細介紹。
二、進入標誌

進入」嚴格模式」的標誌,是下面這行語句:

"use strict";

舊版的瀏覽器會把它當作一行普通字串,加以忽略。

三、如何呼叫

「嚴格模式」有兩種呼叫方法,適用於不同的場合。

3.1 針對整個腳本檔案

將”use strict」放在腳本檔案的第一行,則整個腳本都將以”嚴格模式”運行。如果這行語句不在第一行,則無效,整個腳本以”正常模式”運行。如果不同模式的程式碼文件合併成一個文件,這一點需要特別注意。

<script>
 "use strict";
 console.log("这是严格模式。");
</script>

<script>
 console.log("这是正常模式。");
</script>

登入後複製

上面的程式碼表示,一個網頁中依序有兩段Javascript程式碼。前一個script標籤是嚴格模式,後者不是。

3.2 針對單一函數

將”use strict」放在函數體的第一行,則整個函數以”嚴格模式”運行。

function strict(){
 "use strict";
 return "这是严格模式。";
}

function notStrict() {
 return "这是正常模式。";
}

登入後複製

3.3 腳本檔案的變通寫法

因為第一種呼叫方法不利於檔案合併,所以更好的做法是,借用第二種方法,將整個腳本檔案放在一個立即執行的匿名函數之中。

(function (){

 "use strict";


// some code here

})();

登入後複製

四、文法和行為改變

嚴格模式對Javascript的語法和行為,都做了一些改變。

4.1 全域變數明確宣告

在正常模式中,如果一個變數沒有宣告就賦值,預設​​是全域變數。嚴格模式禁止這種用法,全域變數必須明確宣告。

"use strict";

v = 1; 
// 报错,v未声明

for(i = 0; i < 2; i++) { 
// 报错,i未声明
}

登入後複製

因此,嚴格模式下,變數都必須先用var指令聲明,然後再使用。

4.2 靜態綁定

Javascript語言的一個特點,就是允許”動態綁定”,即某些屬性和方法到底屬於哪一個對象,不是在編譯時確定的,而是在運行時(runtime)確定的。

嚴格模式不允許動態綁定,只允許靜態綁定。也就是說,屬性和方法到底歸屬哪個對象,必須在編譯階段就確定。這樣做有利於編譯效率的提高,也使得程式碼更容易閱讀,更少出現意外。

具體來說,涉及以下幾個方面。

(1)禁止使用with語句

因為with語句無法在編譯時就確定,所以屬性到底歸屬哪個物件。

"use strict";

var v = 1;

with (o){ 
// 语法错误
 v = 2;
}

登入後複製

(2)創設eval作用域

正常模式下,Javascript語言有兩種變數作用域(scope):全域作用域和函數作用域。嚴格模式創設了第三種作用域:eval作用域。

正常模式下,eval語句的作用域,取決於它處於全域作用域,還是函數作用域。嚴格模式下,eval語句本身就是一個作用域,不再能夠產生全域變數了,它所產生的變數只能用於eval內部。

"use strict";
var x = 2;
console.info(eval("var x = 5; x")); 
// 5
console.info(x); 
// 2

登入後複製

4.3 增強的安全措施

(1)禁止this關鍵字指向全域物件

function f(){
 return !this;
}

// 返回false,因为"this"指向全局对象,"!this"就是false

function f(){
 "use strict";
 return !this;
}
// 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。

登入後複製

因此,使用建構子時,如果忘了加new,this不再指向全域對象,而是報錯。

function f(){

 "use strict";

 this.a = 1;

};

f();
// 报错,this未定义
登入後複製

(2)禁止在函數內部遍歷呼叫堆疊

function f1(){

 "use strict";

 f1.caller; 
// 报错

 f1.arguments; 
// 报错

}

f1();
登入後複製

4.4 禁止删除变量

严格模式下无法删除变量。只有configurable设置为true的对象属性,才能被删除。

"use strict";

var x;

delete x; 
// 语法错误

var o = Object.create(null, 'x', {
 value: 1,
 configurable: true
});

delete o.x; 
// 删除成功
登入後複製

4.5 显式报错

正常模式下,对一个对象的只读属性进行赋值,不会报错,只会默默地失败。严格模式下,将报错。

"use strict";

var o = {};

Object.defineProperty(o, "v", { value: 1, writable: false });

o.v = 2; 
// 报错

登入後複製

严格模式下,对一个使用getter方法读取的属性进行赋值,会报错。

"use strict";

var o = {

get v() { return 1; }

};

o.v = 2; 
// 报错

登入後複製

严格模式下,对禁止扩展的对象添加新属性,会报错。

"use strict";
var o = {};
Object.preventExtensions(o);
o.v = 1; 
// 报错

登入後複製

严格模式下,删除一个不可删除的属性,会报错。

"use strict";
delete Object.prototype; 
// 报错

登入後複製

4.6 重名错误

严格模式新增了一些语法错误。

(1)对象不能有重名的属性

正常模式下,如果对象有多个重名属性,最后赋值的那个属性会覆盖前面的值。严格模式下,这属于语法错误。

"use strict";
var o = {
 p: 1,
 p: 2
}; 

// 语法错误

登入後複製

(2)函数不能有重名的参数

正常模式下,如果函数有多个重名的参数,可以用arguments[i]读取。严格模式下,这属于语法错误。

"use strict";

function f(a, a, b) { 
// 语法错误

 return ;

}

登入後複製

4.7 禁止八进制表示法

正常模式下,整数的第一位如果是0,表示这是八进制数,比如0100等于十进制的64。严格模式禁止这种表示法,整数第一位为0,将报错。

"use strict";
var n = 0100; 
// 语法错误

登入後複製

4.8 arguments对象的限制

arguments是函数的参数对象,严格模式对它的使用做了限制。

(1)不允许对arguments赋值

"use strict";
arguments++; 
// 语法错误
var obj = { set p(arguments) { } }; 
// 语法错误
try { } catch (arguments) { } 
// 语法错误

function arguments() { } 
// 语法错误

var f = new Function("arguments", "'use strict'; return 17;"); 
// 语法错误

登入後複製

(2)arguments不再追踪参数的变化

function f(a) {
 a = 2;
 return [a, arguments[0]];
}

f(1); 
// 正常模式为[2,2]

function f(a) {

 "use strict";
 a = 2;
 return [a, arguments[0]];

}

f(1); 
// 严格模式为[2,1]

登入後複製

(3)禁止使用arguments.callee

这意味着,你无法在匿名函数内部调用自身了。

"use strict";

var f = function() { return arguments.callee; };

f(); 
// 报错

登入後複製

4.9 函数必须声明在顶层

将来Javascript的新版本会引入”块级作用域”。为了与新版本接轨,严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说,不允许在非函数的代码块内声明函数。

"use strict";

if (true) {

 function f() { } 
// 语法错误

}

for (var i = 0; i < 5; i++) {

 function f2() { } 
// 语法错误

登入後複製

4.10 保留字

为了向将来Javascript的新版本过渡,严格模式新增了一些保留字:implements, interface, let, package, private, protected, public, static, yield。

使用这些词作为变量名将会报错。

function package(protected) { 
// 语法错误

 "use strict";

 var implements; 
// 语法错误

}

登入後複製

此外,ECMAscript第五版本身还规定了另一些保留字:class, enum, export, extends, import, super。它们也是不能使用的。

以上就是本文的全部内容,希望对大家的学习有所帮助。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

前端熱敏紙小票打印遇到亂碼問題怎麼辦? 前端熱敏紙小票打印遇到亂碼問題怎麼辦? Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中,小票打印是一個常見的需求。然而,很多開發者在實...

誰得到更多的Python或JavaScript? 誰得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

神秘的JavaScript:它的作用以及為什麼重要 神秘的JavaScript:它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? 如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

JavaScript難以學習嗎? JavaScript難以學習嗎? Apr 03, 2025 am 12:20 AM

學習JavaScript不難,但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程,通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤,使用調試技巧。 5)優化性能,遵循最佳實踐。

如何實現視差滾動和元素動畫效果,像資生堂官網那樣?
或者:
怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? 如何實現視差滾動和元素動畫效果,像資生堂官網那樣? 或者: 怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? Apr 04, 2025 pm 05:36 PM

實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網(https://www.shiseido.co.jp/sb/wonderland/)中�...

console.log輸出結果差異:兩次調用為何不同? console.log輸出結果差異:兩次調用為何不同? Apr 04, 2025 pm 05:12 PM

深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異,並解釋其背後的原因。 �...

JavaScript的演變:當前的趨勢和未來前景 JavaScript的演變:當前的趨勢和未來前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

See all articles