JavaScript Arrow Functions
- صفحه قبلی JS کلمه کلیدی this
- صفحه بعدی JS کلاسها
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;
ਇਹ 怎么办？
与常规函数相比，箭头函数对 ਇਹ 的处理也有所不同。
简而言之，使用箭头函数没有对 ਇਹ 的绑定。
在常规函数中，关键字 ਇਹ 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。
对于箭头函数，ਇਹ 关键字始终表示定义箭头函数的对象。
ਇਸ ਵਿੱਚ ਵਿਭਿੰਨਤਾ ਸਮਝਣ ਲਈ ਦੋ ਉਦਾਹਰਣ ਦੇਖੀਏ。
ਇਹ ਦੋਵੇਂ ਉਦਾਹਰਣ ਦੋ ਵਾਰ ਮੈਥਾਡ ਚਲਾਉਂਦੇ ਹਨ, ਪਹਿਲੀ ਵਾਰ ਪੰਜੀਕਰਣ ਸਮੇਂ, ਦੂਜੀ ਵਾਰ ਬਟਨ ਦਬਾਉਣ ਉੱਤੇ。
ਪਹਿਲਾ ਉਦਾਹਰਣ ਰੈਗੂਲਰ ਫੰਕਸ਼ਨ ਵਰਤਦਾ ਹੈ, ਦੂਜਾ ਉਦਾਹਰਣ ਯੂਨੀਅਨ ਫੰਕਸ਼ਨ ਵਰਤਦਾ ਹੈ。
ਨਤੀਜੇ ਵਿੱਚ ਪਹਿਲਾ ਉਦਾਹਰਣ ਦੋ ਵੱਖਰੇ ਆਬਾਦੀਆਂ (ਵਿੰਡੋ ਅਤੇ ਬਟਨ) ਵਾਪਰਦੇ ਹਨ, ਦੂਜਾ ਉਦਾਹਰਣ ਦੋ ਵਾਰ ਵਿੰਡੋ ਆਬਾਦੀ ਵਾਪਰਦੀ ਹੈ, ਕਿਉਂਕਿ ਵਿੰਡੋ ਆਬਾਦੀ ਫੰਕਸ਼ਨ ਦਾ 'ਮਲਕ' ਹੈ。
ਉਦਾਹਰਣ
ਰੈਗੂਲਰ ਫੰਕਸ਼ਨਾਂ ਲਈ, 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 نمودارگراهی پشتیبانی میکنند، نشان داده شده است:
| کروم | IE | فایرفاکس | سفاری | اپرا |
|---|---|---|---|---|
| کروم 45 | Edge 12 | فایرفاکس 22 | سفاری 10 | اپرا 32 |
| 2015 ستمبر | 2015 جولای | 2013 مه | 2016 ستمبر | 2015 ستمبر |
- صفحه قبلی JS کلمه کلیدی this
- صفحه بعدی JS کلاسها
