Javascript/ES6箭头函数用法

  箭头函数是一种函数简写方式, 定义形式是:参数(...)后面跟着箭头 =>,然后是函数内容体:

var getPrice = function() {
    return 4.55;
};
 // Implementation with Arrow Function 
var getPrice = () => 4.55;

 

注意到上面案例,getPrice箭头函数是使用简洁内容体实现,并没有return语句等。

下面是带有通常代码块内容体的实现:

let arr = ['apple ', 'banana ', 'orange '];
 let breakfast = arr.map( fruit => {
    console.log(fruit + 's ');
} );  // apples bananas oranges 

 

箭头函数不只是使得代码变得简短,而且与this绑定行为有紧密关系。

带有this关键词的箭头函数行为不同于正常函数,在Javascript中每个函数定义了他自己的this上下文,但是箭头函数中的this则是获得最接近(enclosing 封闭者)上下文的值,看看代码:

function Person() {
    //  Person() 构造器定义 `this` 是自己的一个实例
    this.age = 0;
 
    setInterval(function growUp() {
        // 在non-strict 模型, growUp()函数定义的`this`  
        // 是全局对象, 不同于上面Person()构造器里面定义的 `this` 
        this.age++;
    }, 1000);
}
var p = new Person();

 

在ECMAScript 3/5中,这个问题通过将这个值赋给一个可以被关闭的变量解决:

function Person() {
    var self = this;
    self.age = 0;
     setInterval(function growUp() {
        // 回调指向`self` 变量的值才是真正期望的对象
        self.age++;
    }, 1000);
}

 

再看看箭头函数中this是捕获封闭它的上下文的值,如下面代码:

function Person(){
    this.age = 0;
     setInterval(() => {
        this.age++; // |this| 指向了person对象
    }, 1000);
}
var p = new Person();

 

Javascript箭头函数的好处

 

Javascript中this的解释

Javascript6简明手册

 

猜你喜欢