Maison > interface Web > js tutoriel > Connaissance et application des appels de fonctions JavaScript

Connaissance et application des appels de fonctions JavaScript

jacklove
Libérer: 2018-05-07 11:04:21
original
1600 Les gens l'ont consulté

Les appels de fonctions JavaScript jouent un rôle important dans js. Cet article en fournit une compréhension détaillée.

Il existe 4 façons d'appeler des fonctions JavaScript.

La différence entre chaque méthode réside dans l'initialisation de celle-ci.

ce mot-clé

De manière générale, en Javascript, cela pointe vers l'objet courant lorsque la fonction est exécutée.

Notez qu'il s'agit d'un mot-clé réservé, vous ne pouvez pas en modifier la valeur.

Appel de fonctions JavaScript

Dans les chapitres précédents, nous avons appris à créer des fonctions.

Le code de la fonction est exécuté après l'appel de la fonction.

En tant qu'appel de fonction

instance

function myFunction(a, b) {
    return a * b;}myFunction(10, 2);           // myFunction(10, 2) 返回 20
Copier après la connexion

La fonction ci-dessus n'appartient à aucun objet. Mais en JavaScript, c'est toujours l'objet global par défaut.

L'objet global par défaut en HTML est la page HTML elle-même, donc la fonction appartient à la page HTML.

L'objet page dans le navigateur est la fenêtre du navigateur (objet fenêtre). Les fonctions ci-dessus deviendront automatiquement des fonctions de l'objet window.

myFunction() est identique à window.myFunction() :

Instance

function myFunction(a, b) {
    return a * b;}window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20
Copier après la connexion

C'est le call Méthodes couramment utilisées dans les fonctions JavaScript, mais pas de bonnes pratiques de programmation
Les variables, méthodes ou fonctions globales peuvent facilement provoquer des bogues de conflit de noms.

Objet global

Lorsque la fonction n'est pas appelée par son propre objet, la valeur de celui-ci deviendra l'objet global.

Dans un navigateur Web, l'objet global est la fenêtre du navigateur (objet window).

La valeur de this renvoyée par cette instance est l'objet window :

Instance

function myFunction() {
    return this;}myFunction();                // 返回 window 对象
Copier après la connexion

La fonction est appelé comme un objet global, fera de la valeur de ceci un objet global.
L'utilisation de l'objet window comme variable peut facilement provoquer le crash du programme.

Fonction comme appel de méthode

En JavaScript, vous pouvez définir des fonctions comme méthodes d'objets.

L'exemple suivant crée un objet (myObject), qui possède deux propriétés (firstName et lastName) et une méthode (fullName) :

Instance

var myObject = {
    firstName:"John",    lastName: "Doe",    fullName: function () {
        return this.firstName + " " + this.lastName;    }}myObject.fullName();         // 返回 "John Doe"
Copier après la connexion

Le La méthode fullName est une fonction. Les fonctions appartiennent aux objets. myObject est le propriétaire de la fonction.

Cet objet contient du code JavaScript. La valeur de this dans l'instance est l'objet myObject.

Test ci-dessous ! Modifiez la méthode fullName et renvoyez cette valeur :

Instance

var myObject = {
    firstName:"John",    lastName: "Doe",    fullName: function () {
        return this;    }}myObject.fullName();          // 返回 [object Object] (所有者对象)
Copier après la connexion

La fonction est appelée comme méthode objet, ce qui rendra la la valeur de ceci devient l'objet lui-même.

Utilisez le constructeur pour appeler la fonction

Si le mot-clé new est utilisé avant l'appel de la fonction, le constructeur est appelé.

Cela ressemble à une nouvelle fonction créée, mais en fait les fonctions JavaScript sont des objets recréés :

Instance

// 构造函数:function myFunction(arg1, arg2) {
    this.firstName = arg1;    this.lastName  = arg2;}
 // This    creates a new objectvar x = new myFunction("John","Doe");x.firstName;                             // 返回 "John"
Copier après la connexion

Un appel au constructeur crée un nouvel objet. Le nouvel objet hérite des propriétés et méthodes du constructeur.

Le mot clé this dans le constructeur n'a aucune valeur.
La valeur de this est créée lorsque la fonction est appelée pour instancier l'objet (nouvel objet).

Appel d'une fonction en tant que méthode de fonction

En JavaScript, les fonctions sont des objets. Une fonction JavaScript a ses propriétés et ses méthodes.

call() et apply() sont des méthodes de fonction prédéfinies. Deux méthodes peuvent être utilisées pour appeler des fonctions, et le premier paramètre des deux méthodes doit être l'objet lui-même.

Instance

function myFunction(a, b) {
    return a * b;}myObject = myFunction.call(myObject, 10, 2);     // 返回 20
Copier après la connexion

Instance

function myFunction(a, b) {
    return a * b;}myArray = [10, 2];myObject = myFunction.apply(myObject, myArray);  // 返回 20
Copier après la connexion

Les deux méthodes utilisent l'objet lui-même comme premier paramètre. La différence entre les deux réside dans le deuxième paramètre : appliquer les passes dans un tableau de paramètres, c'est-à-dire que plusieurs paramètres sont combinés dans un tableau et transmis, tandis que call est transmis en tant que paramètre d'appel (à partir du deuxième paramètre).

En mode strict JavaScript (mode strict), le premier paramètre deviendra la valeur de ceci lors de l'appel de la fonction, même si le paramètre n'est pas un objet.

En mode JavaScript non strict, si la valeur du premier paramètre est nulle ou indéfinie, il utilisera à la place l'objet global.

Cet article fournit une explication détaillée des appels de fonction JavaScript. Pour plus de matériel d'apprentissage, veuillez faire attention au site Web php chinois.

Recommandations associées :

Comprendre et utiliser les événements de synchronisation JavaScript

Comprendre les fermetures JavaScript et utiliser

Connaissances et utilisation liées à JavaScript Date (date)

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal