我知道>=运算符意味着大于或等于，但我在一些源代码中看到过=>。这个运算符是什么意思?
代码如下:
promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => {
if (!aDialogAccepted)
return;
saveAsType = fpParams.saveAsType;
file = fpParams.file;
continueSave();
}).then(null, Components.utils.reportError);
当前回答
JavaScript箭头函数大致相当于python中的lambda函数或Ruby中的块。这些是具有自己特殊语法的匿名函数，并在其封闭作用域的上下文中操作。这意味着它们没有自己的“This”，而是从直接的封闭函数中访问one。
来自ECMA标准:
ArrowFunction不为参数定义本地绑定， 超级，这个，或者新的目标。任何对参数、super、this或new的引用。ArrowFunction中的target必须解析为 在词汇封闭的环境中绑定。通常这将是 直接封闭函数的函数环境。
通常你会读成“箭头函数表达式是传统函数表达式的紧凑替代”，这是不正确的。箭头函数不是传统函数的简写，它们的行为与传统函数不同。
语法
// Traditional Function
// Create their own scope inside the function
function (a){
return a + 100;
}
// Arrow Function
// Do NOT create their own scope
// (Each step along the way is a valid "arrow function")
// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
return a + 100;
}
// 2. Remove the body braces and word "return" -- the return is implied.
(a) => a + 100;
// 3. Remove the argument parentheses (only valid with exactly one argument)
a => a + 100;
其他回答
这就是ECMAScript 6中引入的“箭头函数表达式”。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions
出于历史原因(如果wiki页面稍后更改)，它是:
与函数表达式相比，箭头函数表达式具有更短的语法，并且在词法上绑定this值。箭头函数总是匿名的。
再举一个例子，说明lambda不使用map也能做什么:
a = 10
b = 2
var mixed = (a,b) => a * b;
// OR
var mixed = (a,b) => { (any logic); return a * b };
console.log(mixed(a,b))
// 20
正如其他人所述，常规(传统)函数使用调用该函数的对象的this(例如，被单击的按钮)。相反，箭头函数使用定义该函数的对象中的this。
考虑两个几乎相同的函数:
regular = function() {
' Identical Part Here;
}
arrow = () => {
' Identical Part Here;
}
下面的代码段演示了这对于每个函数所代表的内容之间的基本区别。常规函数输出[object HTMLButtonElement]，而箭头函数输出[object Window]。
<html> <button id="btn1">Regular: `this` comes from "this button"</button> <br><br> <button id="btn2">Arrow: `this` comes from object that defines the function</button> <p id="res"/> <script> regular = function() { document.getElementById("res").innerHTML = this; } arrow = () => { document.getElementById("res").innerHTML = this; } document.getElementById("btn1").addEventListener("click", regular); document.getElementById("btn2").addEventListener("click", arrow); </script> </html>
对其他答案不满意。截至2019/3/13投票最多的答案实际上是错误的。
简单来说，=>的意思是，它是一个编写函数AND的快捷方式，用于将它绑定到当前的this
const foo = a => a * 2;
是有效的捷径吗
const foo = function(a) { return a * 2; }.bind(this);
你可以看到所有被缩短的地方。我们不需要function、return、.bind(this)，甚至不需要大括号或圆括号
箭头函数的一个稍微长一点的例子是
const foo = (width, height) => {
const area = width * height;
return area;
};
如果我们想要函数的多个参数，我们需要圆括号，如果我们想要写多个表达式，我们需要大括号和显式返回。
理解.bind部分很重要，这是一个很大的主题。这与JavaScript中的含义有关。
所有函数都有一个隐式形参this。在调用函数时如何设置此值取决于该函数的调用方式。
Take
function foo() { console.log(this); }
如果正常的话
function foo() { console.log(this); }
foo();
这将是全局对象。
如果你处于严格模式
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
它是没有定义的
你可以直接使用call或apply来设置
function foo(msg) { console.log(msg, this); }
const obj1 = {abc: 123}
const obj2 = {def: 456}
foo.call(obj1, 'hello'); // prints Hello {abc: 123}
foo.apply(obj2, ['hi']); // prints Hi {def: 456}
您还可以使用点操作符隐式地设置此值。
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
当您想要使用函数作为回调或监听器时，就会出现一个问题。创建类并想将一个函数赋值为访问该类实例的回调函数。
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
上面的代码将无法工作，因为当元素触发事件并调用函数时，this值将不是类的实例。
解决这个问题的一种常用方法是使用.bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
因为箭头语法和我们写的是一样的
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
Bind有效地创建了一个新函数。如果bind不存在，你基本上可以像这样创建自己的
function bind(functionToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
在没有展开运算符的旧JavaScript中，它是
function bind(functionToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
理解这些代码需要理解闭包，但简单来说，bind创建了一个新函数，它总是调用带有绑定到它的this值的原始函数。箭头函数做同样的事情，因为它们是bind(this)的快捷方式
它是什么
这是一个箭头函数。箭头函数是ECMAscript 6引入的一种简短语法，可以类似于使用函数表达式的方式使用。换句话说，你可以经常使用它们来代替像function (foo){…}这样的表达式。但它们有一些重要的区别。例如，它们不绑定自己的值(参见下面的讨论)。
箭头函数是ECMAscript 6规范的一部分。并非所有浏览器都支持它们，但Node v. 4.0+和截至2018年使用的大多数现代浏览器都部分或完全支持它们。(我在下面列出了支持浏览器的部分列表)。
您可以在Mozilla文档中阅读更多关于箭头函数的内容。
来自Mozilla文档:
与函数表达式相比，箭头函数表达式(也称为胖箭头函数)具有更短的语法，并且在词法上绑定this值(不绑定自己的this、参数、super或new.target)。箭头函数总是匿名的。这些函数表达式最适合用于非方法函数，它们不能用作构造函数。
在箭头函数中如何工作的说明
箭头函数最方便的特性之一就隐藏在上面的文本中:
一个箭头函数…从词法上绑定this值(不绑定自己的this…)
简单来说，这意味着箭头函数从它的上下文中保留this值，而没有自己的this值。传统函数可以绑定自己的this值，这取决于它是如何定义和调用的。这可能需要大量的操作，如self = This;等，以便从一个函数访问或操作另一个函数中的This。有关此主题的更多信息，请参阅Mozilla文档中的解释和示例。
示例代码
示例(同样来自文档):
var a = [
"We're up all night 'til the sun",
"We're up all night to get some",
"We're up all night for good fun",
"We're up all night to get lucky"
];
// These two assignments are equivalent:
// Old-school:
var a2 = a.map(function(s){ return s.length });
// ECMAscript 6 using arrow functions
var a3 = a.map( s => s.length );
// both a2 and a3 will be equal to [31, 30, 31, 31]
兼容性说明
您可以在Node中使用箭头函数，但浏览器的支持参差不齐。
浏览器对该功能的支持已经有了很大的改进，但对于大多数基于浏览器的用法来说，它仍然不够广泛。截至2017年12月12日，当前版本支持:
Chrome (v. 45+) Firefox (v. 22+) Edge (v. 12+) 歌剧(32+) Android浏览器(v47 +) Opera Mobile (33+) Chrome for Android (v47 +) Firefox for Android (v. 44+) Safari (v. 10+) iOS Safari(版本10.2+) 三星互联网(5+) 百度浏览器(v7.12 +)
不支持:
IE(通过第11节) Opera Mini(通过v. 8.0) 黑莓浏览器(通过v. 10) IE Mobile(通过v. 11) UC浏览器for Android(通过v. 11.4) QQ(通过1.2 .)
你可以在CanIUse.com上找到更多(以及更多最新的)信息。
