前端知识填坑记（三）：setTimeout，arguments

前端知识填坑记（二）：call和apply，bind ，new

setTimeout

以setTimeout来聊聊Event Loop

Javascript执行引擎的主线程运行的时候，产生堆（heap）和栈（stack）。程序中代码依次进入栈中等待执行，当调用setTimeout()方法时，浏览器内核相应模块开始延时方法的处理，当延时方法到达触发条件时，方法被添加到用于回调的任务队列，只有执行引擎栈中的代码执行完毕，主线程才会去读取任务队列，依次执行那些满足触发条件的回调函数。

如果setTimeout加入队列的阻塞时间大于两个setTimeout执行的间隔时间，那么先加入任务队列的先执行，尽管它里面设置的时间比另一个setTimeout的要大。

栗子1

Time2先执行，因为阻塞的时间大于两个setTimeout之间的间隔时间。

//Time2
  setTimeout(function () {
    console.log(2)
  }, 400)

  const start = new Date()
  for (let i = 0; i < 5000; i++) {
    console.log('这里只是模拟一个耗时操作')
  }
  
  const end = new Date()
  console.log('阻塞耗时：' + Number(end - start) + '毫秒')

  //Time1
  setTimeout(function () {
    console.log(3)
  }, 300)

栗子2

我们把for循环里面的时间设置短一点：

setTimeout(function () {
    console.log(2)
  }, 400)

  const start = new Date()
  for (let i = 0; i < 500; i++) {
    console.log('这里只是模拟一个耗时操作')
  }
  
  const end = new Date()
  console.log('阻塞耗时：' + Number(end - start) + '毫秒')

  //Time1
  setTimeout(function () {
    console.log(3)
  }, 300)

此时，Time1先执行，因为阻塞的耗时小于Time1和Time2的执行间隔时间100毫秒。

arguments

JavaScript深入之类数组对象与arguments

拥有一个length属性和若干索引属性的对象。

const arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
}

调用数组方法

如果类数组想用数组的方法怎么办呢？我们可以用Function.call间接调用：

const arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
}
  const arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
  }
  console.log(Array.prototype.slice.call(arrayLike))

类数组转数组

const arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }
// 1. slice
Array.prototype.slice.call(arrayLike) // ["name", "age", "sex"] 
// 2. splice
Array.prototype.splice.call(arrayLike, 0) // ["name", "age", "sex"] 
// 3. ES6 Array.from
Array.from(arrayLike) // ["name", "age", "sex"] 
// 4. apply
Array.prototype.concat.apply([], arrayLike)

length属性

Arguments对象的length属性，表示实参的长度，举个例子：

function foo(b, c, d){
    console.log("实参的长度为：" + arguments.length)
}

console.log("形参的长度为：" + foo.length)

callee属性

Arguments 对象的 callee 属性，通过它可以调用函数自身。

function fibonacci(n) {
    if(n < 0) {
      return false
    }
    if(n === 0) {
      return 0
    } else if(n === 1) {
      return 1
    } else {
      return arguments.callee(n - 1) + arguments.callee(n - 2)
    }
  }
  console.log(fibonacci(3))