我的JS體系整理（三）

 一. 嚴格模式

JavaScript 嚴格模式（strict mode）即在嚴格的條件下運行。首先聲明，嚴格模式是ES5中提出來的，準確來講就是一句指令Use strict，它的目的是指定代碼在嚴格條件下執行，可是在JS舊版本中會被忽略。應用層方面簡單理解就是你在嚴格模式下不可使用未聲明的變量。

 

圖1.1嚴格模式的函數使用

第一種使用方式爲函數使用，即在函數中使用嚴格模式；

第二種方式爲在整個腳本中使用，即在你要使用嚴格模式的js文件中開頭寫'use strict'（或者是"use strict"）。

嚴格模式語法存在必定的缺陷，有數個大型網站已經被坑倒了。具體緣由以下：嚴格模式的代碼與嚴格模式的代碼合併後仍是嚴格模式，非嚴格模式的代碼與非嚴格模式的代碼合併後仍是非嚴格模式，可是非嚴格模式的代碼與嚴格模式的代碼合併的話，會爆出一個又一個的bug。因此，若是肯定要使用嚴格模式來進行代碼編輯的話，最好是按照函數去一個個開啓嚴格模式，你能夠將整個腳本的內容用一個函數包括起來，而後在這個外部函數中使用嚴格模式。這樣就能夠消除合併的問題，可是這就意味着您必需要在函數做用域外聲明一個全局變量。

圖1.2嚴格模式的報錯實例（1）

 

圖1.3嚴格模式的報錯實例（2）

（1）不容許使用未聲明的變量；嚴格模式有如下幾條不容許的狀況：

（2）不容許刪除函數或者變量；

（3）不容許變量重名；

（4）不容許使用八進制；

（5）不容許使用轉義字符；

（6）不容許對只讀屬性賦值；

（7）變量名不可使用eval字符串；

（8）變量名不能使用專業定義（相似arguments這種）；

（9）禁止this關鍵字指向全局對象。

二. New

要建立一個實例，就必需要用到new操做符，實際上在調用new操做符時會經歷如下四步：

（1）建立一個新對象；

（2）將構造函數的做用域賦給新對象（所以 this 就指向了這個新對象） ；

（3）執行構造函數中的代碼（爲這個新對象添加屬性） ；

（4）返回新對象。

 

圖2.1 new的使用

如上圖所示，前兩行爲咱們正常使用的方法，其實這兩行所執行的就是後面的這三行，即先定義一個空對象，而後經過原型把函數的prototype賦給對象的_proto_，而後再指向當前函數的做用域。當咱們給建立實例的函數對象經過原型增長一些方法或者屬性時，被它所建立的實例也會具備這些方法和實例，即構造子中，咱們來設置‘類’的成員變量，構造子對象prototype中咱們來設置‘類’的公共方法。因而經過函數對象和Javascript特有的__proto__與prototype及new操做符，模擬出類和類實例化的效果。

三. Instanceof

instanceof運算符用於測試構造函數的prototype屬性是否出如今對象的原型鏈中的任何位置。話很少數，直接上圖：

 

圖3.1

如上所示，instanceof的用法就是 Obj instanceof constructor，其中Obj是要檢測的對象，constructor是構造函數。可是須要注意的是，若是表達式 obj instanceof Foo 返回true，則並不意味着該表達式會永遠返回true，由於Foo.prototype屬性的值有可能會改變，改變以後的值頗有可能不存在於obj的原型鏈上，這時原表達式的值就會成爲false。另一種狀況下，原表達式的值也會改變，就是改變對象obj的原型鏈的狀況，雖然在目前的ES規範中，咱們只能讀取對象的原型而不能改變它，但藉助於非標準的__proto__僞屬性，是能夠實現的。好比執行obj.__proto__ = {}以後，obj instanceof Foo就會返回false了。

 

圖3.2

四. 特殊函數（匿名函數）

首先，匿名函數的定義是沒有函數名稱的函數，以下圖：

 

圖4.1

上面這段代碼就是一個匿名函數，匿名函數的調用方式是聲明一個變量，而後把把這個匿名函數的執行的代碼，和返回值賦值給聲名的變量。

 

圖4.2

如上就是匿名函數被使用最多的例子，便可以將匿名函數做爲參數傳給其它函數，接收方函數就能夠經過所傳遞進來的函數完成某些功能

五. 延遲加載方式

有些JS代碼在某些狀況在須要使用，並非頁面初始化的時候就要用到。延遲加載就是爲了解決這個問題。將JS切分紅許多模塊，頁面初始化時只加載須要當即執行的JS，而後其它JS的加載延遲到第一次須要用到的時候再加載。相似圖片的延遲加載。先介紹兩個重要的屬性defer和async

1. defer屬性

 

圖5.1

瀏覽器會並行下載 wpwl.js和其它有 defer 屬性的script，而不會阻塞頁面後續處理。defer屬性在IE 4.0中就實現了，目前已經十多年了，而火狐也在3.5版本之後開始支持defer屬性。

1. async屬性

 

圖5.2

async屬性是HTML5新增的。做用和defer相似，可是它將在下載後儘快執行，不能保證腳本會按順序執行。它們將在onload 事件以前完成。Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 屬性。能夠同時使用 async 和 defer，這樣IE 4以後的全部IE 都支持異步加載。

延遲加載的方式有不少，下面介紹幾種典型的方式：

 

圖5.3 動態建立DOM

 

圖5.4 使用Jquery的getScript()

 

圖5.5 使用setTimeout延遲方法的加載時間