[JS] JavaScript由淺入深(3) 進階

標籤：

　　本節，將圍繞以下幾點來講。

　　知識點：多線程、範圍、閉包、this

　　先頂後看

 

1.多線程

　　在不支援H5的瀏覽器中。使用Concurrent.Thread.js.

　　在支援H5中，使用WebWork.

 

　　在H5以前，js是不支援多線程的。其中存在同步池和非同步池的概念。當同步池處理完後，會調用非同步池的事件，定時任務等。

 

以下很明顯的區分js是否是多線程執行的

c#

js

    <script>        setInterval(function () {            alert(‘1‘);        }, 1000);    </script>

 

使用Concurrent.Thread.js(本質是用的js定時函數來類比多線程)

    <script>        Concurrent.Thread.create(function () {            $(btn).click(func);            function func() {                alert(‘message‘);            }            var i = 0;            while (1) {                console.log(i);            }        })    </script>

　　

使用WebWorker(也不能操作DOM元素)

    <button id="btn">Test</button>    <script>        var work = new Worker(‘task.js‘);        work.onmessage = function (event) {         //回呼函數            alert(event.data);        }        work.postMessage();                         //調用work，可以傳參數        $(btn).click(func);        function func() {            alert(‘message‘);        }    </script>task.js:onmessage = func;　　　　　　　　　　　　　　　　　　　　//調用的方法function func() {    var i = 0;    while (1) {        console.log(i++);    }}

　　

 

2.範圍

　　js是函數級範圍，內部能訪問外部變數。沒有塊級範圍（if else try catch）

    <script>        if (false) var j = 100;         //1.函數級範圍  2.變數前置        alert(j);                       //彈出undefined        alert(i);                       //報錯 未定義    </script>

　　自執行函數在聲明變數後執行。

    <script>        var j = 100;        +function func() {          //這裡的~，也可以替換成+,!,~等其他一元操作符            alert(j);               //彈出undefined            var j;                  //變數前置        }();                        //如果沒有這個~的話，解析器會認為function是一個函式宣告的開始，而後面()將會導致語法錯誤。在function前面加上~時，就變成了一個函數運算式，而函數運算式後面又添加了一個()就變成了一個立即執行的函數了。    </script>

　

　

3.閉包

　　閉包就是改變變數的範圍。閉包會產生記憶體無法釋放問題。

        function func() {            var j = 10;                 //函數外不能訪問到j            return function () {        //通過閉包方式讓外面能訪問到j                return j;            }        }        var k = func()();        alert(k);

　

　

4.this

　　誰調用，this就指誰。當有閉包存在的時候，需注意this指向的調用者。

    <script>        this.m = 10;        var obj = {            m: 1            , func: function () {                               alert(this.m);            }            , bb: function () {                 //閉包函數                return function () {                    alert(this.m);                }            }        }        obj.func();                             //this指obj        obj.bb()();                             //最終this指window    </script>

　　

　　附件：Concurrent.Thread.js

　　本節也只是拋磚引玉，內容中可能有誤，希望各位如果發現錯誤的話，請及時告知。

[JS] JavaScript由淺入深(3) 進階