前端基础知识整理

理解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