Quelle est la différence entre les fonctions normales JavaScript et les fonctions fléchées ?

Le contenu de cet article porte sur quelle est la différence entre les fonctions JavaScript normales et les fonctions fléchées ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

J'utilise souvent les fonctions fléchées, mais je n'ai pas une compréhension approfondie des fonctions fléchées. Voyons maintenant les différences entre ces deux fonctions

1 La fonction flèche elle-même a. pas de prototype (prototype) )

Puisque la fonction flèche n'a pas de prototype, la fonction flèche elle-même n'a pas ceci

let a = () => {}
console.log(a.prototype) // undefined
let b = function () {}
console.log(b.prototype) // Object

2 Le this de la fonction flèche pointe vers this hérité de. la première fonction ordinaire de la couche externe lorsqu'elle est définie.

let a;
let barObj = {
    msg: 'bar的this指向'
}
let fooObj = {
    msg: 'foo的this指向'
}
bar.call(barObj)
foo.call(fooObj) // { msg: 'bar的this指向'  }
bar.call(fooObj)
a() // { msg: 'foo的this指向' }

function foo() {
    a()
}
function bar () {
    a = () => {
        console.log(this)
    }
}

On peut conclure de l'exemple ci-dessus :

Cette fonction flèche pointe vers la première fonction ordinaire de la couche externe où il est défini, ce qui n'a rien à voir avec le lieu d'utilisation.

La fonction ordinaire héritée Lorsque le point this de la fonction change, le point this de la fonction flèche changera également.

Vous ne pouvez pas modifier directement le this de la fonction flèche

Vous pouvez modifier le pointeur this de la fonction ordinaire héritée, puis le this de la fonction flèche changera également en conséquence

3. Fonction flèche Utilisation d'arguments

let b = () => {
        console.log(arguments);
    }
    b(1,2,3,4) // arguments is not defined

    function bar () {
        console.log(arguments);  // 完成第二个普通函数
        bb('完成第一个普通函数')
        function bb() {
            console.log(arguments); // 完成第一个普通函数
            let a = () => {
                console.log(arguments); // 完成第一个普通函数
            }
            a('箭头函数')
        }
    }
    bar('完成第二个普通函数')

Les deux points suivants peuvent être tirés de ce qui précède

1. Lorsque la fonction flèche pointe vers la fenêtre, les arguments signaleront une erreur non définie
2. Si ce n'est pas une fenêtre, alors ce sont les arguments de la première fonction ordinaire dans la couche externe

4 La fonction flèche ne peut pas utiliser new

. Peu importe où pointe la fonction flèche, l'utilisation de new pour appeler la fonction flèche signalera une erreur, la fonction flèche n'a pas de constructeur

let a = () => {}
    let b = new a() // a is not a constructor

[Recommandations associées : Tutoriel vidéo JavaScript ]

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!