Une analyse approfondie des fonctions fléchées et de leur portée dans ES6

Parmi les nombreuses nouvelles fonctionnalités intéressantes de l'ES6, les fonctions fléchées (ou grandes fonctions fléchées) méritent qu'on s'y intéresse. Ce n'est pas seulement génial et cool, c'est bien d'en profiter ! la portée, nous pouvons utiliser rapidement et facilement la technologie que nous utilisions auparavant, en réduisant beaucoup de code... mais cela peut être un peu difficile à comprendre si vous ne comprenez pas le principe des fonctions fléchées. Alors, jetons un coup d'œil. sur les flèches. Fonction, maintenant !

Environnement d'exécution

Vous pouvez l'apprendre et l'essayer vous-même, vous pouvez simplement copier l'exemple de code du programme sur la console de votre navigateur. , il est recommandé d'utiliser les outils de développement Firefox (22+). Les outils de développement Firefox (22+) prennent désormais en charge les fonctions de flèche. Vous pouvez également utiliser Google Chrome. Si vous utilisez Google Chrome, vous devez effectuer les deux opérations suivantes :

• Saisissez : about:flags dans la barre d'adresse de Google Chrome, recherchez l'option "Utiliser JavaScript expérientiel" et activez-la.

• Ajoutez use strict au début de la fonction, puis testez la fonction flèche dans votre Google Chrome (astuce : merci d'utiliser Google Chrome v38, j'étais bloqué avec la version du navigateur au moment time Pit):

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

Heureusement, de plus en plus de navigateurs prendront en charge les fonctionnalités ES6. Maintenant que vous avez terminé tous les préparatifs, continuons à nous y plonger !

Un nouveau sujet

Récemment tout le monde discute d'un sujet sur ES6 : à propos des fonctions fléchées, comme ceci :

=>

Nouvelle syntaxe

À la suite de la discussion, une nouvelle syntaxe est née :

param => expression

La nouvelle syntaxe est appliquée aux variables. Plusieurs variables peuvent être déclarées dans les expressions. Voici le mode d'utilisation de la fonction flèche :

.

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

Comment les fonctions fléchées sont implémentées

Nous pouvons convertir une fonction ordinaire en fonction fléchée :

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

À partir de l'exemple ci-dessus, nous pouvons voir que la syntaxe de la fonction flèche renvoie en fait une nouvelle fonction, qui a un corps de fonction et des paramètres.

Par conséquent, nous pouvons appeler la fonction que nous venons de créer comme ceci :

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

Fonction d'exécution immédiate (IIFE)

Vous pouvez l'exécuter dans le fonction immédiate Utilisez des fonctions fléchées, par exemple :

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

Cette ligne de code génère une fonction temporaire. Cette fonction a un paramètre formel x, et la valeur de retour de la fonction est x*2. cette fonction temporaire immédiatement, en changeant 3 Attribuer une valeur au paramètre formel La fonction suivante :

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

Nous avons répertorié quelques problèmes courants :

Les arguments de la fonction temporaire créée par la fonction flèche seront ne pas être défini :

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

Les fonctions temporaires peuvent également être vérifiées normalement avec des

chiffres :

console.log(arguments); // not defined

Mettre la fonction flèche entre parenthèses n'est pas valide :

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

Bien que la fonction flèche génère une fonction temporaire, cette fonction temporaire n'est pas un constructeur :

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

Il n'y a pas non plus d'objet prototype :

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

typeofinstanceof函Scope

La portée de cette fonction fléchée est différente des autres fonctions. Différente, s'il ne s'agit pas d'un mode strict, le mot-clé this pointe vers la fenêtre et le mode strict n'est pas défini. Ceci dans le constructeur pointe vers l'instance d'objet actuelle si celle-ci se trouve dans un. fonction d'un objet, this pointe vers l'objet. Cela peut pointer vers un élément DOM. Par exemple, lorsque nous ajoutons une fonction d'écoute d'événements, le pointage de this peut ne pas être très direct. pas seulement cette variable) les variables sont jugées selon une règle : le flux de portée. Ci-dessous, je vais montrer comment cela apparaît dans la fonction d'écoute d'événement et dans la fonction objet :

Dans la fonction d'écoute d'événement :

func.prototype; // undefined

Dans le constructeur :

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

In In Dans cet exemple, si nous laissons la fonction Person.setName renvoyer l'objet Person lui-même, nous pouvons l'utiliser comme ceci :

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

Dans un objet :

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

Mais lorsque le flux d'exécution (comme en utilisant setTimeout ) et le changement de portée, cela changera également.

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

Lorsque la fonction setTimeout modifie le flux d'exécution, le point de celui-ci deviendra l'objet global, ou undefine en mode strict, donc dans la fonction setTimeout, nous utilisons d'autres variables pour pointer vers cet objet, comme self , que, bien sûr, quelles que soient les variables que vous utilisez, vous devez d'abord attribuer des valeurs à vous-même, avant l'accès à setTimeout, ou utiliser la méthode bind, sinon ces variables ne seront pas définies.

C'est le moment où la fonction flèche apparaît. Elle peut maintenir la portée et le pointage de celle-ci ne changera pas.

Regardons le premier exemple ci-dessus, ici nous utilisons la fonction flèche :

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

Analyse : Dans la fonction sayHi, nous utilisons la fonction flèche, et la portée actuelle est Dans une méthode de l'objet étudiant, la portée de la fonction temporaire générée par la fonction flèche est également la portée de la fonction sayHi de l'objet étudiant. Ainsi, même si nous appelons la fonction temporaire générée par la fonction flèche dans setTimeout, celle-ci est également pointée correctement dans cette fonction temporaire.

有趣和有用的使用

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

例如我们可以这么使用：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视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!