前端知识点汇集|青训营笔记

2023-02-12 64 阅读3分钟

这是我参与「第五届青训营」伴学笔记创作活动的的第7天 (❤ ω ❤)

箭头函数

和普通函数区别
- 有更加简洁的语法
- 不绑定this，会捕获其所在上下文的this，作为自己的this。
📌箭头函数的外层如果有普通函数，那么箭头函数的this就是这个外层的普通函数的this，箭头函数的外层如果没有普通函数，那么箭头函数的this就是全局变量。
- 不绑定arguments，取而代之用rest参数解决，同时没有super和new.target。
- 当对箭头函数使用call或apply方法时，只会传入参数并调用函数，并不会改变箭头函数中this的指向。
- 当对箭头函数使用bind方法时，只会返回一个预设参数的新函数，并不会改变这个新函数的this指向。
缺点
- 没有 arguments
- 无法通过 apply call bind 改变 this
- 某些箭头函数代码难以阅读

箭头函数不适用情况

不适用-对象方法

const obj = {
     name: 'a，b，c'
}
obj.__proto__.getName = () => {
     return this.name
}
console.log( obj.getName() )

不适用-原型方法

const obj = {
    name: 'a，b，c'
}
obj.__proto__.getName = () => {
     return this.name
}
console.log( obj.getName() )

不适用-构造函数

    const Foo = (name, age) => {
         this.name = name
         this.age = age
    }
    const f = new Foo('逸', 20)
    // 报错 Foo is not a constructor

不适用-动态上下文中的回调函数

const btn1 = document.getElementById('btn1')
        btn1.addEventListener('click', () => {
                 // console.log(this === window)
                 this.innerHTMl = 'clicked'
 })

不适用-Vue生命周期和method : vue组件本质上一个 JS 对象
React 组件（非Hooks）本质上是一个 es6 class，class里面适用箭头函数没问题

{
data() { return { name:  '哪吒，B站：算法猫叔' } },
methods: {
      getName: () => {
      // 报错 Cannot read properties of undefined (reading 'name')
      return this.name
},
// getName() {
      // return this.name // 正常
// }
},
      mounted: () => {
      // 报错
},
// mounted() {
     //  正常
 // }
}

遍历一个数组用for和forEach哪个更快

for更快
forEach每次都要创建一个函数来调用，而for不会创建函数
函数需要有独立的作用域，会有额外的开销

建立TCP连接

先建立连接（确保双方都有收发消息的能力）
再传输内容（如发送给一个get请求）
网络连接是TCP协议，传输内容是HTTP协议
SYN SYN+ACK ACK

HTTP跨域请求

浏览器同源策略
同源策略一般限制Ajax网络请求，不能跨域请求server
不会限制<link> <img> <script> <iframe>加载第三方资源

Vue每个生命周期都做了什么

beforeCreate 创建一个空白的Vue实例 data method 尚未被初始化，不可使用
created vue实例初始化完成，完成响应式绑定 data method都已经初始化完成，可调用尚未开始渲染模板
beforeMount 编译模版，调用render生成vdom 还没有开始渲染DOM

$el null element没有
mounted 完成DOM渲染组件创建完成开始由“创建阶段”进入“运行阶段”
beforeUpdate data发生变化之后准备更新DOM（尚未更新DOM）
updated data发生变化，且DOM更新完成（不要在updated中修改data，可能会导致死循环）
beforeUnmount 组件进入销毁阶段（尚未销毁，可正常使用）可移除，解绑一些全局事件，自定义事件
unmounted 组件被销毁了所有子组件也都被销毁了
keep-alive组件 onActivated 缓存组件被激活 onDeactivated 缓存组件被隐藏