ການປ່ຽນບັນຍານອອກປະຕູ JavaScript

ES6 中引入了箭头函数。

箭头函数允许我们编写更短的函数:

语法

let myFunction = (a, b) => a * b;

亲自试一试

之前:

hello = function() {
  return "Hello World!";
}

亲自试一试

用了箭头函数之后:

hello = () => {
  return "Hello World!";
}

亲自试一试

确实变短了!如果函数只有一个语句,并且该语句返回一个值,则可以去掉括号和 return 关键字:

箭头函数默认返回值:

hello = () => "Hello World!";

亲自试一试

注释:这仅在函数只有一条语句时才有效。

如果您有参数,则将它们传递到括号内:

带参数的箭头函数:

hello = (val) => "Hello " + val;

亲自试一试

事实上,如果只有一个参数,您也可以略过括号:

不带括号的箭头函数:

hello = val => "Hello " + val;

亲自试一试

ນັ້ນ 怎么办?

与常规函数相比,箭头函数对 ນັ້ນ 的处理也有所不同。

ໂດຍລະບົບຫົວຫນັງຫົວຫນັງ, ນັ້ນ ທີ່ຖືກຍົກພັນ.

ໃນພະເຈົ້າສະຫຼຸບປະຈຳ, ນັ້ນ ສະແດງເປັນບັນດາອຸປະກອນທີ່ເອິ້ນການຫຼຸບພະເຈົ້າ ສາມາດເປັນປ້ອງແປງພະເຈົ້າປ່າໄມ້ຫນັງຫຼັງ ຂຽວບັນນານ ຖະໜົນປ້ອງກັນ ບັນດາຫົວຫນັງບັນດາຫົວຫນັງບັນດາຫົວຫນັງ.

ສຳລັບບົດສະຫຼຸບຫົວຫນັງ,ນັ້ນ ຄຳກ່າວສະແດງບັນດາບັນດາອຸປະກອນທີ່ຖືກຍົກພັນພາສາຫົວຫນັງ.

ພວກເຮົາຈະເບິ່ງບົດສະຫຼຸບສອງບົດສະຫຼຸບເພື່ອເຂົ້າໃຈຄວາມແຕກຕ່າງລະຫວ່າງນັ້ນ.

ບົດສະຫຼຸບທັງສອງກັບສະແດງການເອິ້ນພະເຈົ້າສະຫຼຸບສອງຄັ້ງ ຄັ້ງທຳອິດແມ່ນໃນເວລາບັນຈຸເບື້ອງມາ ແລະຄັ້ງທີສອງແມ່ນໃນເວລາຜູ້ນຳໃຊ້ຊົງມືຂັ້ນງານ.

ບົດສະຫຼຸບທີໜຶ່ງກັບສະແດງພະເຈົ້າສະຫຼຸບປະຈຳ ທີ່ສະແດງພະເຈົ້າສະຫຼຸບຫົວຫນັງ.

ຜົນທີ່ປະກາດກັບຄືນສະແດງວ່າບົດສະຫຼຸບທີໜຶ່ງກັບສະແດງບັນດາບັນດາອຸປະກອນທີ່ບໍ່ອັນຕະລາຍ (window ແລະ button) ທີ່ສະແດງວ່າບັນດາບັນດາອຸປະກອນ window ສະແດງວ່າຜູ້ເປັນເຈົ້າຂອງພະເຈົ້າສະຫຼຸບ.

ບົດສະຫຼຸບ

ສຳລັບພະເຈົ້າສະຫຼຸບປະຈຳ ຄຳກ່າວ this ສະແດງເປັນບັນດາອຸປະກອນທີ່ເອິ້ນການຫຼຸບພະເຈົ້າ:

// ພະເຈົ້າສະຫຼຸບປະຈຳ:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// window 对象调用该函数:
window.addEventListener("load", hello);
// button 对象调用该函数:
document.getElementById("btn").addEventListener("click", hello);

亲自试一试

ບົດສະຫຼຸບ

ຖ້າໃຊ້ການຍົກພັນພາສາຫົວຫນັງ ນັ້ນ 表示函数的拥有者:

// 箭头函数:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// window 对象调用该函数:
window.addEventListener("load", hello);
// button 对象调用该函数:
document.getElementById("btn").addEventListener("click", hello);

亲自试一试

使用函数时请记住这些差异。有时,常规函数的行为正是您想要的,如果不是,请使用箭头函数。

浏览器支持

下表注明了首个完全支持 JavaScript 箭头函数的浏览器版本:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
2015 年 9 月 2015 年 7 月 2013 年 5 月 2016 年 9 月 2015 年 9 月