数据类型

• 分类

  • 基本(值)类型
    • string: 任意字符串
    • number: 任意数字
    • boolean: true false
    • undefined: undefined
    • null: null
  • 对象(引用)类型
    • object: 任意对象
    • function: 一个特别的对象(可以执行)
    • array: 一种特别的对象(属性有数值下标属性,数组内部的元素是有序的)

• 判断

  • typeof: 返回数据类型的字符串表达typeof tmp==="undefined",array和object的typeof都是object所以不能区别
  • instanceof: 实例
  • =/ 一般判断全等用===这个不做数据转化a===undefined 一般用于null undefined的判断(因为他们只有一个值)

• undefined与null区别

  • undefined 表示只有定义没有赋值
  • null 表示定义了赋值了值为null
  • 设置null的初衷是为了表示这个变量准备被赋值成对象,但是目前还没有赋值,所以typeof null的结果是object
  • null的另一个作用是将没有用的对象的地址设置为null,当内存没人指的时候就会释放,被垃圾回收器回收

• 在什么时候将变量的值赋值为null

  • 在初始化但是临时不赋值的时候,为了标记
  • 在变量不用的时候释放内存

• 严格区分数据类型与变量类型

  • 数据的类型
    • 基本类型
    • 对象类型
  • 变量类型(实际上指的是变量值的类型,是存了数字还是地址)
    • 基本类型: 保存的是基本类型数据
    • 引用类型: 保存的是地址的路径

数据,变量,与内存

• 数据: 存储在内存中代表特定信息的东西,本质上是010101..
• 内存: 内存条通电之后可以存储数据的空间(临时的),一个内存块里面有两个小数据一个是地址值一个是存的值
  • 内存的分类有栈,堆
  • 栈里面存全局变量和局部变量
  • 堆里面是对象的本身(但是表示堆的标识符是在堆空间里面的)
• 变量: 可变换的量,由变量名和值组成,每个变量名都占用一小块内存

内存中所有的操作的目标都是数据,操作的运算有:

• 算数运算

• 逻辑运算

• 赋值运算

• 运行函数

• 数据,变量,内存之间的关系

内存是存储数据的临时空间,变量是内存的标识

• 内存与赋值的问题

var a=XXX;a中到底存了什么?

• 当XXX是基本数据类型,那么他保存的就是这个数据
• 当XXX是对象的时候,保存的是对象的地址值
• 当XXX是变量的时候,保存的是XXX的内存内容(两者都有可能)
• 当两个引用变量指向了同一个对象,通过一个变量修改数据,那么另一个变量看到的是修改后的数据
• 对象在函数传递参数的时候是将内容赋值给了形参,对象赋值的内容是地址,所以相当于是传地址
• 值得注意这两种情况

  var a={age:12};var b=a;a={age:13};// 此时ab指向的地址发生了改变,两者不相干var fun=function(v){v={age:15};}fun(b);// 此时b并不会发生改变因为v是一个**独立的变量**,最开始是和b指向了一个地址,但是赋值之后指向的地址发生了改变,所以v的变化不会影响b

• JS是如何管理内存的
  1. 内存生命周期
  • 分配小的内存空间,获得小内存的使用权
  • 存储数据进行反复操作
  • 没人指向小内存空间的时候释放空间
  1. 释放内存
  • 程序或者作用域结束的时候释放作用域里面的变量(注意这里指的是释放标识符,小内存早就被释放了)
  • 对于对象使用垃圾回收器回收

对象

• 什么是对象
  • 多个数据的封装体
  • 用来保存多个数据的容器
  • 一个对象代表现实中的一个事物
• 为什么要用对象
  • 统一管理多个元素
• 对象的组成
  • 属性
  • 方法(特别的属性–属性值是函数)
• 访问对象内部的元素
  • OBJ.属性名 当属性名是关键字/包含-/包含/变量名不确定,用变量存储变量名的时候不能用
  • OBJ["属性名"]

函数

• 为什么要用函数
  • 提高代码复用
• 如何定义函数
  • 函数声明
  • 表达式
• 函数的调用
  • fun.call(obj): 让一个函数成为一个陌生属性的方法是JS的一大特性
  • AAA()

回调函数

• 什么是回调函数

  • 自己定义的
  • 自己没有调用(指的是没有写明,例如window.onclick就是一个没有调用的回调函数,是在特定时间自动执行的)
  • 最后执行了

• 常见的回调函数

  • dom事件回调函数(与用户交互比较重要的点,发生时间的DOM元素)
  • 定时器回调函数
  • ajax回调函数(与后台交互比较重要的点)
  • 生命周期回调函数

IIFE

IIFE(Immediately-Invoked Function Expression) 立即调用函数表达式

一般来说我们写的是非匿名函数,这样可以将他存起来,当时我们也可以写没有对象接受内容的匿名函数,因为没有标识符标识他,所以他必须立即执行,否则以后就无法调用了(这里的非匿名不是说setInterval(function(){},1000)这种,因为传值的时候相当于赋值了)

对于上述的匿名函数我们必须要当场执行

function(){alert("123")'
}();

在后面加上([参数列表])就可以执行了,因为我们将前面当作了一个整体去执行,最好前面也加上一个()变成

(function(){alert("123")'
})();

加上()之后函数定义的变量就从之前的全局变量变成了局部变量,好处有:

• 隐藏实现:这样的话其他函数就看不到这个函数了(因为本身他就要匿名,最好不要让其他函数看见)
• 不会污染外部的命名空间

于是我们可以像C++中封装函数一样去封装一个JS函数

(function(){function work1(){// true work code 1;}function work2(){// true work code 2;}function work2(){// true work code 3;}window.XXX=function(){if()...return work1();if()...return work2();return work3();}
})();

我们希望实现一个模块,但是不想暴露细节函数,于是全员匿名,最后提供一个中控函数绑定到window,这在之后就是创建模块的方法,例如

var myModule = (function module(){var someThing = "123";var otherThing = [1,2,3];function doSomeThing(){console.log(someThing);}function doOtherThing(){console.log(otherThing);}return {doSomeThing:doSomeThing,doOtherThing:doOtherThing}
})();myModule.doSomeThing();
myModule.doOtherThing();

函数中的this

注意的一点,对于如下的例子

function fun1(){function fun2(){console.log(this);}fun2();
}
fun1();

这里输出的this是window,同时请注意以下代码

var tmp=new Object;
function fun1(){console.log(this);function fun2(){console.log(this);}fun2();
}
tmp.fun=fun1;
tmp.fun();

返回

{fun: ƒ}
VM144:5 Window {0: Window, window: Window, self: Window, document: document, name: "", location: Location, …}

相当于只要不是明确是对象调的都是window

• this是什么
  • 任何函数本质上都是通过对象调用的
  • 所有函数内部都有一个变量this
  • 他指向的是调用函数的当前对象

JS的分号问题

• 可加可不加
• 但是如果不加分号导致二义性要加(小中括号开头的),例如

  var a=3
  (function(){...})()
  

  会被认为是要执行一个名字叫做3的函数,参数列表为fun…

  var a=3(function(){...})()
  

  那么就要加了

• 注意: JS在代码发布的时候会有一个合理压缩的过程,例如:

  var a=123;
  function my_first_function(){// ohh here is a notereturn 3;
  }
  

  会被压缩成

  var a=123;function b(){return 3;}
  

  不仅压行,还直接改函数名…

prototype

任何函数都具有prototype属性,一个函数默认指向了一个Object空对象(原型对象),也就是说在函数被创建的时候会JS会默认创建一个对象,这个对象的内容是空的

原型对象的元素是给事例对象用的,

在prototype中还有一个元素是constructor这是一个引用变量,指向了指向prototype的对象,也就是构造函数与原型对象有一个相互引用的关系

显式原型与隐式原型

• 每个函数function都有一个prototype,也就是显式原型
• 每个事例对象都有一个__proto__,可以称为隐式原型
• 事例对象的__proto__的值是构造函数的prototype
• 注意:显式原型与隐式原型都是引用对象,指向的是原型,验证方法就是在创建元素后修改显式原型的内容
• 在ES6之前程序员可以直接操作显式原型,但是不能操作隐式原型

与其他语言不同的是,大部分语言采用的是基于类的基础而JS是采用基于对象的继承,这就导致JS存在原型链

原型链

我们可以尝试一直输出一个对象的__porto__

function Fn(){var FnFunctionVals=1;return 0;}return 666;
}
var fn=new Fn();
console.log("Fn IS ",fn);
console.log("Fn PROTO",fn.__proto__);
console.log("Fn PROTO PROTO",fn.__proto__.__proto__);
console.log("Fn PROTO PROTO PROTO",fn.__proto__.__proto__.__proto__);console.log("Fn IS ",Fn);
console.log("Fn PROTO",Fn.__proto__);
console.log("Fn PROTO PROTO",Fn.__proto__.__proto__);
console.log("Fn PROTO PROTO PROTO",Fn.__proto__.__proto__.__proto__);

结果

Fn IS  Fn__proto__: Object
Fn PROTO Objectconstructor: ƒ Fn()__proto__: Object
Fn PROTO PROTO Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()arguments: (...)caller: (...)length: 1name: "isPrototypeOf"__proto__: ƒ ()[[Scopes]]: Scopes[0]propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
Fn PROTO PROTO PROTO null
Fn IS  ƒ Fn(){var FnFunctionVals=1;function tmp(){return 666;}
Fn PROTO ƒ () { [native code] }
Fn PROTO PROTO Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
Fn PROTO PROTO PROTO null

可以看到是Fn这个对象,请注意,此处没有调用函数的prototype而是直接调用了对象的__proto__他们是一样的,可以看到fn对象的第一个原型就是Object,这个object包含了指回fn对象的constructor,之后这个对象又指向了一个Object对象,最后被指向的对象没有原型了,但是他还是一个Object对象,他包含了Object最基本的对象

最后null的__proto__是报错…

从上面可以看到,我们其实是顺着隐式原型链连起来的,原型链是用来查找对象的属性的不是方法(虽然我认为方法也是属性…)

构造函数,原型等原型链之间的关系图与解释

我们有构造函数Foo()

从左上角开始看

• f1,f2是Foo构造函数构造的实例,他们的__proto__就是构造函数的prototype
• 对于构造函数Foo来说,prototype就是Foo的一个空实例,这个空实例的构造函数就是Foo
• 同时,Foo是一个函数,也是一个对象,Foo是由Function构造函数构造的一个function,所以Foo的__proto__是Function函数的prototype
• 对于构造函数Function来说他的prototype就是他的一个空实例,这个实例的构造函数就是他
• 同时Function是一个函数,所以Function是Function构造出来的一个对象,也具有__proto__,他的__proto__应该是Function函数的构造函数Function的prototype
• 对于Function的prototype来说,他是一个对象,所以他的__proto__就是Object
• 对于Object来说,他的prototype是他的空实例,空实例的构造函数就是Object
• 对于对象o1,他是Object的实例,所以__proto__就是Object的prototypr
• 对于Object来说,他是由Function创建的函数实例,所以他的__proto__就是Function的prototype

原型链的属性

我们可以把一个属性设置到原型链的属性上,那么我们声明一个事例的时候事例可以直接通过.访问到原型上设置的属性,当我们为这个实例设置相同的属性是时候,JS并不会查找原型链上有没有这个属性,而是直接将属性设置到了实例上,这相当于此时,对于这个实例有两个同名属性,一个在原型链上,一个在实例上,这样的修改不会影响到其他是实例

执行上下文

• 代码的分类
  • 全局代码
  • 函数局部代码
• 全局执行上下文
  • 在执行全局代码前将window设置为全局执行上下文
  • 对全局数据进行预处理
    • var定义为全局变量,值为undefined,添加windows属性
    • function 声明全局函数,同时赋值,添加为window方法
    • this设置为window
  • 从头执行代码
• 函数执行上下文
  • 在调用函数之前创建对应的函数执行上下文
  • 对局部数据进行预处理
    • 将形参列表赋值为实参为执行上下文添加对应的属性
    • 将argument赋值,添加上下文属性
    • var定义局部变量,赋值为undefined,添加上下文属性
    • function声明函数,赋值函数内容,添加上下文方法
    • 赋值this
  • 执行函数代码
• 局部变量的栈
  • 我们可以将存放标识符的栈进一步细分,存储全局变量的栈,存储局部函数变量的栈,全局元素栈可以被局部函数栈访问,但是局部元素栈的元素不可以在全局被访问,相当于这个栈在全局是被隐藏的
• 执行上下文栈
  • 全局代码执行的时候JS会创建一个栈存储全局上下文对象
  • 执行window的时候压栈
  • 函数执行的时候将函数上下文对象入栈
  • 程序结束之后对象出栈
  • 全局执行结束之后应该只可以看到window的上下文对象

作用域与作用域链

• 理解
  • 就是一块地盘,一个代码所在的区域
  • 相对于上下文对象,带编码的时候元素的作用域就确定了
• 分类
  • 全局作用域
  • 函数作用域
  • 块作用域(ES6之前没有)
• 作用
  • 隔离变量
• 与执行上下文的区别
  • 全局作用域外,每个函数都会创建自己的作用域,在函数定义的时候创建,而不是在函数调用的时候
  • 全局执行上下文是字啊全局作用域确定,JS代码马上要执行的时候确定的
  • 函数上下文是在调用函数的时候确定,函数体代码是在执行之前确定
  • 作用域是静态的,函数定义好就一直存在,不会变化
  • 上下文是动态的,调用的时候创建,结束的时候释放
  • 上下文环境对象是从属于作用域的
  • 全局上下文环境对应全局作用域
  • 函数上下文环境对应函数作用域
• 作用域链
  • 嵌套的作用域形成的由内而外的链称为作用域链
  • 当我们调用一个函数,JS顺着作用域链找不到就会报错,注意查找的时候如果这个属性是当前作用域中某个对象的属性,那么是找不到是

循环变量监听

以前写过这样的代码

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body><button>我是第0个</button><button>我是第1个</button><button>我是第2个</button>
</body><script>window.onload=function(){var bts=document.querySelectorAll("button");for(var i=0,len=bts.length;i<len;i++){bts[i].idx=i;bts[i].onclick=function(){alert(this.idx);}}}
</script>
</html>

实现了点击第几个弹出几

有一个坑就是如果不记录这个按钮是第几个就会出现谁点击都是3,这是因为在循环的时候只进行了函数声明,调用的时候函数内部i去window的作用域下找i,只找到循环结束的3,这就导致全输出3,一个解决方法是为按钮附上index值,也可以添加一个作用域不让onclick出去找i

window.onload=function(){var bts=document.querySelectorAll("button");for(var i=0,len=bts.length;i<bts.length;i++){(function(i){var sigBtn=bts[i];sigBtn.onclick=function(){alert(i);}})(i);}
}

区别就是为window内部又写了一个作用域,形参为i,这样的话找i就一定找的是形参i,现在只需要告诉每个按钮i的具体值,可以使用函数调用传递参数,但是这个函数只是在这里用一下,所以完全可以匿名立即执行,于是有了上面的代码,注意匿名函数的函数作用域,实际上这就用到了闭包的技术

闭包

• 如何产生闭包
  • 当一个嵌套的内部函数引用了嵌套的外部函数的变量,就产生了闭包
• 闭包是什么
  • 闭包有2种理解
  • 一种认为是嵌套在内部的子函数
  • 一种认为是包含被引用变量的对象
  • 他存在与内部函数中
• 产生闭包的条件
  • 函数嵌套
  • 内部函数引用了外部函数的变量
  • 外部函数被调用(注意,闭包出现于外层函数执行子函数变量提升的时候,而不是子函数被调用,甚至可能子函数不会被调用,但是在变量提升的时候已经有了闭包,当然,如果写的是var tmp=function(){}那必然在父函数开始的时候不产生闭包)

陷阱

function fn1(){var a=2;function fn2(){a++;console.log(a);}return fn2;
}
var f=fn1();
f()
f()

输出分别是3 4

看到f定义的那一句,模拟执行,f获得了fn1的返回值,我们执行fn1,首先是进入fn1,创建闭包,把闭包给了fn2,不调用fn2,直接返回fn2对象,不仅仅是代码,连着fn2刚刚拿到的闭包一起返回了,调用f的时候fn2使用了自己的闭包,找到a=2,输出了3,再次调用的时候fn2使用了自己的闭包,找到a=3,输出了4,想要恢复很简单,重新赋值f

其实错误版本的按钮点击函数,也是由于闭包惹得祸,如果没有闭包,函数已经被赋值怎么可能找到外边还有一个i呢,也是在定义的时候已经把i传进了onclick函数

• chrome开发人员工具Call Stack
  类似于上下文栈,唯一特殊的(anonymous)指的是全局栈

• 闭包的作用

• 使函数内部的变量在函数执行结束之后仍然活在内存中

• 让外部函数可以直接操作其他作用域的局部变量

• 被闭包指向的局部变量在函数执行完后不消失的原因是有闭包在指向这个变量, 而闭包没有消失的原因是有元素指向的存储闭包的函数

• 闭包的生命周期

  • 在子函数被定义的时候产生
  • 在子函数成为垃圾对象的时候消失

利用闭包实现js模块

• js模块就是具有特定功能的js文件,要求如下
• 将所有的函数与功能都放在函数内部
• 函数只可以暴露一个或者多个方法
• 当我们想要返回多个方法的时候可以采用对象的方法直接封装所有的函数,属性名可以命名为方法名,更加方便

例如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
</body>
<script src="./js/myScript.js"></script>
<script>var fn = myModule();fn.dootherthing();
</script>
</html>

function myModule(){var msg="My atguigu";function dosomething(){console.log("dosomtthing() "+msg.toUpperCase());}function dootherthing(){console.log("dootherthing() "+msg.toLowerCase());}return {dosomething: dosomething,dootherthing: dootherthing};
}

也可以使用立即调用函数直接将事例写入到window中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
</body>
<script src="./js/myScript.js"></script>
<script>fn.dootherthing();
</script>
</html>

(function (){var msg="My atguigu";function dosomething(){console.log("dosomtthing() "+msg.toUpperCase());}function dootherthing(){console.log("dootherthing() "+msg.toLowerCase());}window.fn={dosomething:dosomething,dootherthing:dootherthing}
})();

• 闭包的缺点
  • 局部变量释放延迟,占用内存
  • 容易造成内存泄漏
• 解决方案
  • 及时释放(f=null使得内部函数成为垃圾对象)
  • 不用闭包

内存溢出与泄漏

• 内存溢出
  • 一种程序运行的时候出现的错误
  • 当程序运行的时候需要内存超过剩余内存的时候,会抛出内存溢出错误

    var obj={};for(var i=0;<10000;i++)obj[i]=new Array(10000000);
  

  会造成溢出(同时注意这种语法,obj是一个伪数组,其实就是obj下面的属性为0,1,2,3…)浏览器显示崩溃了,内存不足

• 内存泄漏
  • 占用的内存没有被及时释放,这不是错误,只是一种问题,累计的内存泄漏多了容易导致内存溢出
  • 原因
    • 错误的调用了全局变量(eg 没有写var)
    • 没有及时清理计时器或回调函数
    • 闭包

对象的创建模式

• Object构造函数模式
  • 先创建一个空的object对象,然后动态的添加属性/方法
  • 起始的时候对象内部的数据不确定
  • 问题:语句多

   var p = new Object();p.name="1";p.age=2;p.setName=function(name){this.name=name; }
  

• 对象字面量模式
  • 使用{}创建对象,同时指定属性/方法
  • 适用于起始对象内部的元素数据是确定的
  • 问题: 如果创建了多个对象会有重复代码

  var p={name:"tom",age:12,setname:function(name){this.name=name;}
  }
  

• 工厂模式
  • 通过工厂函数(返回对象的函数)创建对象然后返回
  • 适用场景: 需要创建多个函数
  • 问题: 没有一个对象有具体的类型,都是Object

    function makePeople(name,age){var p={name:"tom",age:12,setname:function(name){this.name=name;}}return p;}
  

• 自定义构造函数模式
  • 自定义构造函数,通过new创建对象
  • 适用场景: 需要创建多个类确定的对象
  • 问题: 每个对象都有相同的数据 占用内存

    function People(name,age){this.name=name;this.age=age;this.setname=function(name){this.name=name;}}
  

  对于每一个事例,属性可能不相同,内存相互独立,但是方法是一样的,但是内存还是独立的,这造成了内存的占用,所以要将函数放在原型上,这样所有的函数都指向同一个"空对象"于是有了下面的模式

• 构造函数+原型的组合模式
  • 自定义构造函数,属性在函数中初始化,方法添加到原型上
  • 适用于要创建多个类型创建的对象

    function People(name,age){this.name=name;this.age=age;}Person.prototype.setname=function(name){this.name=name;}
  

继承模式: 原型链的继承

当创建了两个对象的构造-原型函数之后,需要建立两个类的继承关系,但是js是基于对象的继承的,所以子元素需要继承父元素的原型链,只需要将子元素构造函数的prototype设置为父元素的实例,eg

function Supper(){this.supProp="root";
}Supper.prototype.showSupper=function(){alert(this.supProp);
}function Suber(){this.subProp="suber";
}Suber.prototype=new Supper();     // 注意这里要先写,否则之前写的就成垃圾了Suber.prototype.showSuber=function(){alert(this.subProp);
}var sub=new Suber();
sub.showSupper();
sub.showSuber();

注意,以上代码存在隐患,因为sub是sup的子元素所以把Sub的prototype设置为Sub的实例,但是Sup实例的构造函数还是Sup,这里要同意修正为sub

function Supper(){this.supProp="root";
}Supper.prototype.showSupper=function(){alert(this.supProp);
}function Suber(){this.subProp="suber";
}Suber.prototype=new Supper();     // 注意这里要先写,否则之前写的就成垃圾了
Suber.prototype.constructor = Suber;Suber.prototype.showSuber=function(){alert(this.subProp);
}var sub=new Suber();
sub.showSupper();
sub.showSuber();

继承模式:借用构造函数继承

function Person(name,age){this.name=name;this.age=age;
}
function Student(name,age,p){Person.call(this,name,age);this.p=p;
}

相当于是

function Student(name,age,p){this.name=name;this.age=age;this.p=p;
}

并没有创建出一个继承关系,但是能用

继承模式: 组合继承

function Person(name,age){this.name=name;this.age=age;
}Person.prototype.setname=function(name){this.name=name;
}function Student(name,age,p){Person.call(this,name,age);this.p=p;
}Student.prototype=new Person();
Student.prototype.constructor=Student;
Student.prototype.setp=function(p){this.p=p;
}var s=new Student("A",1,2);
console.log(s.setname("B"));
console.log(s.setp(123));

复习

白天看

进程与线程

• 进程: 程序的一次允许占用了一个独立的内存空间
• 线程: 进程内部一个独立的执行单元,是程序执行的一个完整流程,是CPU最小调度单元
• 一个程序可以创建多个进程
• 一个程序如果每个进程只有一个线程那么就叫他但线程的
• 应用必须运行在一个进程的线程上
• 一个进程至少有一个允许的线程,叫主线程,自动创建,其他的叫分线程
• 一个进程的数据何以供多线程共享,进程之间不共享
• 线程池保存了多个线程对象容器实现复用
• 多个线程不一定同时进行,例如线程数目大于cpu核心数目

比较:

• 多线程
  • 优点:提高CPU利用率
  • 缺点:创建多线程有开心,线程切换有开销,存在锁死与状态同步问题
• 单线程
  • 优点: 代码简单
  • 缺点: 慢
• JS是单线程运行的,但是可以使用H5的web workers进行多线程允许
• 浏览器是多线程允许的
• 浏览器有单进程的,有多进程的
  • 多进程: chrome 新IE
  • 单进行: 火狐 老IE

浏览器内核

浏览器内核: 支持浏览器允许的核心程序

• chrome/Safasi: webkit
• firefox : Gecko
• IE : trident

页面的绘制（绘制，就是把一个HTML文件变成一个活灵活现的页面展示的过程…），只有一半轮子是Chrome自己做的，还有一部分来自于WebKit，这个Apple打造的Web渲染器。。。
之所以说是一半轮子来源于WebKit，是因为WebKit本身包含两部分主要内容，一部分是做Html渲染的，另一部分是做JavaScript解析的。在Chrome中，只有Html的渲染采用了WebKit的代码，而在JavaScript上，重新搭建了一个NB哄哄的V8引擎。目标是，用WebKit + V8的强强联手，打造一款上网冲浪的法拉利，从效果来看，还着实做的不错。。。
不过，虽说Chrome和WebKit都是开源的，并联手工作。但是，Chrome还是刻意的和WebKit保持了距离，为其始乱终弃埋下了伏笔。Chrome在WebKit上封装了一层，称为WebKit Glue。Glue层中，大部分类型的结构和接口都和WebKit类似，Chrome中依托WebKit的组件，都只是调用WebKit Glue层的接口，而不是直接调用WebKit中的类型。按照Chrome自己文档中的话来说，就是，虽然我们再用WebKit实现页面的渲染，但通过这个设计（加一个间接层…）已经从某种程度大大降低了与WebKit的耦合，使得可以很容易将WebKit换成某个未来可能出现的更好的渲染引擎。。。

内核是一个大程序,有很多模块

• 主线程
  • JS引擎:解析运行JS
  • HTML,CSS文档解析模块: 负责解析文本文件
  • DOM/CSS模块: 负责DOM文档结构对象的构建
  • 布局与渲染模块: 负责布局效果的绘制
• 分线程
  • 定时器模块: JS代码是单线程的,所以虽然模块是在分线程,但是代码还是在主线程
  • DOM事件响应模块
  • 网络请求模块
  • …

关于定时器

定时器真的是定时执行的吗?

定时器一般会延迟一点点(可以接受),单也有可能会延长很多时间(例如在支持很大的循环)

验证JS是单线程执行的

setTimeout(function(){console.log("A");
},1000);setTimeout(function(){console.log("B");
},2000);console.log("000000");
alert("pause");
console.log("111111");

当点击确定后等一会儿才开始alert,说明alert同时暂停了定时器模块与主线程,但是最新的chrome修改了定时器框架,不用等待了,按顺序输出

事件循环模型

• 代码分类:
  • 初始化代码
  • 回调代码
• js引擎的执行流程
  • 执行初始化函数代码,有一部分代码会在所有代码执行完才运行 我们称之为异步调用
  • 设置计时器,监听,网络请求
  • 在DOM事件发生的时候调用回调函数

• 模型的2个重要组成部分:
  • 事件管理模块
  • 回调队列
• 模型的运转流程
  • 执行初始化代码, 将事件回调函数交给对应模块管理
  • 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
  • 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行

H5 Web Workers

• 可以让js在分线程执行
• Worker

  var worker = new Worker('worker.js');
  worker.onMessage = function(event){event.data} : 用来接收另一个线程发送过来的数据的回调
  worker.postMessage(data1) : 向另一个线程发送数据
  

• 问题:
  • worker内代码不能操作DOM更新UI
  • 不是每个浏览器都支持这个新特性
  • 不能跨域加载JS

尚硅谷 JavaScript 笔记(张晓飞 2019 高级版)相关推荐

1. 尚硅谷 jQuery 笔记(张晓飞 2018)

   title: 尚硅谷 jQuery 笔记 date: 2020-11-24 21:40:50 toc: true description: jQuery是JS的一个封装的库函数集,用于DOM的CRUD ...

2. b站视频-尚硅谷jQuery教程张晓飞老师-笔记

   目录 前言 一.初识jQuery 1.了解jQuery 2.jQuery的基本使用 二.jQuery的两把利器 1.jQuery函数的使用 2.jQuery对象的使用 三.使用jQuery核心函数 1 ...

3. HTML5前端视频_Vue项目实战《硅谷外卖》-张晓飞-专题视频课程

   HTML5前端视频_Vue项目实战<硅谷外卖>-369人已学习 课程介绍         1.基于 Vue 的新版本: 2.项目是关于外卖业务的前后台分离Web App,功能模块包含商家, ...

4. 尚硅谷 JavaScript笔记 整理

   整理自https://github.com/codeOflI/codeOflI.github.io/blob/dev/source/_posts/js-note/javaScript/javaScri ...

5. JavaScript(基础、高级)笔记汇总表【尚硅谷JavaScript全套教程完整版】

   目   录 前言 JavaScript(基础+高级)配套资料下载 JavaScript 基础 学习地址 学习笔记 day 05(P001-P006)[2016.11.22] day 06(P007-P ...

6. 尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记

   前言 这个是我学习过程中的笔记,分享给大家,希望对大家有用. 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶),这里是视频链接. 我在前面有两篇对于web前端HTML和CS ...

7. 前端HTML5视频_谷粒音乐实战-张晓飞-专题视频课程

   前端HTML5视频_谷粒音乐实战-385人已学习 课程介绍         谷粒音乐是使用WEB技术(HTML.JavaScript.CSS)直接构建的移动端APP.本套视频深入移动端开发的核心部分. ...

8. ECMAScript视频-张晓飞-专题视频课程

   ECMAScript视频-246人已学习 课程介绍         ECMAScript(俗称: ES5, ES6)规范是前端工程师的技能(尤其ES6).如果你以前没有接触郭或者只是大概了解,那么本视 ...

9. HTML5实战-张晓飞-专题视频课程

   HTML5实战-179人已学习 课程介绍         本套视频是HTML5的实战视频,我们将综合HTML5的各个方面来构建一个fullpage(全屏滚动)的应用.课程将会从实战的角度深入全面的分析 ...

最新文章

1. 脑电传感器并不复杂，那精度呢？
2. [剑指Offer] 59.按之字形顺序打印二叉树
3. 量子位「MEET 2021智能未来大会」来啦！邀智能科技企业共探明日行业新格局
4. 面试项目 java-服务端 18h58
5. 前端程序员书桌上不可缺少的CSS书籍
6. liteide无法自动补全代码问题解决【go: cannot find GOROOT directory: c:\go】
7. 真正零基础Python入门：手把手教你从变量和赋值语句学起
8. java 常量池溢出_Java方法区和运行时常量池溢出问题分析（转）
9. 玩转Go语言之数据类型转换
10. XidianOJ 1096 数的拆分
11. java中String的特点，字面对象和构造方法的区别
12. vfp 打开服务器文件,VFP下客户机访问任意映射服务器的方法
13. 蓝鸽智慧计算机教室云服务平台操作说明,智慧教室操作说明.PDF
14. Unicode \u 编解码
15. 如何评价『黑客与画家』
16. 消费新品周报 | AWE海尔推出无尘洗衣机；卡西欧F1红牛车队合作新款运动手表...
17. oracle 10g express linux,使用Oracle10g express 版本方案介绍
18. SQL语句习题总练习
19. 安卓玩机搞机技巧综合资源--安装谷歌相机 小米查询信息 锁频段 提高网速【七】
20. 2021年江苏一级计算机报名时间,江苏2021年3月计算机一级报名时间安排

热门文章

1. Hold Time违例，该如何解决
2. 一线互联网架构师筑基必备技能之Java篇，一招彻底弄懂!
3. 博客移至https://huhu0706.github.io
4. 【三维点云】01-激光雷达原理与应用
5. 字节跳动，跳到哪了？
6. 【传输层01】传输层概述
7. dubbo-go 白话文 | go 和 java 互通有无
8. 管好自己，但行好事，不渡他人
9. golang学习笔记-1
10. 【三维目标分类 】PointNet详解（一）