学习总结

小前端一枚_
155 阅读4分钟

  • typeof instanceof 区别 及实现

typeof 用于判断基本数据类型的，null,undefined,string,number, boolean, symbol（es6）

instanceof 用于判断某个实例（new出来的）是否属于某个类型,即原型链上是否有某个属性

instanceof原理就是判断右边对象的prototype属性是否在左边对象的原型链上，会遍历左边对象的原型链，直到找到右边对象的prototype，查找成功返回true

Object.prototype.__proto__   在未修改的情况下为null

instanceof实现

function newInstance(left, right){
    const rightVal = right.prototype
    let leftVal = left.__proto__
    while(true){
        if(leftVal === null){
            return false
        }
        if(leftVal === rightVal){
            return true
        }
        leftVal = leftVal.__proto__
    }
}

let Person = function(){}
let po = new Person()
newInstance(po, Person) 返回 true

instanceof.png

  • null 与 undefined 区别

参考链接 阮一峰老师

null 表示无值的对象，转换为数值是0, 对象原型链的终点

undefined 表示无的原始值，转换为数值是NaN 变量被声明没有赋值 调用函数的时候，需传的参数没传 对象没有赋值的属性 函数没有返回值时，默认返回undefined

null 与 undefined 区别.png

  • 判断数组的几种方式

  1. Object.prototype.toString.call([]) === "[object Array]"

  2. Array.isArray([])

  3. [] instanceof Array

  4. [].constructor === Array

  • 数组去重的方法

 let arr = [1,2, 3, 4, 5, 6, 6, 7]

 1.const resultList = [...new Set(arr)]

 2. let resultList = []
    arr.forEach(item => {
      if(resultList.indexOf(item) < 0){
          resultList.push(item)
      }  
    });
 3. let resultList = arr.filter((item, index) => 
       arr.indexOf(item, 0) === index
    )

  • Promise原理及实现方式

  • 事件循环 宏任务 微任务

  • let var 区别及相关知识点

块级作用域，变量提升，暂时性死区,重复声明

经典题

使用var

for (var i = 0; i < 3; i++) {
    setTimeout(function () {
      console.log(i)
    }, 1000);
}

输出三个 3 解释: 三次setTimeout均共享唯一的i,

使用let

for (let i = 0; i < 3; i++) {
    setTimeout(function () {
      console.log(i)
    }, 1000);
}

  • 输入url到看到页面过程

  • target与currentTarget 区别

经典是在ul li上使用，不用每个li绑定click事件，绑在父级ul上

target指的是被点击的li

currentTarget指的是绑定的ul

target与eventTarget.png

  • javascript 垃圾回收机制

javascript 自动垃圾回收机制，不需要关系何时分配内存，何时释放内存 参加连接

会通过标记来识别并清除垃圾数据；离开局部作用域后，若该区域内的变量没有被外部作用域所引用，则在后续会被清除

1.标记-整理：在清空部分垃圾数据后释放了一定的内存空间后会可能留下大面积的不连续内存片段，导致后续可能无法为某些对象分配连续内存，需要整理一下内存空间；

2.交替执行：因为JavaScript是运行在主线程上的，所以执行垃圾回收机制时会暂停js的执行， 若垃圾回收执行时间过长，会给用户带来明显的卡顿现象，所以垃圾回收机制会分配一个个小任务，穿插在js任务之中，交替执行。

通常全局状态的变量是不会被自动回收的，

栈空间：基本数据类型， 执行上下文

堆空间： 复杂数据类型（ object, function, array）

内存泄漏场景:

1.闭包的不当使用

2.遗忘的定时器

3.全局变量(指变量未声明直接赋值)

4.分离的dom节点

5.控制台的打印

页面性能优化

先会检查是否是网络请求太多，导致数据返回较慢，可以适当做一些缓存

也有可能是某块资源的bundle太大，可以考虑拆分一下

然后排查一下js代码，是不是某处有过多循环导致占用主线程时间过长

浏览器某帧渲染的东西太多，导致的卡顿

在页面渲染过程中，可能有很多重复的重排重绘

事件委托

  1. 遍历DOM的性能：for或者其它循环遍历的额外消耗
  2. 事件委托的原理：事件冒泡
  3. 局限性：mousemove支持冒泡但是要计算位置，以及focus、blur之类不支持冒泡，这些都不能用事件委托 事件委托：把一个元素的响应事件的函数委托到另一个元素

例如： ul li 将点击li的事件绑定在ul上，通过事件冒泡的机制将里层所需要的响应事件绑定到外层

延伸到 target 与eventTarget区别

target：指的是被点击的li

eventTarget：指的是绑定的ul

avatar
文章
阅读
粉丝