JS的ES6箭头函数使用方法

ES6标准新增了一种新的函数:Arrow Function(箭头函数) 箭头函数相当于匿名函数,且简化了函数定义。   1、箭头函数有两种格式: ① 只包含一个表达式,{ ... }和return都省略掉...

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

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
廖雪
廖雪

78 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章