JavaScript ES6 Arrow Functions(箭头函数)

JavaScript ES6 Arrow Functions(箭头函数)

大家好,又见面了,我是全栈君。

 

1. 介绍

第一眼看到ES6新增加的 arrow function 时,感觉非常像 lambda 表达式。

那么arrow function是干什么的呢?可以看作为匿名函数的简写方式。

var addition = function(a, b) { return a + b };
// 等同
var addition = (a, b) => { return a + b };

JavaScript ES6 Arrow Functions(箭头函数)

 

2. 语法

arrow functions(箭头函数)主要有以下4种语法:

// 1)基本
(param1, param2, paramN) => { expression }
(param1, param2, paramN) => { return expression }

// 2)只有一个参数时,括号是可选的
(singleParam) => { expression }
singleParam => { expression }

// 3)不带参数时,在参数区域带有括号
() => { expression }

// 4)函数主体若不带{}大括号,表示直接返回函数主体
(param1, param2, paramN) => { return expression }
(param1, param2, paramN) => expression // 等同于上面

 

3. 特性

3.1 没有自身this

arrow function没有自身的this,即在arrow function内部使用this时,此this指向创建此函数时的外部this。

场景:在Web开发时都会用到ajax的回调,回调函数内的this常常用外部创建的self、that、_this等变量暂存,而当回调函数采用arrow function方式时就可以直接使用外部的this。

示例

var ajax = function(url, successCallback) {
    // TODO ajax
    successCallback && successCallback();
};

var productBLL = {
    productName: '瓜子',
    query: function() {
        // arrow function
        ajax('query', () => {
            console.log(this); // => productBLL
            console.log(this.productName); // => 瓜子(productBLL.productName)
        });
    }
};

productBLL.query();

 

3.2  call()、apply() 调用无法改变this

就像上面讲的arrow function没有自身的this,当用call()或apply() 调用箭头函数时无法改变函数主体内的this。

示例

// 普通函数
var sayHello = function(userName) {
    console.log('hi ' + userName);
    console.log(this);
};
sayHello.call({ x: 1 }, 'polk'); // => this == { x: 1 }

// 箭头函数
var sayHello2 = (userName) => {
    console.log('hi ' + userName);
    console.log(this);
};
sayHello2.call({ y: 2 }, 'polk'); // => this == window

 

3.3 没有arguments

使用arrow function创建的函数,自身是没有arguments成员。

var sayHello = (userName) => {
    console.log('hi ' + userName);
    console.log(arguments); // => Uncaught ReferenceError: arguments is not defined
};

 

3.4 arrow function作为某个对象的方法成员时,this指向非此对象

当某个对象的方法为arrow function时,那么此方法内的this指向并非是此对象。

示例:

var productBLL = {
    productName: '瓜子',
    sayName: function() {
        console.log(this.productName);
    },
    sayName2: () => {
        console.log(this.productName);
    }
};

productBLL.sayName(); // => 瓜子
productBLL.sayName2(); // => undefined, this == window

  

4.扩展阅读

arrow function MDN:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107732.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 回归分析模型推广_案例分析的意义

    回归分析模型推广_案例分析的意义这个项目呢,就不需要我们做很多的数据清洗的工作了,因为我们手里的数据基本已经做好数据清洗了,我们主要需要做的就是数据可视化和文本挖掘工作。下面我们来一一介绍一下。目录1业务背景1.1分析流程概述1.2市场分类1.3产品生命周期1.4产品结构-波士顿矩阵(BCGMatrix)1.5处理项目需求的基本思路1.6项目需求例子1.7项目背景&产品架构1.8数据说明2驱虫市场的潜力分析2.1分析目的&加载数据2.1.1分析目的2.1.2加载数据2.2清洗&补全数

  • Sweener’s Ubuntu Gutsy Gibbon 7.10 Sources list (2)

    Sweener’s Ubuntu Gutsy Gibbon 7.10 Sources list (2)

  • 【图像处理】详解 最近邻插值、线性插值、双线性插值、双三次插值「建议收藏」

    【图像处理】详解 最近邻插值、线性插值、双线性插值、双三次插值「建议收藏」插值(Interpolation),通常指内插,既是离散数学名词,也是图像处理术语,二者的联系十分密切。作为图像放缩(Scale)的手段,常见的传统插值方法有:最近邻插值(NearestNeighbourInterpolation)、线性插值(LinearInterpolation)、双线性插值(BilinearInterpolation)、双三次插值(Bicubicinterpolation)等乃至更高阶的线性插值方法。

  • 精雕软件怎么把图片转成灰度图_怎么把普通的照片变成浮雕用的灰度图 精雕图 灰度图 浮雕图之间怎么能联系起来使用…

    精雕软件怎么把图片转成灰度图_怎么把普通的照片变成浮雕用的灰度图 精雕图 灰度图 浮雕图之间怎么能联系起来使用…怎么把普通的照片变成浮雕用的灰度图用PS啊,里面有这种效果的,若需要帮忙的话,可以加发给我一份啊,尽量帮你哈,呵呵用photoshop把照片变成灰度图,用PS做有很多方法,介绍两种:方法1:简单一步到位,直接在图像,模式里选择灰度即可。方法2:设置黑白照片,比“灰度”命令稍复杂,但可以保留更多照片细节。适合专业人士。怎样把普通图片做成浮雕用的的BMP灰度图?:使用工具:photoshop软件1、…

  • 群晖 docker 端口_群晖 l2tp

    群晖 docker 端口_群晖 l2tp最近群晖docker某个容器端口总是被扫描,系统自动封禁了很多IP,遂想更改端口,个人对Linux和docker非常不熟悉,只做记录,如有错误,欢迎指出流程分为以下几个步骤:停止容器修改端口映射重启docker停止容器首先用dockerps命令查看所有的容器名称和id例如容器ID为a1b2c3用dockerstopa1b2c3来停止容器修改端口映射修改端口映射主要在了两个文件hostconfig.json和config.v2.json下面是如何找到这两个文件的路径利用cd/v

    2022年10月18日
  • 解决mysql操作1045错误,1153错误和1130错误

    解决mysql操作1045错误,1153错误和1130错误

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号