Js高级总结4 JavaScript线程机制与事件机制

********
常见浏览器和内核
IE Firefox Safari Opera Chrome
IE 内核 Trident
Firefox 内核 Gecko
Safari 内核 Webkit
Opera 内核 Blink
Chrome 内核 Chromium/Blink
****定时器****
1 定时器回调函数是分线程执行的吗？
主线程执行 js单线程
2 定时器如何实现？
事件循环模型
****Js单线程****
代码分类 初始化代码 回调代码
Js引擎执行代码的基本流程
先执行初始化代码
设置定时器
绑定监听
发送ajax请求
执行回调代码 （异步执行）
****事件循环模型****
代码分类
初始化执行代码 包含绑定dom事件监听 设置定时器 发送ajax请求
回调执行代码（异步执行） 处理回调逻辑

事件（定时器/Dom事件/Ajax事件）管理模块

****Web Worker****
Js分线程的实现
Worker 构造函数加载分线程执行的js文件
Worker.prototype.onMessage 用于接收另一个线程的回调函数
Worker.prototype.postMessage 向另一个线程发送消息
worker内部代码不能操作Dom

 <input type="text" placeholder="数值" id="number">
    <button id="btn">计算</button>
 <script src="worker.js"></script>

  // 斐波那契数列实现
        // 1 1 2 3 5
        var input = document.querySelector('#number')
        document.querySelector('#btn').onclick = function () {
            var number = input.value
            // 创建一个worker对象
            var worker = new Worker('worker.js')
            //绑定接收消息监听
            worker.onmessage = function(event){
                console.log('主线程接收分线程返回的数据');
                console.log(event.data)
            }
            //向分线程发送消息
            worker.postMessage(number)
            console.log('主线程向分线程发送数据:'+number)
        }

//worker.js
function fibonacci(number) {
    return number <= 2 ? 1 : fibonacci(number-1) + fibonacci(number-2)//递归调用
}

var onmessage = function (event) {
    var number = event.data
    console.log('分线程接收到主线程发送的数据:'+number)
    // console.log('onMessage');
    var result = fibonacci(number)
    // var upper = event.data.toupperCase()//通过event.data获得发送来的数据
    // postMessage(upper)
    postMessage(result)
    console.log('分线程向主线程返回数据:'+result)
}

console.log(this)
//分线程中全局对象不再是window