专注Java教育14年 全国咨询/投诉热线:444-1124-454
赢咖4LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 ES6箭头函数的介绍

ES6箭头函数的介绍

更新时间:2022-06-20 09:06:17 来源:赢咖4 浏览430次

什么是箭头函数(arrow function)

首先,我们来看一下过去我们撰写函数的方法:

在ES6 中,我们可以把它改成箭头函数的写法,它会变成下面这样:

没有参数的时候要记得加上空括号

要特别留意的地方是,在箭头函数中如果没有带入参数时,一样要加上空括号。

如果只是要回传某个值,可以省略return

如果我们的函式本身只是要回传某个值的话,可以把return 这个字省略掉:

箭头函数带入参数值

两个以上的参数,需要使用括号

当我们的函式拥有两个以上的参数时,我们一样要使用括号来带入参数,写法像是下面这样子:

当函数只有一个参数时,不需要使用括号

从上面的例子我们可以知道,当函数没有参数或有两个以上的参数时,我们都要加上括号( ),但是当函数只有一个参数时,可以省略括号不写,因此,当我们的函数只有一个参数时,我们的函数长得像这样:

箭头函数当中的this 是定义时的对象,而不是使用时的对象

在使用箭头函数时,有一点要注意的是,在箭头函数中,this 指称的对象在所定义时就固定了,而不会随着使用时的脉络而改变。

让我们来看一下这个例子:

在这个范例中,不论我们使用的是原本function 的写法或ES6中的箭头函式,都会回传得到最外层的window 物件,这样看起来似乎两者没有太大的差别。

然而,换个例子的情况就不一样,让我们来看看下面两个不同的例子:

例子一

我们分别用原本的写法和箭头函示的写法建立了两个function:

// 原本的 function
let fn = function(){
  console.log(this.constructor.name);  // Object(data)
  setTimeout(function(){
    console.log(this.constructor.name) // Window
  },100);
}
// 箭頭函式 Arrow function
let fn_arr = function(){
  console.log(this.constructor.name);  // Object(data)
  setTimeout(() => {
    console.log(this.constructor.name) // Object(data)
  },100);
}
let id = 21;
let data = {
  id: 21
}
fn.call(data);     
fn_arr.call(data); 

例子二

第二个例子是使用addEventListener 来达到示范,首先我们在HTML 中建立一个button element,然后利用JS 来抓取这个button,接着JS 部分则如下所示:

var button = document.querySelector('button');
var fn_arr = () => {
  // 建立 function 時 this 指 Window
  console.log(this.constructor.name)  // 執行function時 this 指 Window
};
var fn = function(){
  // 建立 function 時 this 指 Window
  console.log(this.constructor.name)  // 執行function時 this 指 HTMLButtonElement
button.addEventListener('click', fn_arr);

和例子一中的setTimeout 类似,我们使用的addEventListener ,也会在整个execution context 执行结束后,在网页触发事件时才执行。

因此不论在传统的函式写法(fn)或箭头函式(fn_arr)的写法,一开始建立function的时候this所指称的都是 window 这个物件,然而,如果是使用传统的写法,在触发这个事件时所指称的对象会从原本的window 变成HTMLButtonElement;若使用的是箭头函式,则会固定所指称的对象,因此this 依然指称的是window 这个物件。

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>