ES6-arrows

从今天开始记录学习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,这也就是为何上面的例子会报错。

解决方法:

常规方法

1.

function Prefixer(prefix) {
    this.prefix = prefix;
}
Prefixer.prototype.prefixArray = function (arr) {
    var that = this; // (A)
    return arr.map(function (x) {
        return that.prefix + x;
    });
};
  1. 利用数组方法最后可以传入参数
function Prefixer(prefix) {
    this.prefix = prefix;
}
Prefixer.prototype.prefixArray = function (arr) {
    return arr.map(function (x) {
        return this.prefix + x;
    }, this); // (A)
};

3.

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;
    });
};

本文分享自微信公众号 - 前端黑板报(FeHeiBanBao),作者:zhuxy

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-07-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • “节流函数”提高性能

    浏览器中DOM操作比起非DOM交互需要更多的内存和CUP时间,连续的DOM操作有可能会导致浏览器挂起,甚至崩溃。尤其IE中的onresize事件。 高频率的更改...

    前端黑板报
  • 软件工程师需要了解的网络知识:从铜线到HTTP(二)—— 以太网与交换机

    JohnLui:程序员,Swift Contributor,正在写《iOS 可视化编程与 Auto Layout》。 网络七层、四层模型 ? 四层模型是 TC...

    前端黑板报
  • 互联网分层架构,为啥要前后端分离?

    画外音:“别人在搞xxoo技术”一定不能成为,一家公司推动“xxoo技术”的理由。

    前端黑板报
  • JS示例18-数组基本使用

    专注APP开发
  • Java攻城狮面试考题

    1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; chars...

    别先生
  • JavaScript This 的六道坎

    鉴于this风骚的运作方式,对this的理解是永不过时的话题,本文试图通过将其大卸六块来钉住这个磨人的妖精。

    疯狂的技术宅
  • 蛇形矩阵

    <?php /* * 蛇形矩阵一 */ $n = 5; //填充数组,array_fill第一个参数是起始下标,第二个是总个数,第三个是元素 $ar...

    苦咖啡
  • (28)打鸡儿教你Vue.js

    达达前端
  • 抽象是啥?就是一群人的特征;js中的call是啥?就是我想用你家的电饭锅

    今天临时有事,下午没有上课。 上午在讲node的stream的时候,提到Stream是一个抽象的接口。这个抽象该怎么描述呢?我是按我自己的理解来说的,虽然并不严...

    web前端教室
  • uni-app: 引导页功能如何实现?

    1、Uni-App 启动页和引导页介绍 2、Uni-App 简单引导页示例 3、Uni-App 视频引导页示例

    Javanx

扫码关注云+社区

领取腾讯云代金券