ES6——箭头函数

最新推荐文章于 2024-10-18 17:51:23 发布

今天周一天气晴

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量202

点赞数

文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/LeeBingNing/article/details/131039241

版权

1. ES6引入箭头函数的两大优点

①使代码更加简洁，从代码中去掉function、return和{ .. }节省了那些宝贵的键盘输入。

②改变this的行为特性，在箭头函数内部，this的绑定将不是动态的，而是词法的。在前面的代码中，如果使用箭头函数作为回调，this则如我们所愿是可预测的。

2. 使代码简洁

2.1 普通函数与箭头函数对比

//普通函数
function foo(x, y) {
    return x + y;
}
// 使用箭头
var foo = (x, y) => x + y;

2.2 几种不同形式的箭头函数

var f1 = () => 12;
var f2 = x => x ＊ 2;
var f3 = (x, y) => {
    var z = x ＊ 2 + y;
    y++;
    x ＊= 3;
    return (x + y + z) / 2;
};

①没参数时，箭头前要有小括号；

②单个参数，箭头前面直接写参数；

③多个参数，箭头前面，用小括号将多个参数包裹起来；

④箭头后面是单个表达式，则不用加{}，也不用加return；

⑤箭头后面有多个表达式，则需要使用{}将多个表达式包裹起来，且加return

2.3 简洁与可读性的平衡

箭头函数转变带来的可读性提升与被转化函数的长度往往呈负相关。这个函数越长，=>带来的好处就越小；函数越短，=>带来的好处就越大。所以建议只在确实需要简短的在线函数表达式的时候才采用=>，而对于那些一般长度的函数则无需改变。

3. 改变this的行为特性

碰到事件监听时，你是不是也这样做：

var controller = {
    makeRequest: function(..){
        var self = this;
        btn.addEventListener( "click", function(){
        // ..
        self.makeRequest(..);
        }, false );
    }
};

使用箭头函数后，上述代码可改造为：

var controller = {
    makeRequest: function(..){
        btn.addEventListener( "click", () => {
        // ..
            this.makeRequest(..);
        }, false );
    }
};

此时，this的绑定是词法的，是从包围的作用域中词法继承而来的this，即箭头函数的this指向是父级程序的this指向。此处的父级是makeRequest函数，而makeRequest函数的this指向是controller对象，则this.makeRequest能引用到controller中的makeRequest函数。

注意：箭头函数的this指向是父级程序的this指向。如果用错可能会导致程序出错

var controller = {
    makeRequest: (..) => {
    // ..
        this.helper(..);
    },
    helper: (..) => {
        // ..
    }
};
controller.makeRequest(..);

此时，this.helper()找不到。原因是：父级程序的this指向全局作用域中this的指向，即为全局对象，在全局对象中没有helper方法。