Verstehen Sie die Pfeilfunktionen und den Umfang in ES6

Unter den vielen großartigen neuen Funktionen von ES6 ist die Pfeilfunktion (oder große Pfeilfunktion) eine, die es wert ist, beachtet zu werden. Sie ist nicht nur großartig und cool, sie nutzt den Umfang auch schnell und bequem aus! Techniken, die wir zuvor verwendet haben, reduzieren jetzt viel Code ... aber es kann etwas schwierig sein, es zu verstehen, wenn Sie nicht verstehen, wie Pfeilfunktionen funktionieren.

Ausführungsumgebung

Sie können es selbst lernen und ausprobieren. Sie können den Beispielprogrammcode einfach auf Ihre Browserkonsole kopieren. Jetzt wird empfohlen, Firefox(22+)-Entwicklertools zu verwenden. Die Entwicklertools unterstützen jetzt Pfeil Funktionen, und Sie können auch Google Chrome verwenden, müssen Sie die folgenden zwei Dinge tun:

• Geben Sie in der Adressleiste von Google Chrome Folgendes ein: Suchen Sie nach „Experiential JavaScript verwenden“. Option und aktivieren Sie sie.

• Fügen Sie use strict am Anfang der Funktion hinzu 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):

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

Glücklicherweise werden in Zukunft immer mehr Browser ES6-Funktionen unterstützen. Jetzt, da Sie alle Vorbereitungen abgeschlossen haben, lasst uns weiter eintauchen.

Ein neues Thema: Informationen zu Pfeilfunktionen wie dieser:

=>

Neue Syntax

Mit der Diskussion wurde eine neue Syntax geboren:

param => expression

Die neue Syntax wird auf Variablen angewendet, und in Ausdrücken können mehrere Deklarationen vorgenommen werden. Variablen sind wie folgt das Verwendungsmuster von Pfeilfunktionen:

//  一个参数对应一个表达式
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}

Wie Pfeilfunktionen implementiert werden

Wir können eine gewöhnliche Funktion in eine Pfeilfunktion umwandeln, um Folgendes zu implementieren:

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

Aus dem obigen Beispiel können wir die Syntax der Pfeilfunktion sehen gibt tatsächlich eine neue Funktion zurück, die über einen Funktionskörper und Parameter verfügt.

Daher können wir die Funktion, die wir gerade erstellt haben, wie folgt aufrufen:

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

Funktion zur sofortigen Ausführung (IIFE)

Sie können Pfeilfunktionen in Funktionen zur sofortigen Ausführung verwenden, zum Beispiel:

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

Diese Codezeile generiert 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 3 zu. Code-Situation:

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

Verwandte Gedanken

Betrachten Sie die folgende Funktion:

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

Wir haben einige häufige Probleme aufgelistet:

Argumente einer temporären Funktion, die durch eine Pfeilfunktion erstellt wurde, werden nicht gesetzt:

console.log(arguments); // not defined

Temporäre Funktionen können auch normal überprüft werden:

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

Pfeilfunktionen setzen in Klammern ist ungültig:

//  有效的常规语法
(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" );//立即执行函数

Obwohl die Pfeilfunktion eine temporäre Funktion generiert, ist diese temporäre Funktion kein Konstruktor: typeof和instanceof函

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

Es gibt auch kein Prototyp-Objekt:

func.prototype; // undefined

Scope

Der Umfang dieser Pfeilfunktion unterscheidet sich etwas von anderen Funktionen. Wenn es sich nicht im strikten Modus befindet, zeigt das Schlüsselwort this auf window, im strikten Modus ist es undefiniert, und this im Konstruktor zeigt auf die aktuelle Objektinstanz, wenn sich this innerhalb einer Funktion eines Objekts befindet Dies zeigt möglicherweise auf ein DOM-Element. Wenn wir beispielsweise eine Ereignisüberwachungsfunktion hinzufügen, ist dies möglicherweise nicht sehr direkt (nicht nur auf diese Variable). wird nach einer Regel beurteilt: Scope Flow. Im Folgenden werde ich zeigen, wie dies in der Ereignis-Listener-Funktion und innerhalb der Objektfunktion angezeigt wird:

In der Ereignis-Listener-Funktion:

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

Im Konstruktor:

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吧。

Wenn wir in diesem Beispiel die Funktion Person.setName The zurückgeben lassen Das Personenobjekt selbst können wir wie folgt verwenden:

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

In einem Objekt:

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

Aber wenn sich der Ausführungsablauf (z. B. bei Verwendung von setTimeout) und der Umfang ändern, ändert sich auch dies.

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

Wenn die setTimeout-Funktion den Ausführungsablauf ändert, wird der Punkt davon zum globalen Objekt oder im strikten Modus undefiniert. Daher verwenden wir in der setTimeout-Funktion andere Variablen, um auf dieses Objekt zu zeigen, z. B. self, That, of Unabhängig davon, welche Variablen Sie verwenden, sollten Sie natürlich zuerst self Werte zuweisen, bevor Sie auf setTimeout zugreifen, oder die Bindungsmethode verwenden, da diese Variablen sonst undefiniert sind.

Hier kommt die Pfeilfunktion auf die Bühne. Sie kann den Umfang beibehalten und der Sinn davon wird sich nicht ändern.

Schauen wir uns das erste Beispiel oben an, in dem wir die Pfeilfunktion verwenden:

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, ... }

Analyse: In der sayHi-Funktion verwenden wir die Pfeilfunktion in einer Methode des Student-Objekts Funktion Der Umfang der generierten temporären Funktion ist auch der Umfang der sayHi-Funktion des Student-Objekts. Selbst wenn wir also die von der Pfeilfunktion in setTimeout generierte temporäre Funktion aufrufen, ist diese in dieser temporären Funktion auch korrekt angegeben.

有趣和有用的使用

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

例如我们可以这么使用：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)=> a < b? 1: -1 );

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

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

推荐的链接

下面列出了一系列有用的链接，大家可以去看一看

• Arrow Functions in MDN Documentation

• TC39 Wiki about Arrow Function

• ESNext

• ES6 Tools

• Grunt ES6 Transpiler

• ES6 Fiddle

• ES6 Compatibility Table

总结

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

相关免费学习推荐：js视频教程

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

Das obige ist der detaillierte Inhalt vonVerstehen Sie die Pfeilfunktionen und den Umfang in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!