Comment utiliser les fonctions JavaScript ? Introduction aux propriétés et méthodes des fonctions JavaScript

Qu'est-ce que la fonction JavaScript ? Les fonctions en JavaScript sont en fait des objets, car chaque fonction est une instance du constructeur Function et possède les propriétés et méthodes définies par le constructeur Function. Examinons de plus près les propriétés et les méthodes des fonctions JavaScript.

Le nom de la fonction est en fait un pointeur vers l'objet fonction. Voir le code suivant :

    function sum(a,b) {
        return a + b;
    }
    // 相当于把sum的引用地址传递给sum2。
    // 注意：不带圆括号的函数名是访问函数指针，而非调用函数
    var sum2 = sum; 
    sum2(1,2) // 3
    sum = null;
    sum(2,3) // undefined // 将sum的内存回收，即sum的引用地址变了
    sum2(2,3) //5 // 但sum2 还是指向原来的内存地址

Le code ci-dessus peut illustrer le problème selon lequel le nom de la fonction est en fait un pointeur. à l'objet fonction. Après avoir compris les problèmes ci-dessus, nous pouvons effectuer l'analyse suivante :

1. Pas de surcharge

Après avoir compris ce qui précède, rechargez. Le chargement équivaut à re-modifier la valeur de référence de la variable de fonction, donc la précédente sera écrasée plus tard, ce qui est facile à comprendre.

2. Promotion de fonction

En fait, c'est similaire à la promotion de variable. C'est la différence entre les fonctions déclaratives et les fonctions définies par une expression. .C'est très simple

3. Fonction comme valeur

Parce que le nom de la fonction lui-même est une variable, il peut être transmis comme valeur. . Voici un bon exemple, c'est aussi une bonne idée de programmation, comme suit :

function getSomeFunction(fn,arg) {
    return fn(arg);
} 
function add(num) {
    return num + 10;
}
function getGreeting(name) {
    return `Hello ${name}`;
}
getSomeFunction(add,5) // 15
getSomeFunction(getGreeting,'andy') // Hello andy

Vous pouvez également renvoyer une autre fonction à partir d'une fonction. Par exemple, lorsque nous utilisons certaines méthodes de tri ou méthodes d'itération de tableaux, parce que ce qui est transmis est une variable de fonction en tant que paramètre, nous pouvons écrire ce paramètre en utilisant la méthode "fonction de retour de fonction externe". L'avantage est que. La fonction renvoyée peut transmettre les paramètres que nous « voulons spécifiquement spécifier » pour le calcul. Par exemple, le paramètre de la fonction de tri

// 规定利用哪个属性进行排序，如果不填则代表数组从大到小排序
function sortArgFuntion(compareProperty) { //compareProperty是上文中特定想要规定的参数

    return function (val1, val2) {
        if (compareProperty === undefined) {  // 如果排序的是数组的值，则用常规的方法
            if (val1 > val2) {
                return 1;
            } else if (val1 < val2) {
                return -1;
            } else {
                return 0;
            }
        } else {    // 如果排序的是对象的属性则用该方法
            if (val1[compareProperty] > val2[compareProperty]) {
                return 1;
            } else if (val1[compareProperty] < val2[compareProperty]) {
                return -1;
            } else {
                return 0;
            }
        }

    }
}
var data = [{
    name: 'andy',
    age: 25
}, {
    name: 'Nf',
    age: 29
}]
data.sort(sortArgFuntion('name'))

est une fonction utilisée pour réorganiser le tableau. Et lorsque nous supprimons les paramètres de la fonction, nous pouvons écrire cette fonction de manière plus intuitive et avec une plus grande réutilisabilité pour obtenir l'effet souhaité. Dans le même temps, vous devez étudier attentivement et comprendre l'essence et le caractère unique de la fonction de retour de fonction

Propriétés internes de la fonction

<.>Il y a deux propriétés spéciales à l'intérieur des variables de fonction

• arguments

• this

arguments

C'est un objet de type tableau. Qu'est-ce qu'un objet de type tableau ? L'accès de type tableau peut être effectué via des numéros de série (tels que obj[1]), et il existe un attribut de longueur (si vous ne définissez pas l'attribut de longueur de l'objet, il n'a pas de longueur uniquement dans les tableaux de classe). valeurs d'index et longueurs, et n'ont pas différentes méthodes de tableaux, donc si vous souhaitez appeler une méthode de tableau comme un tableau, vous devez utiliser

pour implémenter Array.prototype.method.call

this

c'est un point de connaissance très déroutant et compliqué en JavaScript. Ce qu'il représente dépend entièrement de l'emplacement appelant, je vais le résumer dans cet article mais je vais le lister. Par exemple :

window.color = 'red';
var o = {color:"blue"};
function sayColor() {
    console.log(this.color)
}
sayColor(); // red 因为调用位置是全局
o.sayColor = sayColor;
o.sayColor(); // blue 因为调用位置是o的对象里

À partir de l'exemple ci-dessus, nous devons savoir que le nom de la fonction n'est qu'un pointeur. Bien que l'environnement d'exécution soit différent, le global sayColor() et le o.sayColor() dans le fichier. la fonction pointe vers le même Une fonction

appelant

est nouvellement ajoutée dans es5. Elle renvoie l'environnement d'appel de la fonction actuelle (doit être une fonction, pas un objet. ). Si l’environnement appelant est global, il renvoie null. Il y a deux utilisations, l'une est le nom de la fonction plus l'appelant, l'autre est arguments.callee.caller

    function outer() {
        console.log(outer.caller); //null
        inner();
    };
    function inner() {
        console.log(inner.caller); // outer里的代码
    }

5. Attributs et méthodes de la fonctionParce que les fonctions sont également des objets, elles ont également des propriétés et des méthodes ; il y a deux propriétés dans la fonction : la longueur et le prototype. La longueur fait référence au nombre de paramètres passés dans

function add(num1,num2) {}  console.log(add.length) // 2.

propertype

Pour les types de référence, propertytype est l'endroit réel où toutes les méthodes d'instance sont enregistrées.

Lors de la création de types de référence personnalisés et de la mise en œuvre de l'héritage, son rôle et sa clé (combien de points clés ne sont pas encore compris, en particulier le mot héritage :))

Dans es5, le type de propriété n'est pas énumérable, il ne peut donc pas être parcouru .

apply() et call()

Deux paramètres, le premier paramètre est la portée dans laquelle exécuter, et le deuxième paramètre apply est le tableau entrant ou le objets arguments, l'appel passe dans chaque valeur et le reste est exactement le même. C'est l'un des exemples pour illustrer le rôle de apply et call :

Si nous n'utilisons pas call, nous devons faire ceci :

    var color = "red";
    var o = {color:"blue"};
    function sayColor() {
        alert(this.color)
    }
    sayColor(); // red
    sayColor.call(this); // red 
    sayColor.call(window); // red
    sayColor.call(o); // blue

Donc la comparaison peut être vu d'un coup d'œil. L'appel maximum est La fonction est de réaliser le découplage des objets et des méthodes

    var color = "red";
    var o = {color:"blue"};
    function sayColor() {
        alert(this.color)
    }
    o.sayColor = sayColor;
    o.sayColor(); //blue

la méthode bind

la méthode bind est utilisée pour construire une instance. d'une fonction, et son objet this pointe vers la portée spécifiée par bind .

Par exemple :

Articles connexes recommandés :

    var color = "red";
    var obj = {color:"blue"}
    function sayColor() {
        console.log(this.color);
    }
    var bindSayColor = sayColor.bind(obj);
    bindSayColor(); // blue

fonction javascript

Javascript ordinaire function La différence entre les constructeurs

Explication détaillée de la déclaration et de l'appel de fonction en 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!