前端基础知识整理

理解 settimeout 的定义

setTimeout(() => {task()
},3000)

sleep(10000000)

过程：

• task() 进入 Event Table 并注册, 计时开始。
• 执行 sleep 函数，很慢，非常慢，计时仍在继续。
• 3 秒到了，计时事件 timeout 完成，task() 进入 Event Queue，但是 sleep 也太慢了吧，还没执行完，只好等着。
• sleep 终于执行完了，task() 终于从 Event Queue 进入了主线程执行。

事件委托

通过将事件绑定在父级 dom 上来减少事件对象占用内存，然后在父级事件中用 traget 来指向子容器节点。（就是把 click 事件绑在 ul 上，再根据 li 的属性，实现不同的 li 点击效果）

jsonp

由于 src 请求是可以跨域的，那么可以使用 srcipt 来请求后端提供的 json 来获取 data，同时告诉后端回调事件的名字，用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了，在前端 js 可以执行对应的 callback

ssr 服务端渲染

简单理解是启动 node 服务，将组件或页面通过服务器生成 html 字符串，再发送到浏览器，访问路由的时候直接获取到 html
angular9 脚手架带 ssr https://github.com/Ismaestro/…
参数详解 https://www.cnblogs.com/laixi…

webview 优化

提前加载，提前请求数据

1. 提前加载 webview 并隐藏，消耗内存，切换 webview 时需要清除浏览痕迹，造成内存泄漏
2. 设置 webview 缓冲池，从缓冲池中加载，不用时销毁，消耗更大内存，但不用清除浏览痕迹。
3. 客户端 app 帮忙请求一些数据，减少 webview 内存消耗

原型链

实例的__proto__指向它构造函数的 prototype（原型对象），每个对象都有原型对象（_proto_），原型对象的_proto_，依次向上，最后指向 null，null 没有原型，是原型链的最后一节
Object.create() 相当于 calss 中的 extend 继承。a=Object.create(b) 表示 a 继承了 b 的属性。
访问一个对象 var aa = {key: 123} 的某个属性 key，查询顺序为： aa=> aa._proto_ = Object.prototype

函数，数组都是对象的实例，原型都是 Object

// 例如：（数组都继承于 Array.prototype）var bb = [1,2,3]
bb.__proto__ === Array.prototype // true
Array.prototype.__proto__ == Object.prototype // true
Object.prototype.__proto__ === null // true

this 的指向

1. this 永远指向的是一个对象；
2. this 的指向完全取决于函数调用的位置；

函数调用的时候，this 将永久的绑定在调用的位置上。

var o = {
  prop: 33,
  f: function() {return this.prop;}
};
// 执行
window.f = o.f; // 此时 window.f 中的 this 绑定在了 window 上，o.f 中的 this 绑定在了 o 上；var aa = 55;
window.f() // 55
o.f() // 33

1. apply 和 call 可以修改 this 的指向

call，apply 都属于 Function.prototype 的一个方法

 // 简单理解 apply，call 和 bind
 A.call(B) // 等同于 B 可以继承 A 的属性

 var aa = {key: 123}
 function fu (){return this}
 
 fu.call(aa)  // 即使用 aa 去执行 return this，那么得到 {key : 123}
 fu.apply(aa) // {key : 123}
 
 // 注意：箭头函数不能使用 call 和 apply 来改变 this 的指向
 var fu2 = ()=>{return this;}
 
 fu2.call(aa) // window
 
 // 使用 bind 会创建一个与原函数相同函数体和作用域的函数
 // 并且 this 将永久地绑定在 bind 的第一个参数，后面不管如何调用都不会改变 this 的指向
 var gg = fu.bind({key:"111"})
 gg() // {key:"111"}
 gg.bind({key:"222"})
 gg() // {key:"111"}
 

1. 箭头函数的 this：this 始终指向它被创建时所处的词法作用域中的 this，并且不会被修改

var obj = {fu1: ()=>{console.log(this)
    },
    fu2: function(){console.log(this)
    }
}

obj.fu1() // window
obj.fu2() // obj

// 闭包
var obj = {arrowFn: function(){return ()=>{console.log(this);    
        }
    }
}

var fun = obj.arrowFn()  // 将 return 的箭头函数赋值给 fun

fun() // obj