前端-浅谈箭头函数的this和普通函数的this

最新推荐文章于 2024-09-16 11:15:27 发布

前端美少女胡妹妹

最新推荐文章于 2024-09-16 11:15:27 发布

阅读量6.4k

点赞数

文章标签： javascript 前端函数对象编程

本文链接：https://blog.csdn.net/qq_38830670/article/details/76805004

版权

本文深入探讨JavaScript中this关键字的不同行为，特别是在ES5普通函数与ES6箭头函数之间的差异。通过具体实例展示了函数调用上下文如何影响this的指向，并解释了箭头函数为何不遵循传统的this绑定规则。

摘要由CSDN通过智能技术生成

说起胖函数的this指向这个坑我是踩了很多遍啊，

说起this，我相信只要是做编程写代码的对this一定都有了解。我现在和大家说说JavaScript的胖函数的this指向和es5普通函数的this指向什么不一样吧。

OK ，我理解的是ES6的箭头函数的this指向是，在哪里定义的箭头函数那么它的this就指向哪里。

而ES5普通函数的this指向是，在哪里调用的函数，那么this就指向哪里。

我们来看下面的例子

 
  var 
  name= 
  'window'; 
 
  var 
  obj = { 
 
  name: 
  'obj', 
 
  nameprintf:function(){ 
 
  console. 
  log( 
  this. 
  name) 
 
   } 
 
   } 
 
  obj. 
  nameprintf();//'obj' 
 
   var w = 
   obj 
  . 
  nameprintf; 
 
  w();//'window'

第一处打印调用了obj.nameprintf()，按照我们前面说的谁调用函数，函数里面的this就指向谁，因此这里的this指向obj，所以打印obj.name也就是obj。

第二处打印调用w()，这里其实就是把obj.nameprintf这个函数的函数体赋给了w这个函数，相当于在全局空间下写了一个w函数，里面的代码就是obj.nameprintf里面的代码，所以此时的this指向window，因此打印的this.name就是window。

我们试试用箭头函数定义nameprintf这个函数

 
   var 
   name= 
   'window'; 
  
   var 
   obj = { 
  
   name: 
   'obj', 
  
   nameprintf:() 
   =>{ 
  
   console. 
   log( 
   this. 
   name) 
  
    } 
  
    } 
  
   obj. 
   nameprintf();