this指向的问题(常常因为不够变态而感到格格不入

62 阅读2分钟

吭哧吭哧,背半天原理,一看这些变态题,就做不来

第一坑:是不是有写this(不要把考察作用域和考察this搞混了)

第二坑:分辨是普通函数还是箭头函数还是立即执行函数

①普通函数,注意分辨,默认绑定(全局)、隐式绑定(对象)、隐式绑定的隐式丢失(对象包含了对象,可能直接定义成第二层就取最里面的)、显示绑定(call、apply、bind,区别就是bind不改变原来的而是有个新的,call和apply直接改变原来的而且立即执行)

②箭头函数,注意是取得外围作用域的(没得什么)

③立即执行函数,有点像箭头函数,要注意不能再赋值给别的来执行,会报错说不是函数

先来箭头函数

const a = 10; // 箭头函数和立即执行函数,这行用const和let都不输出10,而是undefined,只有改成var才能输出10
const obj = { 
  a20, // 烟雾弹①,只有普通函数会有用
  console() => { 
    var a = 30// 烟雾弹②,绝对的烟雾弹,写在普通函数,箭头函数,立即执行函数里统统没用
    console.log(this.a) // 箭头函数和普通函数这里都不会执行,如果是立即执行函数就会执行
  } 
} 
obj.console() // 箭头函数输出undefined 因为全局没有var a,如果是普通函数输出20,如果是立即执行函数这里会报错
const print = (fn)=>{ 
  let a = 200;
  fn()
} 
let a = 100; // 这行改成const或者var fn依旧输出100
const fn = () => { 
  console.log(a); // 100 !!看清楚!! 这个没this,考的是全局和局部作用域的知识
} 
print(fn);
const print = (fn)=>{ 
  let a = 200;
  fn()
} 
let a = 100;
const fn = () => { 
 var a =1
  console.log(a); // 1
} 
print(fn);

呵呵呵。再来普通函数的。有时候真的会不够变态而感到格格不入

// 隐式绑定
let objOne={
  num:1,
  func:function(){console.log(this.num)}
}
objOne.func() // 1

// 隐式绑定的隐式丢失
let objOne={
  num:1,
  levelTwo:{
    num:2,
    func:function(){console.log(this.num)}
  }
}

objOne.levelTwo.func() // 2

再来立即执行函数的

var num = 2;
let objOne={
  num:1,
  func:(function(){console.log(this.num)})() // 2 定义完成后立刻执行了
}
objOne.func(); // 这里会提示func不是一个方法 Uncaught TypeError: objOne.func is not a function