我知道>=运算符意味着大于或等于,但我在一些源代码中看到过=>。这个运算符是什么意思?

代码如下:

promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => {
    if (!aDialogAccepted)
        return;

    saveAsType = fpParams.saveAsType;
    file = fpParams.file;

    continueSave();
}).then(null, Components.utils.reportError);

当前回答

ES6 Arrow功能:

在javascript中=>是箭头函数表达式的符号。箭头函数表达式没有自己的this绑定,因此不能用作构造函数。例如:

Var单词= 'hi从外部对象'; 让obj = { Words: 'hi from inside object', Talk1:() => {console.log(this.words)}, Talk2: function () {console.log(this.words)} } obj.talk1 ();//没有它自己的this绑定,this ===窗口 obj.talk2 ();//有它自己的this绑定,这是obj

箭头函数的使用规则:

如果只有一个参数,可以省略参数的括号。 如果你在同一行返回一个表达式,你可以省略{}和return语句

例如:

val * 2; //它在同一行,返回一个表达式,因此省略{},表达式隐式返回 //也只有一个参数,因此参数周围的括号被省略 console.log (times2 (3));

其他回答

这就是ECMAScript 6中引入的“箭头函数表达式”。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions

出于历史原因(如果wiki页面稍后更改),它是:

与函数表达式相比,箭头函数表达式具有更短的语法,并且在词法上绑定this值。箭头函数总是匿名的。

用符号(=>)表示的箭头函数可以帮助您创建匿名函数和方法。这将导致更短的语法。例如,下面是一个简单的“Add”函数,它返回两个数字的加法。

function Add(num1 , num2 ){
return num1 + num2;
}

通过使用如下所示的“箭头”语法,上面的函数变得更短。

上述代码有两部分,如上图所示:-

输入:—指定匿名函数的输入参数。

逻辑:-这部分出现在符号“=>”之后。本节符合实际函数的逻辑。

许多开发人员认为箭头函数使您的语法更短,更简单,从而使您的代码可读。

如果你相信上面这句话,那么让我向你保证这是一个神话。如果你想一下,一个正确编写的带有名称的函数比在一行中使用箭头符号创建的神秘函数更具可读性。

箭头函数的主要用途是确保代码运行在 呼叫者上下文。

请参阅下面的代码,其中定义了一个全局变量“context”,该全局变量在函数“SomeOtherMethod”中访问,该函数从其他方法“SomeMethod”中调用。

这个“SomeMethod”具有本地“context”变量。现在因为“SomeOtherMethod”是从“SomeMethod”中调用的,我们期望它显示“本地上下文”,但它显示“全局上下文”。

var context = “global context”;

function SomeOtherMethod(){
alert(this.context);
}

function SomeMethod(){
this.context = “local context”;
SomeOtherMethod();
}

var instance = new SomeMethod();

但是如果使用Arrow函数替换调用,它将显示“本地上下文”。

var context = "global context";
   
    function SomeMethod(){
        this.context = "local context";
        SomeOtherMethod = () => {
            alert(this.context);
        }
        SomeOtherMethod();
    }
    var instance = new SomeMethod();

我鼓励你阅读这个链接(JavaScript中的箭头函数),它解释了JavaScript上下文的所有场景,以及在哪些场景中调用者上下文不受尊重。

你也可以在我制作的youtube视频中看到用javascript演示的箭头函数,它实际上演示了上下文这个术语。

它是什么

这是一个箭头函数。箭头函数是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上找到更多(以及更多最新的)信息。

正如其他人所述,常规(传统)函数使用调用该函数的对象的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>

正如其他人所说,这是一种创建函数的新语法。

但这类函数与普通函数不同:

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