js经典易错合集(一)

1.函数的this指向

var length = 10
function fn(){
  console.log(this.length)
}
fn() //10
//函数的this指向调用者，这里调用者为window
//var声明的变量会挂载到window上

var obj={
  length:2,
  show:function(f){
    this.length=5
    f()
    arguments[0]()
  },
  show2:(f)=>{
    this.length=5
    f()
    arguments[0]() //箭头函数是没有arguments的，这里会报错
  }
}

obj.show(fn) //10 1
// 普通函数里如果嵌套了非箭头函数，这时嵌套的函数里的this在未指定情况下应该指向window，这里相当于调用者依然是window
// arguments[0]() 调用者是arguments 他的长度是所有实参数量，而非形参
obj.show(fn,1) //10 2
//箭头函数this指向定义是外层非箭头函数的上下文
//箭头函数内嵌套普通函数，普通函数指向箭头函数的指向
//在这里show2箭头函数的this指向的是window，如果没有this.length=5，那么fn()将打印出的是10
obj.show2(fn) //5  arguments is not defined

2.Promise.resolve()及async

var a = Promise.resolve()
var a2 = Promise.resolve(1)
console.log(a) //Promise {} 返回Promise对象，状态为fulfilled
console.log(typeof a) //object
a.then((e)=>{console.log(e)}) //undefined
a2.then((e)=>{console.log(e)}) //1

async function fn(){
  var b = Promise.resolve()
  b.c=1
  return b
}

var f = fn()
console.log(f) //Promise {} 返回Promise对象，状态为fulfilled
console.log(f.c) //undefined

async function fn2(){
  var b ={}
  b.c=1
  return b
}

var f2 = fn2()
console.log(f2) //Promise {<fulfilled>: {c:1}}
console.log(f2.c) //undefined

async function fn3(){
  return 1
}

var f3 = fn3()
console.log(f3) //Promise {<fulfilled>: 1}

3.对象引用和函数参数怪异问题

var obj = {a:1}
function fn(o){
   o.a=2
   o={b:3}
   o.c=4
}
fn(obj)
console.log(obj) //{a:2}

//解析：函数的参数相当申明了一个新变量，以上代码等同于
var obj = {a:1}
var o = obj
o.a=2
o={b:3}
o.c=4
console.log(obj)

//---------------------------

var obj = {a:1}
function fn(o){
   o.a=2
   o.c=4
}
fn(obj)
console.log(obj) //{a:2,c:4}

本文固定连接：https://code.zuifengyun.com/2021/04/2311.html，转载须征得作者授权。