[JS] JavaScript由浅入深(2) 进阶

  本节,将围绕以下几点来讲。

  知识点:多线程、作用域、闭包、this

  先顶后看

 

1.多线程

  在不支持H5的浏览器中。使用Concurrent.Thread.js.

  在支持H5中,使用WebWork.

 

  在H5以前,js是不支持多线程的。其中存在同步池和异步池的概念。当同步池处理完后,会调用异步池的事件,定时任务等。

 

以下很明显的区分js是否是多线程执行的

c#

js

1
2
3
4
5
<script>
    setInterval(function () {
        alert('1');
    }, 1000);
</script>

 

使用Concurrent.Thread.js(本质是用的js定时函数来模拟多线程)

1
2
3
4
5
6
7
8
9
10
11
12
<script>
    Concurrent.Thread.create(function () {
        $(btn).click(func);
        function func() {
            alert('message');
        }
        var i = 0;
        while (1) {
            console.log(i);
        }
    })
</script>

  

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <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)

1
2
3
4
5
<script>
    if (false) var j = 100;         //1.函数级作用域  2.变量前置
    alert(j);                       //弹出undefined
    alert(i);                       //报错 未定义
</script>

  自执行函数在声明变量后执行。

1
2
3
4
5
6
7
<script>
    var j = 100;
    +function func() {          //这里的~,也可以替换成+,!,~等其他一元操作符
        alert(j);               //弹出undefined
        var j;                  //变量前置
    }();                        //如果没有这个~的话,解析器会认为function是一个函数声明的开始,而后面()将会导致语法错误。在function前面加上~时,就变成了一个函数表达式,而函数表达式后面又添加了一个()就变成了一个立即执行的函数了。
</script>

 

 

3.闭包

  闭包就是改变变量的作用域。闭包会产生内存无法释放问题。

1
2
3
4
5
6
7
8
function func() {
    var j = 10;                 //函数外不能访问到j
    return function () {        //通过闭包方式让外面能访问到j
        return j;
    }
}
var k = func()();
alert(k);

 

 

4.this

  谁调用,this就指谁。当有闭包存在的时候,需注意this指向的调用者。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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

  本节也只是抛砖引玉,内容中可能有误,希望各位如果发现错误的话,请及时告知。

posted @   Never、C  阅读(870)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示