箭头函数无法使用this的解决方法

Posted BetiaStar

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了箭头函数无法使用this的解决方法相关的知识,希望对你有一定的参考价值。

ES6中箭头函数  () => { }  ,看到这么简单的写法,我也是很喜欢用的。但是如果想在箭头函数里面使用this,那么就会出现获取不到当前对象,而是获取到window对象。

 

下面这个是ES5中原型链上添加了一个say函数,在函数内打印出this对象,运行后能够得到正确    Person {name: "小米", age: 7}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数与this</title>
</head>
<body>
    <script>
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.say = function(){
            console.log(this);
        }
        var xiaomi = new Person(小米,7);
        xiaomi.say();  //Person {name: "小米", age: 7}
    </script>
</body>
</html>

 

好了,那么如果使用箭头函数呢,这里直接将say改成箭头函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数与this</title>
</head>
<body>
    <script>
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.say = () => {
            console.log(this);
        }
        var xiaomi = new Person(小米,7);
        xiaomi.say(); // window
    </script>
</body>
</html>

打印出来的this直接显示是window对象,这显然不符合要求,为什么会变成window对象呢,原因是箭头函数这个  =>  后面的这个花括符( { } )不是一个function作用域

那么到这里应该如何去获得,这里采用缺啥补啥的方法(将缺少的对象传入)--简单粗暴但有效。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数与this</title>
</head>
<body>
    <script>
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        Person.prototype.say = (self) => {
            console.log(self);
        }
        var xiaomi = new Person(小米,7);
        xiaomi.say(xiaomi); // Person {name: "小米", age: 7}
        xiaomi.food = 面包;
        Person.prototype.eat =(self) =>{
            console.log(self.name + 正在吃 + self.food);
        }
        xiaomi.eat(xiaomi); //小米正在吃面包
    </script>
</body>
</html>

 

所以看到这里,知道箭头函数的局限性后,建议减少使用箭头函数,避免出现不必要的错误。

 

以上是关于箭头函数无法使用this的解决方法的主要内容,如果未能解决你的问题,请参考以下文章

Vue Q

箭头函数和 this指向

Vue中匿名函数和箭头函数的this

ES6 箭头函数

react疯狂报错的解决办法

箭头函数、普通函数和this的区别