箭头函数：Vue为什么不推荐使用箭头函数？ |
您所在的位置：网站首页 › 匿名函数和箭头函数的区别 › 箭头函数：Vue为什么不推荐使用箭头函数？ |
箭头函数：Vue为什么不推荐使用箭头函数？
|
ES2015为我们带来许多特性，箭头函数备受瞩目，那么箭头函数有什么用呢？ 其实就是一个用处，创建函数。 以前，JavaScript创建函数有三种方式： // 方法1 let func1 = function(a,b){ return a + b; }; console.log(func1(1,2)); // 3 // 方法2 function func2(a,b){ return a - b; } console.log(func2(1,2)); // -1 // 方法3 (不推荐) let func3 = new Function("num1", "num2", "return num1 + num2");以上三种方式都可以创建函数，方法3不推荐。 方法2和方法1是有区别的，方法2存在变量提升。而方法1创建的函数，只能在定义之后用（不推荐使用var来创建变量）。 console.log(add(a+b)); // 正确执行 function add(a,b){ return a + b; };箭头函数给我们提供了第三种方式来创建函数。 let add = (a,b) => { return a + b; } (入参)=>{函数体} 箭头函数特性： 匿名 没有自己的this，arguments，super或new.target 用法： 简化函数不使用箭头函数 // 使用 findIndex 查找 people数组中 age 为 13 let people = [{name:"A",age:11},{name:"B",age:12},{name:"C",age:13}]; let age13Index = people.findIndex(function(item)=>{ return item.age === 13; })使用箭头函数 let people = [{name:"A",age:11},{name:"B",age:12},{name:"C",age:13}]; let age13Index = people.findIndex(item =>item.age === 13})简洁了许多，我们使用箭头函数干掉了 return、 funcion 、入参() 。 绑定thisMDN 在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值： 如果是该函数是一个构造函数，this指针指向一个新的对象。 在严格模式下的函数调用下，this指向undefined。 如果是该函数是一个对象的方法，则它的this指针指向这个对象。 使用call、apply、bind改变函数里this指向。不使用箭头函数 function Person() { let that = this; that.age = 0; setInterval(function growUp() { // 需要使用 that 指向 this，因为setInterval的回调函数会在 window 环境下执行，this===window that.age++; }, 1000); } let p = new Person();使用箭头函数 function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| 正确地指向 p 实例 }, 1000); } let p = new Person();这是咋回事呢，Babel转一下。转ES5
缺点： 箭头函数没有 arguments，super 和 new.target。 箭头函数不能当构造函数。new ()=>{} // 报错。 ！！！箭头函数没有this。1、2很明显，箭头函数就是这样设计的。 但是3也是缺点呢？3不是帮我们干掉that了吗？ 是的，箭头函数可以把that干掉，但是，它本身不带this，对于依赖this的函数，比如 对象中的函数，它就有可能出现问题。 let people = { name: "A", age: 18, getName: function(){ return this.name; // 根据 "如果是该函数是一个对象的方法，则它的this指针指向这个对象" ,我们可以快乐的使用this来访问对象内的属性 }, getAge: ()=>{ return this.age; // 箭头不带this，非严格模式this 会 指向 window，严格模式为 undefined。 } } people.getName() // A people.getAge() // 报错我们可以使用Babel将上述代码转换为ES5。 所以，在Vue文档里有这么一段话。 箭头函数不要随便用。因为箭头函数能做的，普通函数都可以实现。 创作不易！如果对你有帮助，还请点赞收藏。 如果有疑惑可以在下方留言。 如果有什么建议，可以私信我。 |
【本文地址】
今日新闻 |
推荐新闻 |