箭头函数用法

总结加借鉴

1、对 this 的关联。函数内置 this 的值,取决于 箭头函数在哪儿定义,而非箭头函数执行的上下文环境。
2 、new 不可用。箭头函数不能使用 new 关键字来实例化对象,不然会报错。
3、this 不可变。函数内置 this 不可变,在函数体内整个执行环境中为常量。
4、没有arguments对象。更不能通过arguments对象访问传入参数。只能使用显式命名或其他ES6新特性来完成。

鏈接:http://www.jianshu.com/p/4b101a763e85


语法:

箭头函数的语法很简单,定义自变量,然后是箭头和函数主体。

1、不引入参数:
var sum = () => 1 + 2;
// 等同于:
var sum = function() {    
    return 1 + 2; 
};
2、引入单个参数:
var reflect = value => value;
// 等同于:
var reflect = function(value) {    
    return value;
};

x => x * x
//等同于:
function (x) { 
    return x * x;
}

传一个参数就直接写就好了,不用加小括号。
句,所以也不用加大括号。
函数构造完毕赋给reflect加以引用。

3、引入多个参数,则应加上小括号
var sum = (num1, num2) => num1 + num2;
// 等同于:
var sum = function(num1, num2) {    
    return num1 + num2;
 };
4、若你想使用标准的函数体,或者函数体内可能有更多的语句要执行,则要用大括号将函数体括起来,并明确定义返回值。
var sum = (num1, num2) => { return num1 + num2; }
//等同于:
var sum = function(num1, num2) {    
  return num1 + num2; 
};

大括号内的部分基本等同于传统函数

5、箭头函数若要返回自定义对象的话,就必须用小括号把该对象括起来先
var getTempItem = id = > ({
   id: id,
  name: "Temp"
});
// 等同于:
var getTempItem = function(id) {
  return {
    id: id, 
    name: "Temp"
     };
};

用小括号包含大括号则是对象的定义,而非函数主体

基础语法

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 等价于:(param1, param2, …, paramN) => { return expression; }
/* 当删除大括号时,它将是一个隐式的返回值,这意味着我们不需要指定我们返回*/

// 如果只有一个参数,圆括号是可选的:
(singleParam) => { statements; }
singleParam => { statements; }

// 如果箭头函数 无参数 , 必须使用 ()圆括号或者 _下划线:
() => { statements; } 

_ => { statements; }
//返回一个对象时,函数体外要加圆括号
params => ({foo: bar})

// 支持 剩余参数 Rest parameters 和默认参数 default parameters:
(param1, param2, ...rest) => { statements }

// ...rest 参数, 必须是参数列表最后一个参数

不绑定 this

在箭头函数出现之前,每个新定义的函数都有其自己的 this 值(例如,构造函数的 this 指向了一个新的对象;严格模式下的函数的 this 值为 undefined;如果函数是作为对象的方法被调用的,则其 this 指向了那个调用它的对象)。在面向对象风格的编程中,这会带来很多困扰。

function Person() {
    // 构造函数 Person() 定义的 `this` 就是新实例对象自己
    this.age = 0;
    setInterval(function growUp() {
        // 在非严格模式下,growUp() 函数定义了其内部的 `this`为全局对象, 
        // 不同于构造函数Person()的定义的 `this`
        this.age++;
    }, 3000);
}

var p = new Person();

在 ECMAScript 3/5 中,这个问题通过把this的值赋给变量,然后将该变量放到闭包中来解决。

function Person() {
    var self = this; 
    // 也有人选择使用 `that` 而非 `self`, 只要保证一致就好.
    self.age = 0;
    setInterval(function growUp() {
        // 回调里面的 `self` 变量就指向了期望的那个对象了
        self.age++;
    }, 3000);
}

var p = new Person();


你可能感兴趣的:(javascript)