欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-14 18:06:33
...

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


 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指向了这个对象

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