this全解析

一 . 全局this

console.log( this )

• 游览器环境：无论是否在严格模式下，this指向window

• Node环境：无论是否在严格模式下，this指向{}

二 . 函数的this

function demo(){
    console.log( this )
}
demo()

• 严格模式： window和node 返回undefined

• 非严格模式：游览器环境 挂载到 window ， Node环境为global

三 . new的this

function Demo(){
    this.name="小丽快跑"
}
const demo=new Demo();
demo.name      //小丽快跑

构造函数中返回的值为引用类型，则new Demo()是返回的值，反之new Demo()返回的是新对象，并this指向该对象

四 . 对象的this

var obj={
    age:18,
    speakAge:function(){
        console.log(this.age)
    }
}

obj.speakAge()    //18

指向该对象

五 . 使用call、apply、bind的this

1.非undefined/null绑定值

var obj={
    age:18
}
function speakAge(){
    console.log(this.age)
}
speakAge.apply(obj)     // 18

this为指定的对象
2.undefined/null绑定值

• 严格模式下 this 的值为传入的值 null /undefined
• 非严格模式下，this 指向全局对象(node环境为global，浏览器环境为window)

六 . 箭头函数

var age=20
var obj={
    age:18,
    speakAge:()=>{ console.log(this.age)}
}
obj.speakAge()     //  20

this指向当前作用域

七 . 丢失this

1. 重新定义

   var age=20;
   var obj={
       age:18,
       speakAge:function(){
       console.log(this.age)    },
       speakAgeArrows:()=>{
       console.log(this.age)    }
   }
   var fn=obj.speakAge,
       fnArrows=obj.speakAgeArrows;
   fn()         // 20
   fnArrows()   // 20
   

2. 函数作参

   var age=20;
   var obj={
       age:18,
       speakAge:function(){
           console.log(this.age)    
       },
       speakAgeArrows:()=>{
           console.log(this.age)    
       }
   }
   
   setTimeout(obj.speakAge, 200);              //20
   setTimeout(obj.speakAgeArrows, 200);        //20
   

八 . 其他

1 . 严格模式兼容（引用 mdn）

主流浏览器现在实现了严格模式。但是不要盲目的依赖它，因为市场上仍然有大量的浏览器版本只部分支持严格模式或者根本就不支持（比如IE10之前的版本）
2 . this是什么？
函数作为方法被调用时所属的对象