1. 程式人生 > >從零開始學 Web 之 ES6(一)ES5嚴格模式

從零開始學 Web 之 ES6(一)ES5嚴格模式

一、ECMAScript 5 嚴格模式

1、概述

除了正常執行模式,ECMAscript 5添加了第二種執行模式:"嚴格模式"(strict mode)。顧名思義,這種模式使得Javascript在更嚴格的條件下執行。

2、目的

  • 消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為;
  • 消除程式碼執行的一些不安全之處,保證程式碼執行的安全;

  • 提高編譯器效率,增加執行速度;

  • 為未來新版本的Javascript做好鋪墊。

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

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

3、使用

1、將"use strict"放在指令碼檔案的第一行,則整個指令碼都將以"嚴格模式"執行。如果這行語句不在第一行,則無效,整個指令碼以"正常模式"執行。如果不同模式的程式碼檔案合併成一個檔案,這一點需要特別注意。

(嚴格地說,只要前面不是產生實際執行結果的語句,"use strict"可以不在第一行,比如直接跟在一個空的分號後面。)

<script>
    "use strict";
    //...
</script>

2、針對單個函式

將"use strict"放在函式體的第一行,則整個函式以"嚴格模式"執行。

function strict(){
  "use strict";
  return "這是嚴格模式。";
}

二、語法和行為改變

1、全域性變數必須用var顯示宣告變數

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

    <script type="text/javascript">
        "use strict";  
        v = 1; // 報錯,v未宣告
        //name = "Daotin";
        for (i = 0; i < 2; i++) { // 報錯,i未宣告
        }
    </script>

不能使用 name,因為 name 是window的一個保留屬性,預設為空。

2、禁止自定義的函式中的this指向window

    <script>
        "use strict";  
        function foo() {
            console.log(this);
        }
        foo();
    </script>

沒有 "use strict" 的時候,列印 window物件,有 "use strict" 的時候,列印undefined。

3、嚴格模式會建立eval作用域

eval會解析語句中的字串。

    <script>
        "use strict";  
        var name = 'Daotin';
        eval('var name = "lvonve"; console.log(name)');
        console.log(name);
    </script>

如果不加 "use strict"; ,兩次列印的結構都為 lvonve;加了的話,列印結果為 lvonve和Daotin。也就相當於給eval建立了一個作用域。

4、物件不能有重名的屬性

正常模式下,如果物件有多個重名屬性,最後賦值的那個屬性會覆蓋前面的值。嚴格模式下,這屬於語法錯誤。

(但是在瀏覽器console下面並沒有顯示錯誤資訊。)

    <script>
        "use strict";  
        var o = {    
            p: 1,
            p: 2  
        }; // 語法錯誤
    </script>

5、禁止刪除變數

嚴格模式下無法刪除變數。只有configurable設定為true的物件屬性,才能被刪除。

"use strict";
  var x;
  delete x; // 語法錯誤
  var o = Object.create(null, {'x': {
      value: 1,
      configurable: true
  }});
  delete o.x; // 刪除成功

相關推薦

開始 Web ES6ES5嚴格模式

一、ECMAScript 5 嚴格模式 1、概述 除了正常執行模式,ECMAscript 5添加了第二種執行模式:"嚴格模式"(strict mode)。顧名思義,這種模式使得Javascript在更嚴格的條件下執行。 2、目的 消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為;

開始 Web ES6ES5的一些擴充套件

一、json物件擴充套件 把一個Json物件轉換成字串 JSON.stringify(js物件/陣列); 把一個json格式的字串轉換成Json物件 JSON.parse(json物件/陣列); 示例: <script type="text/javascript"> var o

開始 Web ES6ES6基礎語法

arr 方法 foreach reac 公眾 存在 lock 數組名 回調函數 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博

開始 Web ES6ES6基礎語法四

實現 fine 開始 isf 原理 mat 系列教程 include number 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔

開始 Web ES6ES6基礎語法二

一、Promise Promise是一個物件,代表了未來某個將要發生的事件(,這個事件通常是一個非同步操作) 有了Promise物件, 可以將非同步操作以同步的流程表達出來, 避免了層層巢狀的回撥函式(俗稱'回撥地獄')。 ES6的Promise是一個建構函式, 用來生成promise例項。 1、prom

開始 Web ES6ES6基礎語法三

一、Generator Generator 函式是 ES6 提供的一種非同步程式設計解決方案。 Generator 函式有多種理解角度。語法上,首先可以把它理解成,Generator 函式是一個狀態機,封裝了多個內部狀態。 執行 Generator 函式會返回一個遍歷器物件,也就是說,Generator

開始 Web DOMDOM的概念,對標簽操作

關註 1.5 pan 什麽 tin p標簽 nod text == 大家好,這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,

開始 Web CSS3CSS3概述,選擇器

https 兼容問題 3.1 線性 web前端 不同 錨點 splay lock 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔

開始 Web CSS選擇器

大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 W

開始 Web HTML5HTML5概述,語義化標籤

一、HTML5簡介 1、什麼是html5 html5 不是一門新的語言,而是我們之前學習的 html 的第五次重大修改版本。 2、html的發展歷史 超文字標記語言(第一版,不叫 HTML 1.0)——在1993年6月作為網際網路工程工作小組(IETF)工作草案發布(並非標準); HTML 2.0——19

開始 Web DOMDOM的概念,對標籤操作

大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧! 一、DOM概念 D

開始 Web jQueryjQuery的概念,頁面載入事件

一、jQuery的概念 1、什麼是 JavaScript 庫? JavaScript 開發的過程中,處理瀏覽器的相容很複雜而且很耗時,於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的程式碼進行封裝。 把一些常用到的方法寫到一個單獨的 js 檔案,使用的時候直接去引用這js檔案就可以了,這個 js

開始 Web BOMBOM的概念,一些BOM物件

大家好,這裡是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... +------------------------------------------------------------ github:https://github.com/Daotin/Web 微信公眾號:Web前端之

開始 Web HTML認識前端

大家好,這裡是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧! 1、什麼是前端 前端對於網站來說,

開始 Web JavaScriptJavaScript概述

大家好,這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧! 一、JavaScr

開始 Web Ajax伺服器相關概念

一、伺服器和客戶端 伺服器和客戶端都是電腦,在硬體層面上沒有明顯的劃分,配置很差的個人電腦任然可以作為伺服器。 伺服器如果想對外提供服務,必須安裝相應的軟體,所以不是伺服器這臺電腦可以提供服務,而是其安裝的軟體提供的服務。比如: HTTP網頁服務:Apache,Tomcat,IIS等 檔案上傳下載服務:V

開始 Web DOM節點

def clas scrip while p標簽 設置 ner 操作 text 大家好,這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號,歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始,一步步學習 Web 相

開始 Web BOMoffset,scroll,變速動畫函數

樣式 清理 java mar dde sof mov har width 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博客園:

開始 Web jQuery獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔

開始 Web jQuery為元素綁定多個相同事件,解綁事件

png 好用 添加 方式 執行 存在 區別 也會 地址 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔 博客園:http://ww