BOM（二）：同步和异步、location对象、navigator对象、history对象

一、JS的执行机制

1.js是单线程

 2、同步和异步

本质区别是执行顺序不同。 

下面执行的结果是什么？ 

答案是123

下面这个也是123

 

下面这个什么原因？

简单来说，异步任务里面放的是回调函数。

3.JS的执行机制

1.先执行执行栈中的同步任务
2.异步任务放入任务队列中
3.执行栈中的所有同步任务执行完毕后，系统就会按次序读取任务队列中的异步任务，然后开始执行异步任务
4.系统读取异步任务的时候，先看下你这个异步是个什么玩儿应，如果是个点击，那我就等着你点击，如果是倒计时，那我就等时间到。当事件触发的时候，就把回调函数扔到异步任务里，然后等主执行栈跑完，就按顺序执行异步任务
5.事件循环就是说异步任务执行完之后，系统还会回到任务队列里去看，如果还有异步任务，就扔到主执行栈执行，执行完再回去看，如果还有就再执行。比如我这个点击事件，点完了执行，然后回去看，我如果又点了一次，就再执行，然后再回去看

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）。 

二、location对象

1.URL

2.location对象的属性

5s之后自动跳转页面案例：

<div>页面跳转</div>
<script>
    var div = document.querySelector('div');
    var i = 5;
    countDown();
    var timer = setInterval(countDown, 1000);
    function countDown() {
        div.innerHTML = '页面还有' + i + '秒就跳转啦！';
        if (i == 0) {
            location.href = 'http://www.baidu.com';
            clearInterval(timer);
        }
        i--;
    }
</script>

3.获取URL参数——获取登录用户名

使用location.search获取
比如我们让用户输入用户名登录，然后点击登录后把用户名传到首页，显示某某某欢迎您！
这里建立两个页面，一个登录页login.html，一个首页Index.html

（1）登录页：

<form action="12.index.html">
    <label for="">用户名：</label><input type="text" name="uname" id="">
    <input type="submit" value="登录">
</form>

 （2）首页：

比如我登录页输入的是zzy
我们主要要搞得是uname这个参数，点击登录后会自动传给URL的search参数，我们使用location.search获取该参数，得到的是?uname = zzy，首先利用字符串方法substr把？去掉，然后再使用split把字符串划分为数组，然后就能把名字拿过来了

<div>你好</div>
<script>
    var div = document.querySelector('div');
    console.log(location.search);  //?uname = zzy
    var name = location.search.substr(1);  //先把？去掉  (strat,截几个)第二个参数如果不写，默认是取到最后一个
    var arr = name.split('='); //利用split分割为数组
    console.log(arr); //['uname', 'zzy']
    div.innerHTML = '你好,' + arr[1];  
</script>

4.location对象的方法

 

三、navigator对象

可以判断你是手机还是pc打开，从而切换相应的页面

四、history对象