我知道>=运算符意味着大于或等于，但我在一些源代码中看到过=>。这个运算符是什么意思?
代码如下:
promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => {
if (!aDialogAccepted)
return;
saveAsType = fpParams.saveAsType;
file = fpParams.file;
continueSave();
}).then(null, Components.utils.reportError);
当前回答
正如所有其他答案已经说过的，它是ES2015箭头函数语法的一部分。更具体地说，它不是一个操作符，而是一个标点符号，将参数与正文分隔开来。例如(params) => {/* body */}。
其他回答
正如其他人所说，这是一种创建函数的新语法。
但这类函数与普通函数不同:
They bind the this value. As explained by the spec, An ArrowFunction does not define local bindings for arguments, super, this, or new.target. Any reference to arguments, super, this, or new.target within an ArrowFunction must resolve to a binding in a lexically enclosing environment. Typically this will be the Function Environment of an immediately enclosing function. Even though an ArrowFunction may contain references to super, the function object created in step 4 is not made into a method by performing MakeMethod. An ArrowFunction that references super is always contained within a non-ArrowFunction and the necessary state to implement super is accessible via the scope that is captured by the function object of the ArrowFunction. They are non-constructors. That means they have no [[Construct]] internal method, and thus can't be instantiated, e.g. var f = a => a; f(123); // 123 new f(); // TypeError: f is not a constructor
对其他答案不满意。截至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)的快捷方式
正如所有其他答案已经说过的，它是ES2015箭头函数语法的一部分。更具体地说，它不是一个操作符，而是一个标点符号，将参数与正文分隔开来。例如(params) => {/* body */}。
正如其他人所述，常规(传统)函数使用调用该函数的对象的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>
这被称为箭头函数，是ECMAScript 2015规范的一部分…
Var foo = ['a'， 'ab'， 'abc']; Var bar = foo。Map (f => f.length); console.log(栏);/ / 1、2、3
比前面的语法更短:
// < es6: Var foo = ['a'， 'ab'， 'abc']; Var bar = foo.map(函数(f) { 返回f.length; })； console.log(栏);/ / 1、2、3
DEMO
另一件很棒的事情是词汇上的。通常，你会这样做:
函数Foo() { This.name = name; 这一点。计数= 0; this.startCounting (); ｝ Foo.prototype.startCounting = function() { Var self = this; setInterval(函数(){ //这是窗口，而不是Foo{}，因为你可能期望 console.log(这个);//[对象窗口] //这就是为什么我们在setInterval()之前重新分配给self console.log (self.count); self.count + +; }, 1000) ｝ 新Foo ();
但可以用箭头这样重写:
函数Foo() { This.name = name; 这一点。计数= 0; this.startCounting (); ｝ Foo.prototype.startCounting = function() { setInterval(() => { console.log(这个);// [object对象] console.log (this.count);// 1, 2, 3 this.count + +; }, 1000) ｝ 新Foo ();
DEMO
中数 更多关于语法
这里有一个关于何时使用箭头函数的很好的答案。
