单线程

记住一句话:JavaScript语言是单线程的

区分线程和进程

进程是一个工厂,工厂有它的独立资源-工厂之间相互独立-线程是工厂中的工人,多个工人协作完成任务-工厂内有一个或多个工人-工人之间共享空间

如果是 windows 电脑中,可以打开任务管理器,可以看到有一个后台进程列表。对,那里就是查看进程的地方,而且可以看到每个进程的内存资源信息以及 cpu 占有率。

为什么JavaScript是单线程的

JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript 不能有多个线程呢 ?这样能提高效率啊。

JavaScript 的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript 的主要用途是与用户互动,以及操作 DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript 同时有两个线程,一个线程在某个 DOM 节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

所以,为了避免复杂性,从一诞生,JavaScript 就是单线程,这已经成了这门语言的核心特征,将来也不会改变。

为了利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制,且不得操作 DOM。所以,这个新标准并没有改变 JavaScript 单线程的本质。

总结一句话:如果没有遇到条件或者循环,程序按照顺序从上往下依次执行

定时器

window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下:

window.setTimeout(code,millisec);

window.setInterval(code,millisec);

其中,code可以是用引号括起来的一段代码,也可以是一个函数名,到了指定的时间,系统便会自动调用该函数,当使用函数名作为调用句柄时,不能带有任何参数;而使用字符串时,则可以在其中写入要传递的参数。两个方法中的第二个参数是millisec,表示延时或者重复执行的毫秒数。

清除定时器

clearTimeout(定时器名)

clearInterval(定时器名)

同步异步

当变量和函数的声明处在作用域比较靠后的位置的时候,变量和函数的声明会被提升到作用域的开头。

为什么会有同步和异步

因为JavaScript的单线程,因此同个时间只能处理同个任务,所有任务都需要排队,前一个任务执行完,才能继续执行下一个任务,但是,如果前一个任务的执行时间很长,比如文件的读取操作或ajax操作,后一个任务就不得不等着,拿ajax来说,当用户向后台获取大量的数据时,不得不等到所有数据都获取完毕才能进行下一步操作,用户只能在那里干等着,严重影响用户体验

因此,JavaScript在设计的时候,就已经考虑到这个问题,主线程可以完全不用等待文件的读取完毕或ajax的加载成功,可以先挂起处于等待中的任务,先运行排在后面的任务,等到文件的读取或ajax有了结果后,再回过头执行挂起的任务,因此,任务就可以分为同步任务和异步任务

同步任务

同步任务是指在主线程上排队执行的任务,只有前一个任务执行完毕,才能继续执行下一个任务,当我们打开网站时,网站的渲染过程,比如元素的渲染,其实就是一个同步任务

异步任务

异步任务是指不进入主线程,而进入任务队列的任务,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程,当我们打开网站时,像图片的加载,音乐的加载,其实就是一个异步任务

异步机制

总的来说,JavaScript的异步机制包括以下几个步骤

(1)所有同步任务都在主线程上执行,行成一个执行栈

(2)主线程之外,还存在一个任务队列,只要异步任务有了结果,就会在任务队列中放置一个事件

(3)一旦执行栈中的所有同步任务执行完毕,系统就会读取任务队列,看看里面还有哪些事件,那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行

(4)主线程不断的重复上面的第三步

异步编程

单线程从从任务队列中读取任务是不断循环的,每次栈被清空后,都会在任务队列中读取新的任务,如果没有任务,就会等到,直到有新的任务,这就叫做任务循环,因为每个任务都是由一个事件触发的,因此也叫作事件循环

异步编程主要有:1、setTimeout  2、ajax回调函数

预解析

JavaScript引擎在对JavaScript代码进行解释执行之前,会对JavaScript代码进行预解析,在预解析阶段,会将以关键字var和function开头的语句块提前进行处理。

关键问题是怎么处理呢?

当变量和函数的声明处在作用域比较靠后的位置的时候,变量和函数的声明会被提升到作用域的开头。

函数提升

变量提升 

看完函数声明的提升,再来看一个变量声明提升的例子

由于JavaScript的预解析机制,上面这段代码,alert出来的值是undefined,如果没有预解析,代码应该会直接报错a is not defined,而不是输出值,不是说要提前的吗?那不是应该alert出来1,为什么是undefined?

所以我们说的提升,是声明的提升。

那么再回过头看,上面的代码就等效于

所以变量的提升只是声明的提升

函数同名 

同名的函数,后面的会覆盖前面的

变量和函数同名

当出现变量声明和函数同名的时候,只会对函数声明进行提升,变量会被忽略。

预解析是分作用域的

提升原则是提升到变量运行的环境(作用域)中去。

函数表达式不会提升

函数表达式,并不会被提升。只是简单地当做变量声明进行了处理

作用域

全局作用域

直接编写在 script 标签之中的JS代码,都是全局作用域;

  或者是一个单独的 JS 文件中的。

  全局作用域在页面打开时创建,页面关闭时销毁;

  在全局作用域中有一个全局对象 window(代表的是一个浏览器的窗口,由浏览器创建),可以直接使用。

所有创建的变量都会作为 window 对象的属性保存。

局部作用域(函数作用域)

在函数内部就是局部作用域,这个代码的名字只在函数的内部起作用

  调用函数时创建函数作用域,函数执行完毕之后,函数作用域销毁;

每调用一次函数就会创建一个新的函数作用域,它们之间是相互独立的。

将这样的所有的作用域列出来,可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

隐式全局变量

声明变量使用`var`, 如果不使用`var`声明的变量就是全局变量( 禁用 )

作用域及作用域链

全局作用域---全局变量

局部作用域---局部变量---只在当前作用域下有效

块作用域?(js中没有)

只有函数才能产生局部作用域

作用域链的查找规则:

先从当前的作用域中查找,如果有,就返回

如果没有从上一级查找,有就返回,没有继续上一级查找,直到全局

如果全局没有,就报错

对象

为什么要有对象

函数的参数如果特别多的话,可以使用对象简化

JavaScript中的对象

JavaScript中的对象其实就是生活中对象的一个抽象。

JavaScript的对象是无序属性的集合。

其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript中的对象想象成键值对,其中值可以是数据和函数。

Class=”d1”

Key = value

对象的行为和特征

特征---属性

行为---方法

Tips:

事物的特征在对象中用属性来表示。

事物的行为在对象中用方法来表示。

对象创建方式

对象字面量

new Object()创建对象 

工厂函数创建对象

自定义构造函数 

属性和方法 

1. 如果一个变量属于一个对象所有,那么该变量就可以称之为该对象的一个属性,属性一般是名词,用来描述事物的特征

2. 如果一个函数属于一个对象所有,那么该函数就可以称之为该对象的一个方法,方法是动词,描述事物的行为和功能

new关键字

构造函数,是一种特殊的函数。主要用来在创建对象时初始化对象,即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。

1.、构造函数用于创建一类对象,首字母要大写。

2.、构造函数要和new一起使用才有意义。

new在执行时会做三件事情:

1、new会在内存中创建一个新的空对象

2、new会让this指向这个新的对象

3、new会返回这个新对象

this详解

JS中this的指向问题,有时会让人难以捉摸,随着学习的深入,我们可以逐渐了解。

函数内部的this几个特点:

1. 函数在定义的时候this是不确定的,只有在调用的时候才可以确定

2. 一般函数直接执行,内部this指向全局window

3. 函数作为一个对象的方法,被该对象所调用,那么this指向的是该对象

4. 构造函数中的this其实是一个隐式对象,类似一个初始化的模型,所有方法和属性都挂载到了这个隐式对象身上,后续通过new关键字来调用,从而实现实例化

对象的使用

遍历对象的属性

通过for..in语法可以遍历一个对象

删除对象的属性

JavaScript 预解析、对象、错误相关推荐

  1. JavaScript(三)—— JavaScript 函数/JavaScript 作用域/JavaScript 预解析/JavaScript 对象

    本篇为 JavaScript 系列笔记第三篇,将陆续更新 JavaScript(一)-- 初识JavaScript/注释/输入输出语句/变量/数据类型 JavaScript(二)-- JavaScri ...

  2. JavaScript 预解析机制

    JavaScript预解析 文章目录 JavaScript预解析 JS预解析? 一.预解析受体 二.对var的预解析 三.对function的预解析 四.var在作用域内 五.function作参.在 ...

  3. JavaScript预解析、作用域题目记录

    JavaScript预解析.作用域题目记录 写出以下题目执行的结果及过程分析 function fun ( n ) {console.log( n );var n = 456;console.log( ...

  4. Javascript预解析、作用域、作用域链

    最近在看js的一些资料,总结一下昨晚看到的js作用域方面的知识,不准确的地方希望留言指正! 先看片段js代码如下: 1 < script type="text/javascript&q ...

  5. Javascript预解析、代码执行

    1.js引擎分为两部 :预解析 代码执行 预解析js引擎会把 js 里面所有的 var 还有 function 提升到当前作用域的最前面 代码执行 按照代码书写的顺序从上往下执行 2.预解析分为 变量 ...

  6. JavaScript ( 预解析 )

    <script> // 预解析:教如何看懂代码的执行过程 // js的执行过程: /* 1.解析 - 预解析 2.执行 - 然后,代码按照预解析的结果顺序执行 */ // 预解析具体在做什 ...

  7. JavaScript预解析详解

    JS预解析 JS解析器在运行JS代码时分两步: 预解析和代码执行 预解析 JS引擎会把JS里面所有 var 和 function 提升到当前作用域的最前面 代码执行时, 按照代码书写的顺序从上往下执行 ...

  8. 轻松搞定javascript预解析机制(搞定后,一切有关变态面试题都是浮云~~)

    hey,guys!我们一起总结一下JS预解析吧! 首先,我们得搞清楚JS预解析和JS逐行执行的关系.其实它们两并不冲突,一个例子轻松理解它们的关系: 你去酒店吃饭,吃饭前你得看下菜谱,点下菜(JS预解 ...

  9. 函数(arguments),作用域,预解析,对象

    函数(arguments) JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性.也就是说所有函数都内置了一个arguments对象,arguments对 ...

最新文章

  1. C++ 类里面,函数占用存储空间问题
  2. 【干货分享】流程DEMO-补打卡
  3. [position]返回顶部
  4. 【转】请不要做浮躁的人。
  5. 3月21日阿里云北京峰会的注册二维码
  6. lzg_ad:在CF卡上实现EWF功能
  7. [JavaScript实例解析]js计算器
  8. 音频系统测试软件:Smaart for Mac
  9. 南昌工程学院c语言试题,南昌工程学院概率论与数理统计试题库部分题目
  10. Android 接入阿里云推送com.aliyun.ams:alicloud-android-push:3.7.4步骤(二)
  11. 麟龙指标通达信指标公式源码_通达信仿麟龙决策曲线指标公式
  12. 微信视频号视频怎么下载保存到手机相册?
  13. python程序基础网课答案_Python程序设计基础智慧树网课答案
  14. 深圳和信中欧金融科技研究院开业,着力打造金融科技高地项目
  15. 2020第八届“泰迪杯”特等奖(基于 BERT 深度语言模型的“智慧政务”文本挖掘应用)
  16. 【心灵鸡汤】浪子助你提高解决问题能力
  17. 编程理念-程序基本编写IPO方法
  18. YUV420视频上面添加字幕
  19. 2022元宇宙十大商业魔咒
  20. 2020-08-28

热门文章

  1. LTC流程变革经验详细介绍!华为系智谋帮咨询辅导双登集团LTC变革及基于LTC的营销拓展能力提升!
  2. javascript中的发布者与订阅者
  3. c语言有开始菜单的flybird,GitHub - ruocen/flybirdremotecontroller: 飞鸟群控,pc电脑控制iOS手机...
  4. 9月17日服务器维护,9月17日服务器移民公告
  5. html中td或th标签的宽度设置
  6. 深入理解css3中的flex-grow、flex-shrink、flex-basis (转)
  7. 【Unity】LineRenderer模拟橡皮筋弹跳效果
  8. mysql主从数据库
  9. Prometheus + Grafana 监控和告警
  10. Python数据挖掘入门与实践pdf