JS 中 this 几种基本情况

JS 中 this 几种基本情况

• this -> 函数的执行主体

  • 函数执行主体：谁把函数执行
  • 函数执行上下文：在哪执行的

• 函数执行主体规律：

  1. 事件绑定：给当前元素的某个事件行为绑定方法，当事件触发，方法执行，方法中的 this 是当前元素本身
  2. 普通函数执行
     • 函数执行前面是否有"点"，没有点，this => window(严格模式下是 undefined)

     function fn(){
       console.log(this);
     }
     fn(); // => window/undefined
     

     • 有"点"，"点"前面是谁 this 就是谁

     let obj = {
       name: 'patrick',
       fn(){
         console.log(this);
       }
     };
     obj.fn(); // => obj
     

     • 匿名函数（自执行函数/回调函数）如果没有特殊处理，this => window(严格模式下是 undefined)

     (function(){
       console.log(this); // => window/undefined
     })()
     

     function fn1(callback){
       callback();
     }
     let obj = {
       name: 'patrick',
       fn2(){
         console.log(this);
       }
     };
     fn1(obj.fn2);// => window/undefined
     

     • 特殊处理

     let obj = {
       name: patrick
     };
     let ary = [1, 2, 3, 4, 5];
     ary.forEach(function(item){
       console.log(this) // => obj
     }, obj)
     //触发回调函数的时候，forEach 内部会把回调函数中的 this 改变为传递的第二个参数（obj）
     

     • 括号表达式情况

     let obj = {
       fn(){
         console.log(this);
       }
     }
     obj.fn(); // => obj
     //括号表达式中只有一项，和不加没本质区别
     (obj.fn())(); // => obj
     //括号表达式有多项时，只取最后一项。
     //括号表达式相当于整体执行，相当于前面没有"点"，所以下方输出为 window
     (10, obj.fn())() // =>window/undefined
     

• 全局上下文中的 this 是 window

• 块级上下文中没有自己的 this，所用到的 this 都是所处上级上下文中的 this

{
  let n = 12;
  console.log(this); // => window
}