梳理前端知识点

禹
222 阅读4分钟

js基础

闭包

闭包是js作用域设设计的一个应用，js是词法(静态)作用域，在访问变量的权限在声明时已确定好，而且访问变量规则是访问当前作用域以及父作用域，那么我想访问一个函数的私有变量(A)咋办？那我就return出去一个数据，这个数据引用了A，这样就间接的访问到私有变量A了，这就构成了闭包。

举例:

function func1() {
    const _A = 1;
    return function () {
        const __A = _A;
        return __A
    }
}
const func2 = func1()
console.log(func2()) // 1

这段代码特殊在哪? 按道理讲，_A是func1的局部变量，执行完const func2 = func1()它应该就被干掉了，为啥执行完func1再执行func2还能访问到局部变量 _A，它咋那么牛逼？就因为闭包。

重点在执行const func2 = func1()时候可以理解以特殊的方式创建一个函数，特殊是指创建一个函数，并把fun1的私有作用域给到func2上

实现继承的几种方式

function Parent () {
    this.a = "a"    
}
// 1 new 关键字，缺点:多创建实例
const obj1 = new Parent()
// 2 原型链继承，缺点：重写就嗝屁了
const obj2 = {}
obj2.__proto__ = Parent.prototype;
Parent.prototype.constructor = obj2
// 3
const

上下文和作用域

上下文:
executionContextObj = {
    scopeChain: { /* 作用域链：变量对象+ 所有父执行上下文的变量对象*/ },
    variableObject: { /*变量对象：函数 arguments/参数，内部变量和函数声明 */ },
    this: { /*运行这个函数的对象(动态的) */ }
}

typeof 和 instanceof

new 都干了啥

const _new = function (constructor, ...arg ) {
  // 创建一个新对象，然后设置原型对象
   const res = Object.create(constructor.prototype);
   // 执行构造函数
   constructor.apply(res, arg);
   return res;
}

call、apply、bind区别以及模拟实现

ReactNative

ReactNative原理是怎样

ReactNative是一种混合开发技术，它的设计思想是利用React，也就是js层生成一个对应用的描述，然后通过jsc解析成一份json配置项，通过c++层编写的jsbridge传递给native端通过解析json，调用实际的原生端进行渲染应用

优势

  1. 优势就是跨平台性
  2. 可同时开发三端，逻辑一致性
  3. 性能出色，只有理论上的性能差距，实际体验上优化过的RN和原生可以说毫无差别
  4. 快速迭代，更新只需要新的替换jsbundle
  5. 打包快

劣势

  1. 性能有理论上的劣势
  2. 沟通成本大、跨端debug效率
  3. 安卓兼容性
  4. 和native端通讯只能是异步
  5. 需要有native端能力
  6. 如果要兼容三端，导航会有性能问题
  7. 安卓阴影支持差
  8. React Native在长列表
  9. 生命周期问题
  10. JavaScriptCore不一致
  11. 体积大小
  12. 手势冲突
  13. 平台不一致性、如switch组件、键盘处理、阴影、生命周期
  14. 编程范式不同，js端是mvvm的声明式编写代码
  15. 不天然支持强类型，而native端是强类型的，如果不引入ts，交互过多时，会有很多数据类型的问题
  16. native跳转RN 不可避免的会有起RN实例的时间，就算有缓存也会白屏一下

html5

  • 语义化标签
  • 音视频
  • Web Sockets
  • Web RTC
  • 服务端推送事件(EventSource对象)，用法：new一个EventSource对象，然后调用提供的api进行监听，然后服务端发送请求头为'event-tream'的数据
  • DOM存储
  • IndexedDB
  • 摄像头api
  • Canvas
  • SVG
  • webGL
  • Web Workers
    • 单独的全局作用域DedicatedWorkerGlobalScope
  • history api
    • pushState方法，只改变路由，不加载
    • pushState() 绝对不会触发 hashchange
    • replaceState 修改当前，不是新建
  • HTML 焦点管理
  • requestAnimationFrame 控制动画
    • callback参数DOMHighResTimeStamp指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。
  • Fullscreen API

React 生态

react-router

  1. 为什么要用react-router

    单页应用利用ajax动态请求资源，然后解析后动态渲染页面，这样模拟跳转页面不需要重新请求大量资源

  2. 原理是什么?

    先通过封装history api抹掉环境差异，然后通过pushState、replace等方法，改变路由历史、然后通过监听路由变化，动态更新资源

redux

mobx

其他web技术

跨域

cookie、token是啥

严格模式

bfc是啥

性能优化

juejin.cn/post/684490…

其他随笔

  • hasOwnProperty 是 JavaScript 中唯一一个处理属性并且不会遍历原型链的方法。（译者注：原文如此。另一种这样的方法：Object.keys()）
avatar
文章
阅读
粉丝