ES6箭头函数修复ES5中this指向问题

系统管理员 2022-04-08 10:54 250阅读 0赞

长期以来，ES5中**this**对象一直的指向一个令人头痛的问题，在对象方法中使用此，必须非常小心例如：

class Animal {
        constructor(){
            this.type = 'animal'
        }
        says(say){
            setTimeout(function(){
                console.log(this.type + ' says ' + say)
            }, 1000)
        }
    }
    
    var animal = new Animal()
    animal.says('hi')  //undefined says hi

运行上面的代码会报错，这是因为**`setTimeout`**中的**`this`**指向的是全局对象。所以为了让它能够正确的运行，传统的解决方法有两种。

第一种是将this传给self,再用self来指代this

says(say){
         var self = this;
         setTimeout(function(){
             console.log(self.type + ' says ' + say)
         }, 1000)

第二种是用`bind(this)`

says(say){
           setTimeout(function(){
               console.log(this.type + ' says ' + say)
           }.bind(this), 1000)

而用ES6中的箭头函数就没有这么麻烦

class Animal {
        constructor(){
            this.type = 'animal'
        }
        says(say){
            setTimeout( () => {
                console.log(this.type + ' says ' + say)
            }, 1000)
        }
    }
    var animal = new Animal()
    animal.says('hi')  //animal says hi

当我们使用箭头函数时，函数体内的**this**对象，就是**定义时**所在的对象，而不是使用时所在的对象。  
并不是因为箭头函数内部有绑定**this**的机制，实际原因是箭头函数根本没有自己的**this**，它的**this**是继承外面的，因此内部的**this**就是外层代码块的**this**。

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECMAScript6-ES6箭头函数：箭头函数语法、箭头函数里的this指向

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。一、通常函数的定义方法 var fn1 = function(a, b) {

谁践踏了优雅/ 2023年10月05日 19:05/ 0 赞/ 19 阅读

相关 ES6中的箭头函数部分总结(This)

箭头函数箭头函数中的This 1. 箭头函数中的this是确定好目标的(ES5中的this是谁调用，指向谁)，即ES6中的this是定义的时候就已经确定好的。

忘是亡心i/ 2023年05月30日 08:58/ 0 赞/ 13 阅读

相关 ES6中箭头函数（=＞)的this

一，了解前须知 1，箭头函数：出现的作用除了让函数的书写变得很简洁，可读性很好外；最大的优点是解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（

末蓝、/ 2022年12月17日 14:57/ 0 赞/ 199 阅读

相关 ES6箭头函数中的this绑定问题

关于this指向问题的讨论一直是学习js不可忽视的重要部分，那些一个又一个围绕this挖的笔试坑，仿佛永远也填不完 var obj={ fn:functio

浅浅的花香味﹌/ 2022年06月14日 07:19/ 0 赞/ 208 阅读

相关 es6箭头函数以及this的指向问题

es3，es5中的构造函数与es6中的箭头函数区别： es3 es5中的函数的写法： function ()\{ \} es6中的箭头函数的写法： ()=>\{

梦里梦外;/ 2022年05月16日 01:25/ 0 赞/ 218 阅读

相关 es6中箭头函数this指向问题

普通函数：根据调用我的人（谁调用我，我的this就指向谁）箭头函数：根据所在的环境（我在哪个环境中，this就指向谁）看下面的例子 document.onc

偏执的太偏执、/ 2022年04月10日 10:37/ 0 赞/ 246 阅读

相关 ES6箭头函数修复ES5中this指向问题

长期以来，ES5中this对象一直的指向一个令人头痛的问题，在对象方法中使用此，必须非常小心例如： class Animal { constructo

系统管理员/ 2022年04月08日 10:54/ 0 赞/ 251 阅读

相关 ES6中箭头函数的this指向

一直以来对于ES6中箭头函数有些疑虑，其中一项就是this的指向问题，所以不敢放手去使用。因为跟之前我所熟悉掌握的函数内部this的指向是有些地方不同的，但是在箭头函数中thi

Myth丶恋晨/ 2022年03月07日 08:52/ 0 赞/ 282 阅读

相关 ES6 箭头函数及this指向详解

箭头函数相当于匿名函数，箭头函数简化了函数的定义，比函数表达式更简洁，并且没有自己的[this][]，[arguments][]。。。基础语法 `(参数1, 参数2,

快来打我*/ 2021年12月05日 15:13/ 0 赞/ 338 阅读

相关 ES6 箭头函数+this

一.箭头函数 1.基本用法 1.基本用法 var f = v => v; 上面的箭头函数等同于： var f

深藏阁楼爱情的钟/ 2021年09月15日 04:22/ 0 赞/ 426 阅读