浅谈ES6箭头函数

来源:互联网 发布:有关网络购物的消法 编辑:程序博客网 时间:2024/05/10 19:17

ES6标准新增了一种新的函数:Arrow Function(箭头函数)

箭头函数相当于匿名函数,且简化了函数定义。

 

1、箭头函数有两种格式:

① 只包含一个表达式,{ ... }和return都省略掉。

i => i * i

② 可以包含多条语句,不能省略{ ... }和return。 

x => {    if (x > 0)         return x * x;    else         return - x * x;}


2、箭头函数的参数个数:

① 无参数:用括号()

() => 3.14

② 1个参数:

i => i * i

相当于:

function (i) {    return i * i;}

③ 至少2个参数:用括号()括起来

(a, b) => a + b

相当于:

function (a, b) {    return a + b;}

④ 可变参数:

(x, y, ..., arr) => {    var i, sum = x + y;    for (i = 0; i < arr.length; i++)        sum += arr[i];    return sum;}

注意:

如果要返回一个对象,如果是单表达式,这么写会报错:x => { name: “Alice” }

因为和函数体的{ ... }有语法冲突,改为:x => ({ name: “Alice” })

 

3、this

虽然箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。也就是说,this对象是定义时所在的对象,而不是运行时所在的对象。箭头函数没有自己的this值,箭头函数内的this值继承自外围作用域。

① 一个内部函数不能直接从外部函数访问到this:

var object = {      name: "My object",      getName: function() {         var func = function() {              return this.name;  // this指向window或undefined        };  return func();    }  };  alert(object.getName()); // 输出:undefined

除了可以通过将this对象存储在另一个变量(如that)中来解决这个问题,还可以使用箭头函数:

var object = {      name: "My object",      getName: function() {          var func = () => {              return this.name;  // this指向object        };  return func();    }  };  alert(object.getName()); // 输出:My object

② 由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略。

var object = {      name: "My object",      getName: function() {          var func = () => {              return this.name;  // this指向object        };  return func.call({name: "Bruce"});    }  };  alert(object.getName()); // 输出:My object
1 0
原创粉丝点击