Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée des exemples d'utilisation d'appel de fonction JavaScript et de passage de paramètres

伊谢尔伦
Libérer: 2017-07-26 17:30:51
original
4209 Les gens l'ont consulté

Appel de fonction JavaScript

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

Passer des paramètres par valeur
Les paramètres appelés dans une fonction sont les paramètres de la fonction. Si une fonction modifie la valeur d'un paramètre, elle ne modifiera pas la valeur initiale du paramètre (définie en dehors de la fonction). Les modifications apportées aux paramètres de la fonction n'affecteront pas les variables extérieures à la fonction (variables locales).
Passer des paramètres à travers des objets
En JavaScript, vous pouvez référencer la valeur d'un objet. Par conséquent, lorsque nous modifions les propriétés de l’objet à l’intérieur de la fonction, sa valeur initiale sera modifiée. La modification des propriétés d'un objet peut agir en dehors de la fonction (variables globales).

ce mot-clé

De manière générale, en Javascript, cela pointe vers l'objet courant lorsque la fonction est exécutée. Remarque Notez qu'il s'agit d'un mot-clé réservé, vous ne pouvez pas en modifier la valeur.

Appeler une fonction JavaScript

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 pas à n'importe quel 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, la fonction appartient donc à 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() et window.myFunction() sont identiques :


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

Remarque Il s'agit d'une manière courante d'appeler des fonctions JavaScript, mais ce n'est pas une de bonnes pratiques de programmation, méthodes ou fonctions 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 :


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

Notez que l'appel de la fonction en tant qu'objet global fera de la valeur de this un objet global. L'utilisation de l'objet window comme variable peut facilement provoquer le crash du programme.

Fonctions appelées comme méthodes

En JavaScript, vous pouvez définir des fonctions comme méthodes d'objets. L'exemple suivant crée un objet (myObject) avec deux propriétés (firstName et lastName) et une méthode (fullName) :


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

fullName Une méthode 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 :


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

Remarque Lorsque la fonction est appelée en tant que méthode objet, la valeur de this deviendra 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é. On dirait qu'une nouvelle fonction est créée, mais en fait les fonctions JavaScript sont des objets recréés :


// 构造函数:
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;               // 返回 "John"
Copier après la connexion

Appel du constructeur Un nouvel objet sera créé . Le nouvel objet hérite des propriétés et méthodes du constructeur. Remarque Le mot clé this dans le constructeur n'a aucune valeur. La valeur de this est créée lorsque l'objet (nouvel objet) est instancié lorsque la fonction est appelée.

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.


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

Instance


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

Les deux méthodes utilisent les objets eux-mêmes 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 JavaScript strict, le premier paramètre deviendra la valeur de this 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.
Remarque Grâce à la méthode call() ou apply(), vous pouvez définir la valeur de this et l'appeler comme une nouvelle méthode d'un objet existant.

Paramètres des fonctions JavaScript

Les fonctions JavaScript n'effectuent aucune vérification sur les valeurs des paramètres (arguments). Paramètres explicites de la fonction et paramètres cachés (arguments)Dans le tutoriel précédent, nous avons découvert les paramètres explicites de la fonction :


functionName(parameter1, parameter2, parameter3) {
  code to be executed
}
Copier après la connexion

Les paramètres de fonction explicites sont répertoriés lorsque la fonction est définie. Les paramètres cachés (arguments) de la fonction sont les valeurs réelles transmises à la fonction lorsque la fonction est appelée.

参数规则
JavaScript 函数定义时参数没有指定数据类型。
JavaScript 函数对隐藏参数(arguments)没有进行检测。
JavaScript 函数对隐藏参数(arguments)的个数没有进行检测。
默认参数
如果函数在调用时缺少参数,参数会默认设置为: undefined

有时这是可以接受的,但是建议最好为参数设置一个默认值:


function myFunction(x, y) {
  if (y === undefined) {
     y = 0;
  } 
}
Copier après la connexion

或者,更简单的方式:


function myFunction(x, y) {
  y = y || 0;
}
Copier après la connexion

Note 如果y已经定义 , y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。如果函数调用时设置了过多的参数,参数将无法被引用,因为无法找到对应的参数名。 只能使用 arguments 对象来调用。

Arguments 对象
JavaScript 函数有个内置的对象 arguments 对象.argument 对象包含了函数调用的参数数组。通过这种方式你可以很方便的找到最后一个参数的值:


x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
  var i, max = 0;
  for (i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}
Copier après la connexion

或者创建一个函数用来统计所有数值的和:


x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
  var i, sum = 0;
  for (i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}
Copier après la connexion

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