被this搞晕的小伙伴来看看吧

this 是一个js的关键字，代表当前代码【执行】的环境对象

一般在函数中使用，在函数执行时确定，根据函数执行方式的不同，代表的值不同。目前有以下情况：

1. 事件函数（赋值给DOM元素对象的事件属性、onclick、onmouseover、onmouseout、ondbclick… 的函数）中的this，是绑定当前事件的元素

var btn = document.getElementById('btn');
btn.onclick = function () {
  console.log(this); // btn
};

2. 自执行函数中的this是window

var num = 14;
(function () {
  var num = 15;
  // console.log(this); // window
  // console.log(this.num); // 14
})();

// 3. setTimeout/setInterval 的回调函数中的this指向window
setTimeout(function () {
  // console.log(this);
}, 1000);

重要！！！

4. 只需一句话学会this： 方法调用时，看方法名前面有没有 . ,如果有点前面是谁，方法中的this就是谁，如果没有点，方法中的this就是window

var obj = {
  num: 12,
  fn: function () {
    console.log(this); // obj
    console.log(this.num); // 12
  }
};
// obj.fn(); // fn前面有 . 点前面是obj所以本次obj.fn执行时，obj.fn中的this就是obj
// obj['fn'](); // 注意 obj['fn'] 等效于 obj.fn，所以本次执行 obj.fn中的this仍然是obj

var fn = obj.fn;
fn(); // 函数执行时（最后有小括号()）函数名前面没有点，所以函数里面的this就是window

5. ES6中箭头函数的this

// ES6新增的函数语法：箭头函数，省略function关键字，在形参入口后面增加箭头(=>) 后面紧跟函数体，只能用于函数表达式；
let sum = (a, b) => {
var total = 0;
total = a + b;
return total;
};

// 箭头函数的this指向是箭头函数声明时所在作用域（上下文）中的this
    注意 ：是作用域 不要再在堆内存里找
var num = 16;
let obj2 = {
  num: 17,
  fn: () => {
    console.log(this.num);
  }
};
obj2.fn();

6. 全局作用域中的this是window

console.log(this);

7. this在运行时不能直接通过赋值的方式修改

 this = 13; // 报错

• 小白扫盲自我修炼，新人定有不足的还请大佬不吝赐教。
• 下期详解修改this指向的三种方法call apply bind
• 觉得文章还不错的话点个赞吧~~
• 师承周啸天是也