什么时候不该使用ES6箭头函数

发布时间：2022-08-18 18:42

从开始接触es6到在项目中使用已经有一段时间了,es6有很多优秀的新特性，其中最有价值的特性之一就是箭头函数,它简洁的语法以及更好理解的this指向都非常的吸引我.但是新事物也是有两面性的,箭头函数有它的便捷和优点,但是它也有缺点,他的优点是代码简洁,this提前定义(不用在定义this),但他的缺点也是这些,比如代码太过简洁,导致不好阅读;this提前定义,导致无法使用js进行一些ES5里面看起来非常正常的操作。针对这些缺点,下面我就总结一下什么情况下不该使用箭头函数。

1.在对象上定义函数

 var obj = {
     array: [1, 2, 3],
     hobby: "篮球",
     say: () => {
         console.log(this === window);// true
         console.log(this.hobby);// undefined
         console.log(this.array.reduce(function(result, item) {
             return result + item;
         }, 0));
     }
 }
 // TypeError: Cannot read property 'reduce' of undefined
 obj.say();

say方法定义在obj对象上,当调用的时候我们发现会抛出一个错误,这是因为函数中this的指向是window,所以this.hobby和this.array都是undefined,根本原因我相信了解过ES6箭头函数的小伙伴都知道

箭头函数没有自己的this指向,它的this依赖于该箭头函数的父作用域的this指向 (如果父作用域也是箭头函数,则向外在跳一层)

解决方法也很简单,这里可以用ES6里属性的简洁语法,在这种情况下,this值就取决于函数的调用方式

var obj = {
    array: [1, 2, 3],
    hobby: "篮球",
    say() {
        console.log(this === window);//false
        console.log(this.hobby);// 篮球
        console.log(this.array.reduce(function(result, item) {
            return result + item;
        }, 0));// 6
    }
}
obj.say();

2.原型上定义函数

在对象原型上定义函数也是遵循一样的规则

function Person(myName) {
    this.myName = myName;
}
Person.prototype.sayName = () => {
    console.log(this === window); // true
    console.log(this.myName); // undefined
}
var person = new Person("cms");
person.sayName();

解决办法: 使用function 函数表达式

function Person(myName) {
    this.myName = myName;
}
Person.prototype.sayName = function() {
    console.log(this === window); // true
    console.log(this.myName); // cms
}
var person = new Person("cms");
person.sayName();

3.动态上下文中的回调函数

this是js中非常强大的特点,他让函数可以根据其调用方式动态的改变上下文,在客户端,如果DOM元素上绑定了监听函数是非常普遍的行为,在DOM事件被触发时,回调函数中的this指向该DOM,可当我们使用箭头函数时,结果可就与预想的不一样了:

var btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
    console.log(this); // window
    this.innerHTML = "click me";
})

因为这个回调的箭头函数在全局上下文中被定义了,所以该this的指向是window.所以当this指向是由目标对象决定时,应该使用函数表达式:

 var btn = document.querySelector("#btn");
 btn.addEventListener("click", function() {
     console.log(this === window); // false
     this.innerHTML = "click me";
 })

4. 构造函数中

需要注意的是,构造函数不能使用箭头函数,如果使用则会抛出异常

 var Person = (myName) => {
     this.myName = myName;
 }
 var person = new Person("cms");
 //  TypeError: Person is not a constructor
 console.log(person.myName);

解决办法: 构造函数需使用函数表达式

function Person(myName) {
    this.myName = myName;
}
var person = new Person("cms");
console.log(person.myName); // cms

5.太简短(难以理解)的函数

在实际项目开发过程中,一般由多个开发者共同协作完成,就算由单人完成,后期维护也并不是同一个人,箭头函数有时候理解起来并不友好,比如:

 var multiply = (a, b) => b === undefined ? b => a * b : a * b;
 var sum = multiply(2);
 console.log(sum(3));// 6
 console.log(multiply(2, 3));// 6

这个函数的作用就是当只有一个参数a时,此时b为undefined,则返回一个接收参数b并返回a*b的函数;当接收两个参数时则直接返回a*b的乘积,这个函数可以正常的运行并且看起来很简洁,但是从第一眼看去并不是很好理解。为了让这个函数更好的让人理解，我们可以直接使用函数表达式:

function multiply(a, b) {
    if (b === undefined) {
        return function(b) {
            return a * b;
           }
    } else {
        return a * b;
    }
}
var sum = multiply(2);
console.log(sum(3)); // 6
console.log(multiply(2, 3)); // 6

总结

毫无疑问,箭头函数给我带来了很多便利,让代码更加简洁,但也有很多不便之处,比如以上列举的这几种情况不能使用箭头函数,其他情况,请尽情的使用箭头函数.(如果有哪些错误的地方,希望各位大牛能批评指正,谢谢!)