# js高级知识点
## 线程
- 一个线程一次只能处理一件事情，多个线程可以多个事情同是进行。
**js中，分三个任务**
- 渲染任务
- js代码执行任务
- 事情处理任务
**js代码执行顺序**
- 先把主任务（代码任务）执行完毕
- 再去执行次要任务（包括setTimeOut 和 setInterval中的回调函数中的代码，这两个都属于宏任务，promise中的then属于微任务）
**setTimeOut**
- 至少在指定的时间后执行回调函数
- 因为要等主任务中的代码执行完毕之后才回去检查，setTimeOut的回调函数，有没有到执行时间
## 闭包
闭：闭合，关闭，封闭
包：包裹，包起来。
一个具有封闭的对外不公开的，包裹结构，或空间
- js中的闭包就是函数
- 闭包的原理就是作用域访问原则：上级作用域无法访问下级作用域。
- 闭包要解决的问题：1、闭包内的数据不允许外界访问，2、要解决的问题就是间接访问数据。
```javascript
// 例1
function foo(){
var num = 123;
return num;
}
var x = foo();
console.log(x)
var y = foo();
console.log(x===y) //这里因为是数值所以相等
// 例2（用来说明函数的每次调用，返回的对象都是新的，每次都不一样）
function foo(){
var obj = {
name: 'hyl',
age:15
}
return obj;
}
var obj1 = foo();
var obj2 = foo();
console.log(obj1 === obj2);
```
- 常见的问题
```javascript
for(var i=0;i<5;i++){
setTimeout(()=>{
console.log(i)
},0) // 5,5,5,5,5
}
div[i].onclick = function(){
console.log(i)
}
```
----
- 解决方式
```javascript
for(let i=0;i<5;i++){
setTimeout(()=>{
console.log(i) // 0，1，2，3，4,用es6的块级作用域解决
},0)
}
for(var i=0; i<5; i++){
setTimeout((function(j){
return function(){
console.log(i)
}
})(i),0) // 0，1，2，3，4,用闭包的方式解决
}
div[i].onclick = function(j){
return function(){
console.log(j)
}
}(i)
```
**沙箱模式**
----
原理：函数可以构建作用域，上级作用域不能直接访问下级作用域。
- 与外界隔绝的一个环境，外界无法修改环境内的任何信息，沙箱内的东西单独属于一个世界
- 360 沙箱模式，将软件和操作系统进行隔离，以达到安全的目的
- 苹果手机也是一个沙箱模式，隔离app的空间，每个app都是独立运行的。
- js的沙箱模式就是立即执行函数
```javascript
// 基本模式
(function(){
var a = 123;
})()
// jquery中的沙箱模式
(function(win){ // window对象最好不要全局引用，因为直接引用会破坏沙箱原则，所以我们选择新参的形式传入，此时沙箱使用window对象的时候，不会进行全局搜索window对象。
var itcast = {
getEle:function(){
}
}
win.itcast = itcast;
}
)(window)
```
- 沙箱模式一般应用于第三方框架或者插件或者书写一些独立的组件
**沙箱模式的**
- 沙箱模式使用的是IIFE（立即执行函数）,不会再外界暴露任何全局变量，也就不会造成全局对象污染。
- 沙箱模式中的所有数据，都是和外界相隔离的，外界无法进行修改，也保证了代码的安全性。
## 缓存
**缓存的作用(cache) 就是将一些常用的数据，储存起来，提供使用，提升性能**
- CDN(Content Delivery Network 内容分发网络)
- Redis做缓存
- 网站静态页面缓存机制（将网页静态化）
**斐波那契的性能问题**
- fib(3) = fib(1)+fib(2) fib(4) = fib(2)+ fib(3) fib(3)就重复计算了
```javascript
// 优化前
let number = 1;
function fib(n) {
number++;
if (n == 1 || n == 0) {
return 1;
}
return fib(n - 2) + fib(n - 1)
}
let result = fib(30);
console.log(number) //2692538 次 需要调函数的次数
console.log(result) // 1346269
// 优化后
let number = 1;
function createCache() {
let cache = [];
function fib(n) {
number++;
if (cache[n]) {
return cache[n]
}
if (n == 1 || n == 0) {
cache[n] = 1;
return 1;
}
let temp = fib(n - 2) + fib(n - 1);
cache[n] = temp
return temp;
}
return fib;
}
let fib = createCache();
let result = fib(30);
console.log(number) //60 需要调函数的次数
console.log(result) // 1346269
```
**jquery 缓存分析**
- $('#test'),如果缓存中有这个值的话，就不会重新去document.getElementById,
```javascript
function createCache(){ // 自己的版本
var cache = {}; // cache对象中以键值对形式进行存储数据
var index = []; // inde数组中该存储健，这个健是有顺序，可以方便我们做超出容量的处理
return function(key,value){
if(value){
cache[key] = value;
index.push(key);
if(index>10){
delete cache[index.shift()]
}
}
return cache[key]
}
}
// 调用
let cache = createCache();
cache('name','hyl');
console.log(cache('name'))
```
- jquery自身的版本
```javascript
function createCache(){
var keys = [];
function cache(key,value){
if(keys.push(key+' ')>50){
delete cache[key+' ']
}
return (cache[key+' '] = value)
}
return cache;
}
let cache = createCache();
cache('name','hyl');
cache['name'+ ' ']
```
## 函数的调用方式
- 函数调用模式
- 方法调用模式
- 构造函数模式
- 上下文调用模式
```javascript
function test(){
console.log(this) // this指向window;
}
test();
var obj = {
test:function(){
console.log(this)
}
}
obj.test(); // this指向 obj
function Person(){
console.log(this)
}
new Person(); // this指向 Person对象
test.call(obj,argument1,argument2);
test.apply(obj,[argument1,argument2]);
test.bind(obj,argument1,argument2)();
```
**构造函数调用模式特征**
- 构造函数的首字母需要大写
- 一般情况下和new关键字一起使用
- 构造函数中的this指定是new关键字创建出来的对象
- 默认的返回new创建出来的对象
- 构造函数的返回值：默认返回new创建出来的，如有返回，如返回值类型的数据（包括null）没有影响，若是对象模型，则返回这个对象，不会返回原来创建出来的对象。
```javascript
// 构造函数
function Person(){
this.name = 'hyl'
}
var p = new Person();
// 工厂模式的构造函数
function Person(name,age){
var o = {
name:name,
age:age,
sayHello:function(){
}
}
}
var p = Person('张三'，18);
// 寄生式构造函数
function Person(){
var o = {
name:name,
age:age,
sayHello:function(){
}
}
return o;
}
var p = new Person('张三',16);
```
## js上下文
**js中的上下文（执行环境）**
- 字面意思：上面的文字，下面的文字。
- call,apply,bind可以改变this的值，
- 函数.apply(对象,[argument1,argument2])
- 函数.call(对象,argument1,argument2);
- 函数.bind(对象,argument1,argument2).()
---
**call和 apply的区别**
1. 第一个参数都是把this修改为对象
2. 当函数需要参数的时候，那么apply是用数组的形式进行传递或者类数组，call是是用单个参数进行传递
3. 而call是使用单个参数进行传递
call用于参数确定个数的时候使用
apply是用于新参不确定的时候使用
```javascript
// 用apply求数组的最大值
let array = [1,23,2];
let result = Math.max.apply(null,array)
console.log(result) //23
//
function foo(){
[].join.apply(argument,['-'])
}
foo(2,1,3) // 2-1-3
```
知识点总结
## 闭包练习
setTimeout的执行时机
所有的主任务的代码执行完毕之后，去检查所有的setTimeout回调函数，如果到时间了就执行
用闭包来解决回调函数在调用的时候访问的是全局的变量
在闭包中创建一个变量，来单独存储当前的回调函数需要的数据，
在调用的时候就会去使用这个单独的数据，而不是去访问全局变量
注册点击事件的时候
点击事件在触发的时候访问的是全局的变量
在闭包中创建一个变量，来单独存储当前的事件处理函数需要的数据，
在调用的时候就会去使用这个单独的数据，而不是去访问全局变量
## 闭包缓存
缓存：将常用的数据进行存储，以提升性能
硬件缓存
浏览器缓存
CDN
内存型数据库
如何用闭包实现缓存
1、写一个闭包在闭包中创建一个对象，用来做缓存的存储对象
2、在闭包中创建一个对象，用来做缓存的存储对象
3、在闭包中创建一个数组，用来存储换中的键
4、返回一个函数，这个函数需要两个参数，一个是key 一个是value
5、在返回的函数中,判断传入的value是否为undefined
6、如果为Undefined 则表示是获取值，就直接返回在第一步创建的缓存对象中指定的键对应的值
7、如果不为Undefined 则表示是设置值
8、在缓存对象中设置指定的key的值为value
9、把key加入存储key的数组
10、判断key数组是不是超出了缓存大小限制
11、如果超出限制，删除数组第一个元素（使用shift），获取到删除的key
12、使用删除的key删除缓存对象中存储的值（delete）
## 使用缓存解决斐波那契数列的性能问题
就是将已经计算过的数字缓存进一个数组中，下次再来访问的时候，直接在数组中进行查找，如果找到直接使用，如果没有找到，计算后将数字存入数组，然后返回该数字
## 沙箱模式
沙箱模式就是一个封闭的独立的环境
沙箱模式的基本模型
(function(){
//变量定义
//逻辑代码
//如果需要，向window对象添加成员，以暴露接口
})()
第三方框架
插件
独立的组件
## 函数的四种调用模式
函数模式
this--->window
方法模式
this---->调用方法的对象
构造函数模式
this----->new出来的对象
工厂模式
寄生模式
上下文模式
this----->指定的是谁就是谁
call 函数.call(对象,arg1,arg2,arg3,...argn)
apply 函数.apply(对象,数组)
都可以用来改变this的指向为参数的第一个值
call是使用单独的每一个参数来传参
apply是使用数组进行传参的，这个数组在调用的时候，会被意义拆解，当做函数的每一个采参数
call在函数的形参个数确定的情况下使用
apply在函数的形参个数不确定的情况下使用