首页 > 代码库 > ES6中的箭头函数
ES6中的箭头函数
讲真,自从出了箭头函数之后,再也不用担心 this 问题了,而且就简化代码这一方面来说,箭头函数可谓是装逼神器。
箭头函数有几点需要注意,如果 return 值就只有一行表达式,可以省去 return,默认表示该行是返回值,否则需要加一个大括号和 return。如果参数只有一个,也可以省去括号,两个则需要加上括号。比如下面的例子:
var f = v => v*2; // 等价于 var f = function(v){ return v*2; } // 判断偶数 var isEven = n => n % 2 == 0; // 需要加 return var = (a, b) => { if(a >= b) return a; return b; }
普通函数的 this 是可变的,我们把函数归为两种状态,一种是定义时,一种是执行时,如果仔细研究会发现,函数中的 this 始终是指向函数执行时所在的对象。比如全局函数执行时,this 执行 window,对象的方法执行时,this 执行该对象,这就是函数 this 的可变。而箭头函数中的 this 是固定的,看下面的例子:
function obj(){ setTimeout(()=>console.log(this.id), 20); } var id = 1; obj.call({id: 2}); // 2
执行的结果是 2 而不是全局的 1,表示 setTimeout 函数执行的时候,this 指向的不是 window,这和普通函数是有区别的。
实际上,箭头函数并没有 this 对象,将箭头函数转成 ES5 会发现:
// ES6 function obj() { setTimeout(()=>console.log(this.id), 20); } // ES5 function foo() { var _this = this; setTimeout(function () { console.log(this.id); }, 20); }
通过 call aply 等方法是无法绑定 箭头函数中的 this:
var f = () => this.x; var x = 1; f.call({x: 2}); // 1
对 this 的一个总结就是 在对象的方法中直接使用箭头函数,会指向 window,其他箭头函数 this 会指向上一层的 this,箭头函数并没有存储 this:
var obj = { id: 1, foo: ()=>{ return this.id; } } var id = 2; obj.foo(); // 2
除了 this 之外,箭头函数的 arguments 也是不存在,不能使用 new 来构造,也不能使用 yield 命令。
ES6中的箭头函数
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。