JavaScript笔记(19)之JS执行机制

今天是周日,美好的一天从打代码开始

this指向

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向是哪个调用它的对象.

1.全局作用域或者普通函数中this指向全局对象window(定时器的this也指向window,因为函数前面的window.是被省略的)

2.方法中调用this指向的也是调用它的对象

3.构造函数中this指向构造函数的实例

JS执行机制

JS是单线程

JavaScript语言的一大特点就是单线程,也就是说,同一时间只能做一件事.这是因为JavaScript这门脚本语言诞生的使命所在--JavaScript是为处理页面中用户的交互,以及操作DOM而诞生的.比如我们对某个DOM元素进行添加和删除操作,不能同时进行.应该先添加后删除.

单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务,这样所导致的问题是:如果JS执行的时间比较长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉

同步和异步

为了解决这个问题,利用多核CPU的计算能力,HTML5提出Web Worker,允许JavaScript脚本创建多个线程.于是,JS中出现了同步和异步

同步

前一个任务完成后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的,同步的.比如我们烧水煮饭,等水开了,再去切菜,炒菜

异步

你在做一件事情时,因为这件事情会花费很长时间,在做这件事的时候,你还可以去处理其他事情,比如在等烧水的同时,先去切菜炒菜

就比如这段代码,按理来说执行的顺序应该是1-->3-->2,但实际上却是1-->2-->3,这实际上也是异步

我们再看看这段代码,明明定时器的时间为0,但执行的结果还是1-->2-->3,我们来探究一下原因吧

同步任务

JS将同步任务都放在主线程上执行,形成一个执行栈

异步任务

JS的异步是通过回调函数实现的

异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)

一般而言,异步任务有以下三种类型

1. 普通事件,如onclick,resize等
2. 资源加载,如load,error等
3. 定时器本身为同步任务,但里面的回调函数为异步任务

执行顺序:

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

我们来分析一下下面的这个程序的执行过程:

由于主线程不断的重复获得任务,执行任务,再获取任务,再执行,所以这种机制被称为事件循环(Event Loop)

location

什么是location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL,并且用于解析URL.因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象

URL

统一资源定位符(Uniform Resource Locator)是互联网上的每个文件都有的一个唯一的URL,它包含了信息,指出文件的位置以及浏览器应该怎么处理它

location对象的属性

我们在控制台输入location:就能得到当前的URL

我们点击按钮后就出现当前页面的URL:

5秒后自动跳转百度:

还做了一个取消跳转的链接

案例: 获取URL参数数据

需求: 我们使用一个账户登录,登录以后跳转到另一个界面,并且显示此账户的 用户名+"你好"

案例分析:

login.html 部分:

index.html部分:

location的其他方法:

assign这个方法是会记录浏览历史的,可以实现后退功能

replace相反,不保留历史记录,无法返回上一步

reload()就相当于是刷新.

navigator对象

navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值

history对象

window对象给我们提供了一个history对象,与浏览器历史记录进行交互.该对象包含用户(在浏览器窗口中)访问过的URL.

后面就要开始将PC端的网页特效啦!