0117面试题——instanceof、节流/防抖、事件循环、提升、暂时性死区

javascript

模拟实现

• 实现一个instanceof函数

function instanceof (a, b) {
    // 基本类型都返回 false
    if ((typeof a !== 'object' && typeof a !== 'function') || a === null ) {
        return false
    }
    // 判断引用类型
    while (a.__proto__) {
        if (a.__proto__ === b.prototype) {
            return true
        }
        a = a.__proto__
    }
    return false
}

• 实现一个节流函数 throttle

function throttle(fn,delay){
    let flag = true
    return function (){
        if (flag) {
            flag = false
            // 延迟一段时间再恢复可以执行的状态
            setTimeout(()=>{flag = true}, delay)
            // 保证this跟实际调用时一致，并传递参数
            fn.apply(this, arguments)
        }
    }
}

• 实现一个防抖函数 debounce

function debounce(fn, delay) {
    let timer = null
    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        
        // 保证this跟实际调用时一致，并传递参数
        fn = fn.bind(this, ...arguments)
        timer = setTimeout(fn, delay)
    }
}

理论

• js的异步机制是怎样的

  • JS是单线程执行的，浏览器是多线程执行的
  • 当JS遇到异步任务，如事件监听、网络请求、定时器时，会将这些异步任务交给Web API处理
  • 在Web API中，当异步操作完成时，会把结果注入异步回调函数的参数中，并且把回调函数推入回调队列
  • Event Loop 不停检查JS线程调用栈跟回调队列，当主线程空闲时，就把回调队列里的第一个任务推入主线程执行，并不断循环

• 简述一下event loop

  • 执行全部同步任务（执行栈仅剩全局执行上下文）
  • 执行微任务队列全部微任务
  • UI更新
  • 执行宏任务队列第一个宏任务

• 什么是提升，有什么作用

  • JS代码执行之前，将代码中带var、function的声明提前
  • var 只声明不定义
  • function 声明并定义
  • var 声明的变量不存在暂时性死区
  • funtion 声明扩大了函数的使用范围

• 什么是暂时性死区

  • 声明 let/const变量之前，无法使用该变量的代码区域

• 在声明前使用let/const声明的变量会出现什么问题

  • 报 ReferenceError 错误

• 判断一个对象是数组的方法有哪些

  • Object.prototype.toString.call([])
  • [] instanceof Array
  • Array.isArray([])

场景

• 数字格式化

// 输入为数字，输出为字符串
// 使用“,”分割整数部分，小数保留两位
/**
* @param {number} num
*/
function transfer(num) {
    num = [...(num).toFixed(2)]
    let i = num.length - 6
    while (i > 0) {
        num.splice(i, 0, ',')
        i -= 3
    }
    return num.join("")
}
transfer(1234567890.23) // "1,234,567,890.23"