Quelles sont les caractéristiques des fonctions fléchées es6 ?

ES6 Les caractéristiques de la fonction flèche sont : 1. La fonction flèche n'a pas d'objet arguments ; 2. La valeur this de la fonction flèche dépend de la valeur this de la fonction non-flèche en dehors de la fonction, et la fonction flèche ne peut pas changez le point de ceci : 3. La fonction flèche ne peut pas utiliser une nouvelle déclaration de mot-clé ; 4. Les fonctions flèche n'ont pas d'attribut prototype ;

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

La norme ES6 ajoute une nouvelle fonction : Arrow Function.

Pourquoi s'appelle-t-on Fonction Flèche ? Parce que sa définition utilise une flèche :

x => x * x

La fonction flèche ci-dessus est équivalente à :

function (x) {    
return x * x;
}

La fonction flèche est équivalente à une fonction anonyme et simplifie la définition de la fonction. Il existe deux formats de fonctions fléchées. L'un est comme celui ci-dessus, qui ne contient qu'une seule expression, et même {...} et return sont omis. Il existe également une méthode qui peut contenir plusieurs instructions. Dans ce cas, { ... } et return ne peuvent pas être omis :

x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}

Si le paramètre n'en est pas un, vous devez le mettre entre parenthèses () :

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

If vous souhaitez retourner un objet, vous devez noter que s'il s'agit d'une expression unique, une erreur sera signalée si vous l'écrivez comme ceci :

// SyntaxError:
x => { foo: x }

Parce qu'il y a un conflit syntaxique avec {...} dans le corps de la fonction, il doit être remplacé par :

// ok:
x => ({ foo: x })

es6 Caractéristiques des fonctions fléchées

1. La fonction flèche n'a pas d'arguments

let test1 = () => {
    console.log(arguments)
}
test1(123) // arguments is not defined

La fonction flèche ne recherchera que la fonction externe non-flèche lors de la recherche pour l'objet arguments. Si la couche externe est une fonction non-flèche, elle s'interrompra et reviendra si elle n'a pas l'objet arguments. Nous rechercherons la couche externe

function test2(a, b, c){
    return () => {
    console.log(arguments) // [1]
    }
}
test2(1)()

2. fonction

La valeur this de la fonction flèche dépend de la valeur this de la fonction non-flèche en dehors de la fonction. Si la couche supérieure est toujours une fonction flèche, continuez à rechercher, si elle n'est pas trouvée, alors c'est ceci. l'objet fenêtre

let person = {
    test: () => {
        console.log(this)
    },
    fn(){
        return () => {
            console.log(this)
        }
    }
}
person.test()  // window
person.fn()()  // person对象

La fonction flèche ne peut pas changer le point de ceci

let person = {}
let test = () => console.log(this)
test.bind(person)()
test.call(person)
test.apply(person)

Lors de la pré-compilation, cela a été déterminé.

3. Les fonctions fléchées ne peuvent pas être déclarées avec le nouveau mot-clé

let test = () => {}
new test() // Uncaught TypeError: test is not a constructor

4. Les fonctions fléchées n'ont pas d'attributs de prototype

Toutes les fonctions en JavaScript ont-elles des attributs de prototype ?

let test = () => {}
test.prototype // undefined
test.__proto__ === Function.prototype // true

Les fonctions fléchées ne peuvent pas renommer les paramètres

// 箭头函数不能重复命名参数
let bbb = (b, b, b) => {
} 
// Uncaught SyntaxError: Duplicate parameter name not allowed in this context
let bb = function(b, b, b){
}
// es5 不会报错

[Recommandations associées : Tutoriel vidéo javascript, front-end web]

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!