Explication détaillée des compétences JavaScript function_javascript

Une fonction est un ensemble d'instructions qui peuvent être exécutées à tout moment et n'importe où. Les fonctions sont très importantes en tant que noyau d'ECMAScript. Une fonction est un bloc de code événementiel ou réutilisable qui s’exécute lorsqu’il est appelé. Autrement dit, une fonction est un morceau de code JavaScript défini une fois mais qui peut être appelé ou exécuté autant de fois que vous le souhaitez. Les fonctions ont parfois des paramètres, qui sont des variables locales avec des valeurs attribuées lorsque la fonction est appelée. Les fonctions utilisent souvent ces paramètres pour calculer une valeur de retour, qui devient également la valeur de l'expression d'appel de fonction.
1. Déclaration de fonction
Les fonctions sont un concept central pour tout langage. N'importe quel nombre d'instructions peuvent être encapsulées via des fonctions, et elles peuvent être appelées et exécutées n'importe où et à tout moment. Les fonctions en JS sont déclarées à l'aide du mot-clé function, suivi d'un ensemble de paramètres et du corps de la fonction.
La syntaxe de base de la fonction est la suivante :

<span style="font-size:18px;">function functionName(arg0, arg1, ... argN) { 
 statements 
}</span> 

Il existe trois façons de déclarer des fonctions spécifiées par ECMAScript :
(1) Déclaration de fonction ordinaire

<span style="font-size:18px;">function box(num1,num2){ 
 return num1+num2; 
}</span>

(2) Utiliser l'initialisation de variable ou la déclaration de fonction

<span style="font-size:18px;">var box=function(num1,num2){ 
 return num1+num2; 
}</span> 

(3) Utilisez le constructeur de fonction pour déclarer

Copier le code Le code est le suivant :

5d922835f04e91b1cf1e9cad217a2ea6 vax box= new Function('num1','num2','num1 num2');54bdf357c58b8a65c66d7c19c8e4d114

2. Types de fonctions et appels de fonctions La syntaxe ECMAScript spécifie

(1) Fonction sans paramètres : Il n'y a aucun paramètre lorsque la fonction est déclarée, et vous pouvez l'utiliser directement lors de l'appel de la fonction.

function box(){ 
 document.write("我是中国人！"); 
} 
box();//函数调用 

Le résultat de l'opération est : je suis chinois !

(2) Fonction avec paramètres : Les variables de paramètres sont définies en même temps que la fonction est déclarée, et les paramètres peuvent être multiples.

function box(name,age) { 
 document.write("你的姓名是："+name+"你的年龄是："+age); 
} 
box("张三","24");//函数调用 

Le résultat de l'opération est : Votre nom est : Zhang San

Votre âge est : 24 ans

(3) Fonction avec valeur de retour Les fonctions avec et sans paramètres n'ont pas de valeur de retour définie, mais sont exécutées directement après avoir été appelées. En fait, n'importe quelle fonction peut réaliser la valeur de retour via l'instruction return suivie de la valeur à renvoyer.

1), fonction sans paramètres

function box(){ 
 return "我是中国人！"; 
} 
document.write(box()); 

Même résultat que ci-dessus : je suis chinois !

2), fonction avec paramètres

function box(name,age){ 
 return "你的姓名是："+name+"<br/>"+"你的年龄是："+age; 
} 
document.write(box("张三","24"));//函数调用 
document.write("<hr/>"); 
var demo=box("李四","23");//也可以重新赋值新的函数 
document.write(demo); 

Le résultat de la course à pied est :

(4) En fonction de la valeur (plus spécial)
Tout d’abord, regardons un exemple de fonction en tant que variable régulière :

function box(sum,num){ 
 return sum+num;//这里传递的是函数的返回值和普通的变量一样 
} 
function sum(num){ 
 return num+10; 
} 
var result=box(sum(10),10); 
document.write("result="+result); 

Le résultat de sortie de la page est : result=30

Ce qui est passé ci-dessous est une fonction, distinguez-la soigneusement de ce qui précède :

function box(sum,num){ 
 return sum(num);//这里传递的是函数 
} 
function sum(num){ 
 return num+10; 
} 
var result=box(sum,10); 
document.write("result="+result); 

Le résultat de sortie de la page est : result=20

3. Attributs internes des fonctions
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​? Il existe deux objets spéciaux : l'objet arguments et cet objet. L'objet arguments est un objet de type tableau qui contient tous les paramètres transmis à la fonction. Son objectif principal est de sauvegarder les paramètres de la fonction. L'attribut principal est la longueur. Cet attribut est utilisé pour déterminer dynamiquement le nombre de paramètres de la fonction. Mais cet objet possède également un attribut appelé appelé, qui est un pointeur vers la fonction propriétaire de l'objet arguments.

(1)L'attribut length de l'objet arguments
La fonction JS ne se soucie pas du nombre de paramètres transmis et ne provoquera pas d'erreurs dues à des paramètres incohérents. En fait, le corps de la fonction est accessible via l'objet arguments Recevez les paramètres transmis. ​​​​ Regardons d'abord un problème que l'on rencontre lors du passage de paramètres dans une fonction : quand la fonction est déclarée, on ne sait pas combien de paramètres définir, mais quand on appelle la fonction, il y en a trop
problèmes ou lacunes.

输出的结果为：1|2。因此输出的显然与我们想要做的不符，那么怎么解决呢？
有了arguments对象的length属性我们就能可以得到参数的数量，避免上面的错误出现。

function box(){ 
 return arguments.length; 
} 
document.write(box(1,2,3,4,5,6)); 

输出：6
       我们还可以利用length属性来智能的判断有多少参数，然后把参数进行合理的应用，比如，实现一个加法运算，将所有传进来的数字累加，而数字的个数又不确定。

function box(){ 
 var sum=0; 
 if(arguments.length==0) 
 { 
 return sum; 
 } 
 for(var i=0;i<arguments.length;i++) 
 { 
 sum=sum+arguments[i]; 
 } 
 return sum;//返回累加结果 
} 
document.write(box(1,2,3,4,5,6)); 

       输出：21
(2)arguments对象的callee属性
       还是来说问题：对于递归的问题我们很熟悉了，JS中也不例外

function box(num){ 
 if(num<=1) 
 { 
 return 1; 
 } 
 else 
 { 
 return num*box(num-1);//递归 
 } 
} 
document.write(box(4)); 

       输出：24
       对于阶乘函数一般要用到递归算法，所以函数内部一定对调用自身，如果函数名不改变是没有问题的，但一旦改变函数名，内部的自身调用需要逐一修改。为了解决这个问题，可以使用arguments.callee来代替。

function box(num){ 
 if(num<=1) 
 { 
 return 1; 
 } 
 else 
 { 
 return num*arguments.callee(num-1)//递归 
 } 
} 
document.write(box(4)); 

       输出：24
(3)this对象
       函数内部另一个特殊的对象时this，其行为与Java和C#中的this大致相似，换句话说，this引用的是函数据以行操作的对象，或者说函数调用语句所处的那个作用域。当在全局作用域中调用函数时，this对象引用的就是window(window是一个对象，是JavaScript中最大的对象，是最外围的对象)。

var color="红色";//这里的color是全局变量，并且这个变量是window的属性 
document.write(window.color+"<br/>"); 
document.write(this.color+"<br/>"); 
var box={ 
 color:"蓝色",//这里的color是box下的属性，是局部变量 
 sayColor:function(){ 
 return this.color;//此时的this只能是box中的color 
 } 
}; 
document.write(box.sayColor()+"<br/>");//局部的 
document.write(this.color);//全局的 

       运行的结果为：

四、函数属性和方法
(1)JavaScript中的函数是对象，因此函数也有属性和方法。每个函数都包含两个属性：length和prototype。其中，length属性表示函数希望接受的命名参数的个数。

function box(num1,num2){ 
 return num1+num2; 
} 
document.write(box.length); 

输出的结果;2
       对于prototype属性，它是保存所有实例方法的真正所在，也就是原型。这个属性我们先不做过多的介绍。prototype属性下有两个方法：apply()和call()，每个函数都包含这两个非继承而来的方法。这两个方法的用途都在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。

function box(num1,num2){ 
 return num1+num2; 
} 
function sayBox(num1,num2){ 
 return box.apply(this,[num1,num2]);//this表示作用域，这里是window，[]表示box所需的参数 
} 
function sayBox2(num1,num2){ 
 return box.apply(this,arguments);//arguments对象表示box所需的参数 
} 
document.write(sayBox(10,10)+"<br/>"); 
document.write(sayBox2(10,10)); 

       输出的结果为：20
                                20
(2)call()方法和apply()方法延伸
       call()方法和apply()方法相同，它们的区别仅仅在于接收参数的方式不同。对于call()方法而言，第一个参数作用域，没有变化，变化的只是其余参数都是直接传递给函数的。

function box(num1,num2){ 
 return num1+num2; 
} 
function callBox(num1,num2){ 
 return box.call(this,num1,num2);//区别apply()方法 
} 
document.write(callBox(10,10)); 

       输出的结果为：20
       call()方法和apply()方法真正的作用是扩展函数赖以运行的作用域

var color="红色";//全局变量 
var box={ 
 color:"蓝色",//局部变量 
}; 
function sayColor(){ 
 return this.color; 
} 
document.write(sayColor()+"<br/>");//作用域在Window 
document.write(sayColor.call(this)+"<br/>");//作用域在Window下 
document.write(sayColor.call(window)+"<br/>");//作用域在Window下 
document.write(sayColor.call(box));//作用域在box下，对象冒充 

        输出的结果为：

       使用call()方法或者apply()方法来扩充作用域的最大好处就是对象不需要与方法发生任何耦合关系。也就是说，box对象和sayColor()方法之间不会有多余的关联操作，比如；box.sayColor=sayColor;
五、ECMAScript闭包
       ECMAScrip最易让人误解的一点是，它支持闭包。闭包，指的是词法表示包括不被计算的变量的函数，就是说，函数可以使用函数之外定义的变量。
       其实我在前面的博文已经使用到了闭包，比如在轻松学习JavaScript七：JavaScript的流程控制语句中使用的变量time就是全局变量，函数myFunction()使用这个全局变量，并不是函数本身定义的。还是看一下那个实例吧：

var time=new Date().getHours(); 
document.write("当前北京时间："+time); 
function myFunction() 
{ 
 var x=""; 
 if (time<20) 
 { 
 x="Good day"; 
 } 
 document.getElementById("demo").innerHTML=x; 
} 

(1)简单的闭包实例
       在ECMAScript中使用全局变量是一个简单的闭包实例。请思考下面这段代码输出的结果是什么：

var sMessage = "hello world"; 
function sayHelloWorld() { 
 document.write(sMessage); 
} 
sayHelloWorld(); 

       在上面这段代码中，脚本被载入内存后，并没有为函数sayHelloWorld()计算变量sMessage的值。该数捕 sMessage的值只是为了以后的使用，也就是说，解释程序知道在调用该函数时要检查sMessage的值。sMessage将在函数调用sayHelloWorld()是在(最后一行)被赋值，显示消息"hello world"。
(2)复杂的闭包实例
       在一个函数中定义另一个会使闭包变得更加复杂。例如：

var iBaseNum = 10;//全局变量 
function addNum(iNum1, iNum2) { 
 function doAdd() { 
 return iNum1 + iNum2 + iBaseNum; 
 } 
 return doAdd(); 
} 
document.write(addNum(10,10)); 

       这里，函数addNum()包括函数doAdd()(闭包)。内部函数是一个闭包，因为它将获取外部函数的参iNum1和iNum2以及全局变量iBaseNum的值。 addNum()的最后一步调用了doAdd()，把两个参数和全局变量相加，并返回它们的和。这里要掌握的重要概念是，doAdd()函数根本不接受参数，它使用的值是从执行环境中获取的，因此输出的结果为：30。
        可以看到，闭包是 ECMAScript 中非常强大多用的一部分，可用于执行复杂的计算。就像使用任何高级函数一样，使用闭包要小心，因为它们可能会变得非常复杂。

以上就是本文的全部内容，希望对大家的学习有所帮助。