1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-25 03:02:21 +00:00
es6tutorial/docs/arrow.md
2014-04-23 22:21:35 +08:00

2.2 KiB
Raw Blame History

箭头函数

定义

ES6允许使用“箭头”=>)定义函数。


var f = v => v;

上面的箭头函数等同于:


var f = function(v) {
    return v;
};

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。


var f = () => 5; 
// 等同于
var f = function (){ return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
    return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句就要使用大括号将它们括起来并且使用return语句返回。


var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。


var getTempItem = id => ({ id: id, name: "Temp" });

##实例:回调函数

箭头函数的一个用处是简化回调函数。


// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

另一个例子是


// 正常函数写法
var result = values.sort(function(a, b) {
    return a - b;
});

// 箭头函数写法
var result = values.sort((a, b) => a - b);

注意点

箭头函数有几个使用注意点。

  • 函数体内的this对象绑定定义时所在的对象而不是使用时所在的对象。
  • 不可以当作构造函数也就是说不可以使用new命令否则会抛出一个错误。
  • 不可以使用arguments对象该对象在函数体内不存在。

关于this对象下面的代码将它绑定定义时的对象。


var handler = {

    id: "123456",

    init: function() {
        document.addEventListener("click",
                event => this.doSomething(event.type), false);
    },

    doSomething: function(type) {
        console.log("Handling " + type  + " for " + this.id);
    }
};

上面代码的init和doSomething方法中都使用了箭头函数它们中的this都绑定handler对象。否则doSomething方法内部的this对象就指向全局对象运行时会报错。