[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

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

时间: 2024-08-08 01:28:15

[JS] JavaScript由浅入深(3) 进阶的相关文章

[JS] JavaScript由浅入深(2) jQuery

jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. 官网API: http://api.jquery.com 下载: NuGet:Install-Package jQuery 1.主要功能 html选取,操作,css操作,事件,特效,遍历,ajax 2.版本 1.x:IE6+(本人测试,部分方法还是不

[JS] JavaScript由浅入深(1) 基本特性

1.全局变量的特性: 在函数体内直接写的变量(未用var标志)自动升级为全局变量. (function func() { i = 100; }()); alert(i); 非常不建议不写var. var num = 1; (function func() { i = 100; }()); delete i; delete num; if (typeof i != "undefined") alert(i); if (typeof num != "undefined"

Atitit.js javascript异常处理机制与java异常的转换.js exception process Voae

Atitit.js javascript异常处理机制与java异常的转换.js exception processVoae 1. 1. javascript异常处理机制 1 2. 2. Web前后台异常的统一处理 1 3.  java异常转换为js异常 1 3. -------------详细代码 2 1. 1. javascript异常处理机制 Throw str Not throw error  ..cause ie,ff error obj is diff.. 2. 2. Web前后台异常

潭州学院-JavaVIP的Javascript的高级进阶-KeKe老师

潭州学院-JavaVIP的Javascript的高级进阶-KeKe老师 讲的不错,可以学习 下面是教程的目录截图: 下载地址:http://www.fu83.cn/thread-283-1-1.html 觉得教程比较好,可以推荐哈!

Atitit.&#160;数据约束&#160;校验&#160;原理理论与&#160;架构设计&#160;理念模式java&#160;php&#160;c#.net&#160;js&#160;javascript&#160;mysql&#160;oracle

Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq  index2 3. 检查约束 (Check Counstraint) 对该列数据的范围.格式的限制(如:年龄.性别等)2 4. 默认约束 (Default Counstraint) 该数据的默认值2 5. trigger2 6. 外键机制  参照完整性:2 7. 断言约束:不必与特定的列绑定,可以理解为能应用于多个表的

js javascript:void(0) 真正含义

http://www.cnblogs.com/opper/archive/2009/01/12/1373971.html js javascript:void(0) 真正含义 我想使用过ajax的都常见这样的代码:<a href="javascript:doTest2();void(0);">here</a>但这儿的void(0)究竟是何含义呢?Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值.void 操作符用法格式如下:1

JS - JavaScript和DOM操作

1.HTML元素标记 - 超文本标记语言 决定你网页中有哪些东西 2.CSS - 样式表 决定你网页中的这些元素标记的样式和布局 3.JS - JavaScript 决定你网页中的这些元素标记的功能和特效 3.1.onclick:单机 ondblclick:双击 function 执行函数 alert 显示框只有确定 confirm 显示框有确定和取消 prompt 显示框下面填写内容 var 万能变量 <body> <a onclick="a()"></

jquery js javascript select 无限级 插件 优化foxidea版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <sc

js/javascript代码注释规范与示例

注释在代码编写过程中的重要性,写代码超过半年的就能深深的体会到.没有注释的代码都不是好代码.为了别人学习,同时为了自己以后对代码进行‘升级’,看看js/javascript代码注释规范与示例.来自:http://www.56.com/style/-doc-/v1/tpl/js_dev_spec/spec-comment.html 文件注释 文件注释位于文件的最前面,应包括文件的以下信息:概要说明及版本(必须)项目地址(开源组件必须)版权声明(必须)开源协议(开源组件必须)版本号(必须)修改时间(