JavaScript 执行机制 location 对象

目录

一、JavaScript  执行机制

1、单线程

2、同步和异步

 3、执行机制

二、location 对象

 1、什么是 location 对象

 2、URL

 3、location 常用属性

 4、获取 URL 的参数

 5、location 对象的方法

---

一、JavaScript  执行机制

1、单线程

JavaScript 语言的一大特点就是 单线程 ，也就是说， 同一个时间只能做一件事 。这是因为

Javascript 这门脚 本语言诞生的使命所致—— JavaScript 是为处理页面中用户的交互，以及操作

DOM 而诞生的。比如我们对 某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添

加，之后再删除。

单线程 就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题

是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

2、同步和异步

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许

JavaScript 脚本创 建多个线程。于是，JS 中出现了 同步 和 异步。

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如

做饭的同步做 法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事

情。比如做 饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

他们的本质区别： 这条流水线上各个流程的执行顺序不同

同步任务	异步任务
同步任务都在主线程上执行，形成一个 执行栈	JS 的异步是通过回调函数实现的。 一般而言，异步任务有以下三种类型: 1、普通事件，如 click、resize 等 2、资源加载，如 load、error 等 3、定时器，包括 setInterval、setTimeout 等 异步任务相关 回调函数 添加到 任务队列 中（任务队列也称为消息队列）。

                      

 3、执行机制

1. 先执行执行栈中的同步任务。
2.  异步任务（回调函数）放入任务队列中。
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任 务结束等待状态，进入执行栈，开始执行。

二、location 对象

1、什么是 location 对象

   window 对象给我们提供了一个 location 属性 用于 获取或设置窗体的 URL ，并且可以用于 解析

URL 。 因为 这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

 

 2、URL

统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个

文件都有 一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL 的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

URL 的组成：

各部分	说明
protocol	网络协议，常用的如http，ftp，mailto等
host	服务器的主机名，如www.example.com
port	端口号，可选，省略时使用协议的默认端口，如http默认端口为100
path	路径，如“/web/index.html”
query	参数，键值对的形式，通过“&”符号分隔，如“a=3&b=4”

 3、location 常用属性

属性	说明
location.search	返回（或设置）当前URL的查询部分（“?”之后的部分）
location.hash	返回一个URL的锚部分（从“#”开始的部分）
location.host	返回一个URL的主机名和端口
location.hostname	返回URL的主机名
location.href	返回完整的URL
location.pathname	返回URL的路径名
location.port	返回一个URL服务器使用的端口号
location.protocol	返回一个URL协议

【重点】： href 和 search 

4、获取 URL 的参数

创建login.html登录页面：

//  创建login.html登录页面

  用户名： 
  

创建index.html首页：

// 创建index.html首页：
console.log(location.search);  // 结果为：?uname=andy
    // 1. 去掉search中的问号“?”
    var params = location.search.substr(1);
    console.log(params); // 结果为：uname=andy
    // 2. 把字符串分割为数组
    var arr = params.split('=');
    console.log(arr); // 结果为：["uname", "andy"]
    var div = document.querySelector('div');
    // 3. 把数据写入div中
    div.innerHTML = arr[1] + '欢迎您';

5、location 对象的方法

常用方法：

方法	说明
assign()	载入一个新的文档
reload()	重新加载当前文档
replace()	用新的文档替换当前文档，覆盖浏览器当前记录