Was bedeutet der es6-Gleichheitszeichenpfeil?

Der Gleichheitszeichenpfeil „=>“ in

ES6 bezieht sich auf die Pfeilfunktion, die eine Abkürzung für eine Funktion ist. Die Syntax lautet (parameter)=>{Funktionskörper};“. Die Syntax von Pfeilfunktionsausdrücken lautet besser als die von Funktionsausdrücken Prägnanter, es gibt keine Bindung von this, super, arguments und new.target, es kann nicht über das neue Schlüsselwort aufgerufen werden und die Bindung von this kann nicht geändert werden

Der Betrieb Umgebung dieses Tutorials: Windows 7-System, ECMAScript-Version 6, Dell G3-Computer

=> ist eine neue Funktion, die im ES6-Standard hinzugefügt wurde Die Pfeilfunktion ist eine neue Funktion, die Pfeile verwendet (=>). Die Syntax des Pfeilfunktionsausdrucks ist prägnanter als der Funktionsausdruck, unterscheidet sich jedoch geringfügig von der herkömmlichen JavaScript-Funktion und konzentriert sich hauptsächlich auf die folgenden Aspekte: =>是箭头函数，是ES6标准中新增的一种新的函数。顾名思义，箭头函数是一种使用箭头（=>）定义函数的新语法，箭头函数表达式的语法比函数表达式更简洁，但是它与传统的JavaScript函数有些许不同，主要集中在以下方面：

• 没有this、super、arguments和new.target绑定，其值由外围最近一层非箭头函数决定

• 不能通过new关键字调用

• 没有原型

• 不可以改变this的绑定

• 不支持arguments对象

• 不支持重复的命名参数

• 函数体内的this的指向始终是指向定义它所在的对象，而不会指向调用它的对象，我们知道es5中的函数是谁执行它，它就指向谁。

执行环境

你可以自己去学习和尝试下, 你可以简单的把示例程序代码复制到你的浏览器控制台下. 现在, 推荐使用Firefox(22+)开发者工具, Firefox(22+)开发者工具现在支持箭头函数,你也可以使用谷歌浏览器. 如果你使用谷歌浏览器, 你必须要做下列两件事:

• 在谷歌浏览器中地址栏中输入：about:flags, 找到 "使用体验性JavaScript"选项，开启使用。

• 在函数的开头加上use strict,然后再在你的谷歌浏览中测试箭头函数吧(提示：请用谷歌浏览器v38,我当时就是被浏览器版本坑了):

(function(){
    "use strict";
    // use arrow functions here
}());

幸运的是后面会有越来越多的浏览器支持ES6特性. 现在你完成了所有准备工作, 让我们继续深入它吧!

一个新话题

最近大家在讨论关于ES6的一个话题：关于箭头函数, 像这样:

=>

新的语法

随着讨论产生了一个新的语法：

param => expression

新增的语法是作用在变量上, 可以在表达式中申明多个变量, 下面是箭头函数的使用模式:

//  一个参数对应一个表达式
param => expression;// 例如 x => x+2;

// 多个参数对应一个表达式
(param [, param]) => expression; //例如 (x,y) => (x + y);

// 一个参数对应多个表示式
param => {statements;} //例如 x = > { x++; return x;};

//  多个参数对应多个表达式
([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};

//表达式里没有参数
() => expression; //例如var flag = (() => 2)(); flag等于2
() => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1

//传入一个表达式，返回一个对象
([param]) => ({ key: value });
//例如  var fuc = (x) => ({key:x})
        var object = fuc(1);
        alert(object);//{key:1}

箭头函数是怎么实现的

我们可以把一个普通函数转换成用箭头函数来实现：

// 当前函数
var func = function (param) {
    return param.split(" ");
}
// 利用箭头函数实现
var func = param => param.split(" ");

从上面的例子中我们可以看出箭头函数的语法实际上是返回了一个新的函数, 这个函数有函数体和参数。

因此, 我们可以这样调用刚才我们创建的函数:

func("Felipe Moura"); // returns ["Felipe", "Moura"]

立即执行函数(IIFE)

你能在立即执行函数里使用箭头函数，例如:

( x => x * 2 )( 3 ); // 6

这行代码产生了一个临时函数，这个函数有一个形参x，函数的返回值为x*2,之后系统会马上执行这个临时函数, 将3赋值给形参x.

下面的例子描述了临时函数体里有多行代码的情况：

( (x, y) => {
    x = x * 2;
    return x + y;
})( 3, "A" ); // "6A"

相关思考

思考下面的函数：

var func = x => {
    return x++;
};

我们列出了一些常见的问题：

箭头函数创建的临时函数的arguments它不会被置:

console.log(arguments); // not defined

typeof和instanceof函

• Es gibt keine Bindung von this, super, arguments und new.target, und sein Wert wird durch die nächste Nicht-Pfeil-Funktion in der Peripherie bestimmt

• Kann nicht über das neue Schlüsselwort aufgerufen werden

• Es gibt keinen Prototyp

• Die Bindung davon kann nicht geändert werden

• Unterstützt keine Objektargumente
• Unterstützt keine wiederholten benannten Parameter
• Dies im Funktionskörper zeigt immer auf das Objekt, in dem es definiert ist, nicht auf das Objekt, das aufruft Wir wissen, dass jeder, der die Funktion in es5 ausführt, darauf verweisen wird

Ausführungsumgebung

Sie können es einfach selbst lernen und ausprobieren Jetzt wird empfohlen, Firefox (22+) für die Entwicklung zu verwenden. Die Entwicklertools von Firefox (22+) unterstützen jetzt Pfeilfunktionen. Wenn Sie Google Chrome verwenden, müssen Sie die folgenden zwei Dinge tun :

• Geben Sie „about:flags“ in die Adressleiste von Google Chrome ein, suchen Sie die Option „Experiential JavaScript verwenden“ und aktivieren Sie sie 🎜
• 🎜Am Anfang der Funktion hinzufügen Gehen Sie zu „strict“ und testen Sie dann die Pfeilfunktion in Ihrem Google Chrome (Tipp: Bitte verwenden Sie Google Chrome v38, ich habe mich damals von der Browserversion täuschen lassen): 🎜

func instanceof Function; // true
typeof func; // function
func.constructor == Function; // true

🎜Lucky Immer mehr Browser werden in Zukunft die ES6-Funktionen unterstützen. Nachdem Sie nun alle Vorbereitungsarbeiten abgeschlossen haben, wollen wir uns weiter damit befassen 🎜🎜🎜🎜Ein neues Thema🎜🎜🎜 🎜Ein Thema zu ES6 wurde kürzlich diskutiert: Bezüglich Pfeilfunktionen, wie folgt: 🎜

//  有效的常规语法
(function (x, y){
    x= x * 2;
    return x + y;
} (3, "B") );
// 无效的箭头函数语法
( (x, y) => {
    x= x * 2;
    return x + y;
} ( 3, "A" ) );
// 但是可以这样写就是有效的了：
( (x,y) => {
    x= x * 2;return x + y;
} )( 3,"A" );//立即执行函数

🎜🎜🎜Neue Syntax🎜🎜🎜🎜Eine neue Syntax wurde zusammen mit der Diskussion geboren: 🎜

var instance= new func(); // TypeError: func is not a constructor

🎜Die neue Syntax wird auf Variablen angewendet, und mehrere Deklarationen können in Ausdrucksvariablen deklariert werden. Das folgende Verwendungsmuster der Pfeilfunktion ist: 🎜

func.prototype; // undefined

🎜🎜🎜Wie die Pfeilfunktion implementiert ist🎜🎜
🎜🎜Wir können eine gewöhnliche Funktion in eine Pfeilfunktion umwandeln zu implementieren:
🎜

document.body.addEventListener('click', function(evt){
    console.log(this); // the HTMLBodyElement itself
});

🎜Aus dem obigen Beispiel können wir sehen, dass die Syntax der Pfeilfunktion tatsächlich eine neue Funktion zurückgibt, die einen Funktionskörper und Parameter hat. 🎜🎜Daher können wir die Funktion, die wir gerade erstellt haben, wie folgt aufrufen:🎜

function Person () {
    let fullName = null;
    this.getName = function () {
        return fullName;
    };
    this.setName = function (name) {
        fullName = name;
        return this;
    };
}
let jon = new Person();
jon.setName("Jon Doe");
console.log(jon.getName()); // "Jon Doe"
//注：this关键字这里就不解释了，大家自己google,baidu吧。

🎜🎜🎜Funktion zur sofortigen Ausführung (IIFE)🎜🎜🎜🎜Sie können Pfeilfunktionen in Funktionen zur sofortigen Ausführung verwenden, zum Beispiel:🎜

jon.setName("Jon Doe")
.getName(); // "Jon Doe"

🎜Diese Codezeile Erzeugt eine temporäre Funktion. Diese Funktion hat einen formalen Parameter x und der Rückgabewert der Funktion ist x*2. Das System führt diese temporäre Funktion sofort aus und weist dem formalen Parameter den Wert 3 zu: 🎜

let obj = {
    foo: "bar",
    getIt: function () {
        return this.foo;
    }
};
console.log( obj.getIt() ); // "bar"

🎜🎜 🎜 Verwandte Gedanken 🎜🎜🎜🎜 Betrachten Sie die folgende Funktion: 🎜

function Student(data){
    this.name = data.name || "Jon Doe";
    this.age = data.age>=0 ? data.age : -1;
    this.getInfo = function () {
        return this.name + ", " + this.age;
    };
    this.sayHi = function () {
        window.setTimeout( function () {
            console.log( this );
        }, 100 );
    }
}

let mary = new Student({
    name: "Mary Lou",
    age: 13
});
console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// window

🎜 Wir haben einige häufige Probleme aufgelistet: 🎜🎜Argumente temporärer Funktionen, die durch Pfeilfunktionen erstellt werden, werden nicht gesetzt: 🎜

function Student(data){
    this.name = data.name || "Jon Doe";
    this.age = data.age>=0 ? data.age : -1;
    this.getInfo = function () {
        return this.name + ", " + this.age;
    };
    this.sayHi = function () {
        window.setTimeout( ()=>{
            // the only difference is here
            console.log( this );
        }, 100 );
    }
}

let mary = new Student({
    name: "Mary Lou",
    age: 13
});
console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// Object { name: "Mary Lou", age: 13, ... }

🎜typeof und < code>instanceof function kann temporäre Funktionen auch normal überprüfen: 🎜

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.forEach(vowel => {
    console.log(vowel);
});

🎜Pfeilfunktionen in Klammern zu setzen ist ungültig: 🎜

//在Array.map里使用箭头函数，这里我就不分析函数执行过程了。。。。

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.map(vowel => {
    return vowel.toUpperCase();
});
// [ "A", "E", "I", "O", "U" ]

🎜Obwohl Pfeilfunktionen eine temporäre Funktion generieren, ist diese temporäre Funktion jedoch kein Konstruktor: 🎜

var factorial = (n) => {
    if(n==0) {
        return 1;
    }
    return (n * factorial (n-1) );
}
factorial(6); // 720

🎜 Es gibt auch kein Prototypobjekt: 🎜

let arr = ['a', 'e', 'i', 'o', 'u'];
arr.sort( (a, b)=&gt; a < b? 1: -1 );

🎜🎜🎜Scope🎜🎜🎜🎜Der Umfang dieser Pfeilfunktion unterscheidet sich etwas von anderen Funktionen. Wenn nicht im strengen Modus, zeigt dieses Schlüsselwort auf das Fenster, und der strikte Modus ist undefiniert, dies im Konstruktor zeigt auf die aktuelle Objektinstanz. Wenn sich diese innerhalb einer Funktion eines Objekts befindet, zeigt dies auf das Objekt. Dies kann auf ein DOM-Element verweisen. Wenn wir beispielsweise eine Ereignisüberwachungsfunktion hinzufügen, ist die Ausrichtung darauf möglicherweise nicht sehr gut Tatsächlich wird das Zeigen dieser Variablen (nicht nur dieser Variablen) nach einer Regel beurteilt: Bereichsfluss. Im Folgenden werde ich zeigen, wie dies in der Ereignis-Listener-Funktion und innerhalb der Objektfunktion angezeigt wird: 🎜🎜 In der Ereignis-Listener-Funktion: 🎜

// EventObject, BodyElement
document.body.addEventListener('click', event=>console.log(event, this));

🎜 Im Konstruktor: 🎜rrreee🎜 Wenn wir in diesem Beispiel die Funktion Person.setName The zurückgeben lassen Das Personenobjekt selbst können wir folgendermaßen verwenden:🎜rrreee🎜In einem Objekt:🎜

let obj = {
    foo: "bar",
    getIt: function () {
        return this.foo;
    }
};
console.log( obj.getIt() ); // "bar"

但是当执行流(比如使用了setTimeout)和作用域变了的时候，this也会变。

function Student(data){
    this.name = data.name || "Jon Doe";
    this.age = data.age>=0 ? data.age : -1;
    this.getInfo = function () {
        return this.name + ", " + this.age;
    };
    this.sayHi = function () {
        window.setTimeout( function () {
            console.log( this );
        }, 100 );
    }
}

let mary = new Student({
    name: "Mary Lou",
    age: 13
});
console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// window

当setTimeout函数改变了执行流的情况时，this的指向会变成全局对象,或者是在严格模式下就是undefine,这样在setTimeout函数里面我们使用其他的变量去指向this对象，比如self，that,当然不管你用什么变量，你首先应该在setTimeout访问之前，给self，that赋值，或者使用bind方法不然这些变量就是undefined。

这是后就是箭头函数登场的时候了，它可以保持作用域，this的指向就不会变了。

让我们看下上文起先的例子，在这里我们使用箭头函数：

function Student(data){
    this.name = data.name || "Jon Doe";
    this.age = data.age>=0 ? data.age : -1;
    this.getInfo = function () {
        return this.name + ", " + this.age;
    };
    this.sayHi = function () {
        window.setTimeout( ()=>{
            // the only difference is here
            console.log( this );
        }, 100 );
    }
}

let mary = new Student({
    name: "Mary Lou",
    age: 13
});
console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// Object { name: "Mary Lou", age: 13, ... }

分析：在sayHi函数中，我们使用了箭头函数，当前作用域是在student对象的一个方法中，箭头函数生成的临时函数的作用域也就是student对象的sayHi函数的作用域。所以即使我们在setTimeout调用了箭头函数生成的临时函数，这个临时函数中的this也是正确的指向。

有趣和有用的使用

创建一个函数很容易，我们可以利用它可以保持作用域的特征：

例如我们可以这么使用：Array.forEach()

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.forEach(vowel => {
    console.log(vowel);
});

分析：在forEach里箭头函数会创建并返回一个临时函数 tempFun,这个tempFun你可以想象成这样的：function(vowel){ console.log(vowel);}但是Array.forEach函数会怎么去处理传入的tempFunc呢？在forEach函数里会这样调用它：tempFunc.call(this,value);所有我们看到函数的正确执行效果。

//在Array.map里使用箭头函数，这里我就不分析函数执行过程了。。。。

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.map(vowel => {
    return vowel.toUpperCase();
});
// [ "A", "E", "I", "O", "U" ]

费布拉奇数列

var factorial = (n) => {
    if(n==0) {
        return 1;
    }
    return (n * factorial (n-1) );
}
factorial(6); // 720

我们也可以用在Array.sort方法里：

let arr = ['a', 'e', 'i', 'o', 'u'];
arr.sort( (a, b)=&gt; a < b? 1: -1 );

也可以在事件监听函数里使用：

// EventObject, BodyElement
document.body.addEventListener('click', event=>console.log(event, this));

总结

尽管大家可能会认为使用箭头函数会降低你代码的可读性，但是由于它对作用域的特殊处理，它能让我们能很好的处理this的指向问题。箭头函数加上let关键字的使用，将会让我们JavaScript代码上一个层次！尽量多使用箭头函数，你可以再你的浏览器测试你写的箭头函数代码，大家可以再评论区留下你对箭头函数的想法和使用方案！我希望大家能享受这篇文章，就像你会不就的将来享受箭头函数带给你的快乐.

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonWas bedeutet der es6-Gleichheitszeichenpfeil?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!