函数中的this 上下文规则总结

108 阅读1分钟

# 函数中的 this

image.png

同一个函数,用不同的形式调用它,则函数的上下文不同

情形 1:对象打点调用函数,函数中的 this 指代这个打点的对象

情形 2:圆括号直接调用函数,函数中的 this 指代 window 对象

规则 1:对象打点调用它的方法函数,则函数的上下文是这个打点的对象

规则 2:圆括号直接调用函数,则函数的上下文是 window 对象

规则 3:数组(类数组对象)枚举出函数进行调用,上下文是这个数组(类数组对象)

规则 4:IIFE (立即调用函数表达式)中的函数,上下文是 window 对象

规则 5:定时器、延时器调用函数,上下文是 window 对象

规则 6:事件处理函数的上下文是绑定事件的 DOM 元素

规则7 使用call和apply来指定上下文的时候,this指向要看指定是什么

规则8 使用new操作符构造函数中的this,是秘密创建出来的空白对象

解释一下规则8:

使用new构造函数的时候, JS 规定,使用 new 操作符调用函数会进行“四步走”:

  1. 函数体内会自动创建出一个空白对象
  2. 函数的上下文(this)会指向这个对象
  3. 函数体内的语句会执行
  4. 函数会自动返回上下文对象,即使函数没有 return 语句