ES6-arrows

前端黑板报

发布于 2018-01-29 16:34:48

3780

发布于 2018-01-29 16:34:48

文章被收录于专栏：前端黑板报前端黑板报前端黑板报

从今天开始记录学习ES6的知识点，这次学习的是新增：Arrow functions

Arrows以=>为简写形式，特点：

语法简洁
文法固定的this对象
总是匿名函数

语法：

() => { ... } // no parameter
x => { ... } // one parameter, an identifier
(x, y) => { ... } // several parameters

例子：

arrows

var odds = evens.map(v => v + 1);

常规函数

var odds = evens.map(function(v){return v + 1});

用途：

function Prefixer(prefix) {
    this.prefix = prefix;
}
Prefixer.prototype.prefixArray = function (arr) { // (A)
    'use strict';
    return arr.map(function (x) { // (B)
        // Doesn’t work:
        return this.prefix + x; // (C)
    });
};

在严格模式下，匿名函数中的this的值为undefined，这也就是为何上面的例子会报错。

解决方法：

常规方法

function Prefixer(prefix) {
    this.prefix = prefix;
}
Prefixer.prototype.prefixArray = function (arr) {
    var that = this; // (A)
    return arr.map(function (x) {
        return that.prefix + x;
    });
};

利用数组方法最后可以传入参数

function Prefixer(prefix) {
    this.prefix = prefix;
}
Prefixer.prototype.prefixArray = function (arr) {
    return arr.map(function (x) {
        return this.prefix + x;
    }, this); // (A)
};

function Prefixer(prefix) {
    this.prefix = prefix;
}
Prefixer.prototype.prefixArray = function (arr) {
    return arr.map(function (x) {
        return this.prefix + x;
    }.bind(this)); // (A)
};

arrows

function Prefixer(prefix) {
    this.prefix = prefix;
}
Prefixer.prototype.prefixArray = function (arr) {
    return arr.map((x) => {
        return this.prefix + x;
    });
};

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2015-07-13，如有侵权请联系 cloudcommunity@tencent.com 删除

undefined