简单分析一些 [箭头函数] 的 this 问题

本文 对比了 对象中的 箭头函数 普通函数 和 函数中的 箭头函数 普通函数 四种情况问题

 var name = 999
// 第一种
 const  obj3 = {
     name: 66,
     fn: () =>{
         console.log(this.name)
     }
 }
// 第2种
 const  obj4 = {
     name: 888,
     fn: function() {
         console.log(this.name)
     }
 }
obj3.fn()  //999
var tt1 = obj3.fn
tt1()//999

 obj4.fn()//888
 var tt2 = obj4.fn
 tt2()//999

// 第3种
 function test() {
     this.name = 'kk'
     this.fn =  ()=> {
         console.log(this.name)
     }
 }
 var aa = new test()
 var aha = aa.fn
 aa.fn()  // kk
 aha()   // kk

// 第4种
 function test2() {
     this.name = 'kk'
     this.fn =  function() {
         console.log(this.name)
     }
 }
 var bb = new test2()
 var cc = bb.fn
 bb.fn()  // kk
 cc()   // 999
 

结论

定义的对象中出现 箭头函数时 对象并没有封装this, 此时箭头函数的this一直指向最外层 也就是window
定义的对象中出现 普通函数时 对象并没有封装this, 此时调用 obj.fn（） 相当于对函数执行了 显示绑定 所以this指向了这个对象

定义的函数中出现 箭头函数时 由定义时决定
定义的函数中出现 普通函数时 由运行时决定