6.THIS的几种基本情况

190 阅读1分钟

概念

this:函数的执行主体(不等价于执行上下文「作用域」)——》谁把这个函数执行

几种情况

  • 事件绑定
    • 不论DOM0还是DOM2级时间绑定,给元素E的某个事件行为绑定方法(onclick,addEventListener),当事件触发方法执行,方法中的this是当前E本身
    • 特殊情况:
      • IE6~8中基于cattachEvent实现的DOM2事件绑定,事件触发方法执行,方法中的this是当前元素E本身
      • 如果基于call/apply/bind强制改变了函数中的this,我们也是以强制改变为主
  • 普通函数执行
    • 函数执行,看函数前面是否有“点”:有点,点前面是谁this就是谁;无点,this就是window「js严格模式下是undefined」。
      • fn() -> this: windwo/undefined
      • obj.fn() -> this.obj
      • xxx.proto.fn() -> xxx.proto ...
    • 自执行函数执行,一般this: windwo/undefined
    • 回调函数(setTimeOut):一般this: windwo/undefined,除非做过特殊处理(如forEacth,传两个参数时)
    • 括号表达式中的this,如果有多项只取最后一项(如 (fn,10,obj.fn)() -> this指向window),如果把其执行,不论之前this是谁,现在基本上都会变为window「括号表达式」(function fn(){console.log(this);})() ...
  • 构造函数执行
  • 箭头函数执行
  • 基于call/apply/bind强制改变this

常规情况

  • 在浏览器端运行js代码,非函数中的this一般都是window;
  • 研究this都是在研究函数中的this
  • 有一个特殊情况,ES6+中“块级上下文”中的this,是其所在上下文中的this「理解为:块级上下文是没有自己的thisde1」

题:this与闭包结合

var x = 3,
  obj = { x: 5 };
obj.fn = (function () {
  this.x *= ++x;
  return function (y) {
    this.x *= (++x) + y
    console.log(x)
  }
})()
var fn = obj.fn
obj.fn(6)
fn(4)
console.log(obj.x, x)

/*
  13
  234
  95 234
*/