Vertieftes Verständnis der JavaScript-Funktionsparameter und -Abschlüsse

Ich habe kürzlich JavaScript-Funktionen gelernt. Funktionen sind die erstklassigen Objekte von JavaScript. Wenn Sie JavaScript gut lernen möchten, müssen Sie über ein tiefes Verständnis von Funktionen verfügen. Ich habe den Lernprozess in Artikeln organisiert, erstens, um mein Verständnis meiner eigenen Funktionen zu vertiefen, und zweitens, um den Lesern Möglichkeiten zum Lernen zu bieten und Umwege zu vermeiden. Es gibt viel Inhalt, aber es handelt sich um eine Zusammenfassung der Funktionen des Autors.

1. Funktionsparameter

1.1: Was sind Parameter

1.2: Weglassen von Parametern

1.3: Standardparameterwerte

1.4: Parameterübergabemethode

1.5: Parameter mit demselben Namen

1.6: Argumentobjekt

2. Abschluss

2.1: Abschlussdefinition

　2.2: Sofort aufgerufener Funktionsausdruck (IIFE, Sofort aufgerufener Funktionsausdruck)

1. Funktionsparameter

1.1: Was sind die Parameter

Beim Definieren einer Funktion Manchmal ist es notwendig, zusätzliche Daten an eine Funktion zu übergeben. Diese externen Daten werden als Parameter bezeichnet.

function keith(a){
return a+a;
}
console.log(keith(3)); //6

Im obigen Code wird der Parameter a an die Keith-Funktion übergeben und der Ausdruck a+a zurückgegeben.

1.2: Weglassen von Parametern

Funktionsparameter sind nicht erforderlich und die JavaScript-Spezifikation erlaubt das Weglassen der tatsächlichen Parameter, die beim Aufruf übergeben werden.

function keith(a, b, c) {
return a;
}
console.log(keith(1, 2, 3)); //1
console.log(keith(1)); //1
console.log(keith()); // 'undefined'

Im obigen Code definiert die Keith-Funktion drei Parameter, aber egal wie viele Parameter beim Aufruf übergeben werden, JavaScript meldet keinen Fehler. Der Standardwert ausgelassener Parameter wird undefiniert. Jeder, der Funktionsdefinitionen und Funktionsumfang versteht, weiß, dass das Längenattribut einer Funktion die Anzahl der Parameter zurückgibt. Es ist zu beachten, dass das Längenattribut nichts mit der Anzahl der tatsächlichen Parameter zu tun hat, sondern nur die Anzahl der formalen Parameter zurückgibt.

(Aktuelle Parameter: Parameter, die beim Aufruf übergeben werden. Formale Parameter: Parameter, die beim Definieren übergeben werden.)

Aber es gibt keine Möglichkeit, nur die vorderen Elemente wegzulassen und die hinteren Elemente beizubehalten. Wenn das vordere Element weggelassen werden muss, wird nur undefiniert angezeigt.

function keith(a, b) {
return a;
}
console.log(keith(, 1)); //SyntaxError: expected expression, got ','
console.log(keith(undefined, 2)); //'undefined'

Wenn im obigen Code der erste Parameter weggelassen wird, meldet der Browser einen Fehler. Wenn undefiniert als erster Parameter übergeben wird, wird kein Fehler gemeldet.

1.3: Standardwert

In JavaScript ist der Standardwert von Funktionsparametern undefiniert. Es gibt jedoch Situationen, in denen es sinnvoll ist, andere Standardwerte festzulegen. Die allgemeine Strategie besteht darin, im Hauptteil der Funktion zu testen, ob der Parameterwert undefiniert ist, wenn ja, einen Wert zuzuweisen und, wenn nicht, den Wert des tatsächlich übergebenen Parameters zurückzugeben.

function keith(a, b) {
(typeof b !== 'undefined') ? b = b: b = 1;
return a * b;
}
console.log(keith(15)); //15
console.log(keith(15, 2)) //30

Im obigen Code wird eine Beurteilung vorgenommen. Wenn der b-Parameter beim Aufruf nicht übergeben wird, ist der Standardwert 1.

Ab ECMAScript 6 werden Standardparameter definiert. Mit Standardparametern sind keine Überprüfungen im Funktionskörper mehr erforderlich.

function keith(a, b = 1) {
return a * b;
}
console.log(keith(15)); //15
console.log(keith(15, 2)) //30

1.4: Parameterübergabemethode

Es gibt zwei Möglichkeiten, Funktionsparameter zu übergeben: eine übergibt den Wert und die andere übergibt die Adresse.

Wenn der Funktionsparameter ein primitiver Datentyp ist (Zeichenfolge, numerischer Wert, boolescher Wert), erfolgt die Parameterübergabe nach Wert. Mit anderen Worten: Das Ändern von Parameterwerten innerhalb des Funktionskörpers hat keine Auswirkungen auf die Außenseite der Funktion.

var a = 1;
function keith(num) {
num = 5;
}
keith(a);
console.log(a); //1

Im obigen Code ist die globale Variable a ein primitiver Typwert, und die Funktion keith wird über den Wert übergeben. Daher ist der Wert von a innerhalb der Funktion eine Kopie des Originalwerts, und unabhängig davon, wie er geändert wird, hat er keinen Einfluss auf den Originalwert.

Wenn der Funktionsparameter jedoch ein zusammengesetzter Typwert (Array, Objekt, andere Funktion) ist, wird die Übermittlungsmethode als Referenz übergeben. Mit anderen Worten: Was an die Funktion übergeben wird, ist die Adresse des ursprünglichen Werts. Wenn Sie also die Parameter innerhalb der Funktion ändern, wirkt sich dies auf den ursprünglichen Wert aus.

var arr = [2, 5];
function keith(Arr) {
Arr[0] = 3;
}
keith(arr);
console.log(arr[0]); //3

Im obigen Code wird an die Funktion keith die Adresse des Parameterobjekts arr übergeben. Daher wirkt sich eine Änderung des ersten Werts von arr innerhalb der Funktion auf den ursprünglichen Wert aus.

Beachten Sie, dass der ursprüngliche Wert nicht beeinträchtigt wird, wenn das, was innerhalb der Funktion geändert wird, kein bestimmtes Attribut des Parameterobjekts ist, sondern den gesamten Parameter ersetzt.

var arr = [2, 3, 5];
function keith(Arr) {
Arr = [1, 2, 3];
}
keith(arr);
console.log(arr); // [2,3,5]

Im obigen Code wird innerhalb der Funktion keith das Parameterobjekt arr vollständig durch einen anderen Wert ersetzt. Der ursprüngliche Wert wird zu diesem Zeitpunkt nicht beeinflusst. Dies liegt daran, dass zwischen dem formalen Parameter (Arr) und dem tatsächlichen Parameter arr eine Zuweisungsbeziehung besteht.

1.5: Parameter mit demselben Namen

Wenn ein Parameter mit demselben Namen vorhanden ist, wird der zuletzt angezeigte Wert übernommen. Wenn der Wert des letzten Parameters nicht angegeben ist, wird der Wert übernommen wird undefiniert.

function keith(a, a) {
return a;
}
console.log(keith(1, 3)); //3
console.log(keith(1)); //undefined

Wenn Sie auf den ersten Parameter im gleichnamigen Parameter zugreifen möchten, verwenden Sie das Argumentobjekt.

function keith(a, a) {
return arguments[0];
}
console.log(keith(2));　　//2

1.6 Argumente Objekt

Jede Funktion in JavaScript kann auf spezielle Variablenargumente zugreifen. Diese Variable verwaltet die Liste aller an diese Funktion übergebenen Parameter.

Das arguments-Objekt enthält alle Parameter, wenn die Funktion ausgeführt wird. arguments[0] ist der erste Parameter, arguments[1] ist der zweite Parameter und so weiter. Dieses Objekt kann nur innerhalb des Funktionskörpers verwendet werden.

Sie können auf das Längenattribut des Argumentobjekts zugreifen, um zu bestimmen, wie viele Parameter im Funktionsaufruf enthalten sind.

function keith(a, b, c) {
console.log(arguments[0]); //1
console.log(arguments[2]); //3
console.log(arguments.length); //4
}
keith(1, 2, 3, 4);

Die Beziehung zwischen Argumentobjekten und Arrays

arguments 对象不是一个数组（Array）。 尽管在语法上它有数组相关的属性 length，但它不从 Array.prototype 继承，实际上它是一个类数组对象。因此，无法对 arguments 变量使用标准的数组方法，比如 push, pop 或者 slice。但是可以使用数组中的length属性。

通常使用如下方法把arguments对象转换为数组。

var arr = Array.prototype.slice.call(arguments);

2.闭包

2.1：闭包定义

要理解闭包，需要先理解全局作用域和局部作用域的区别。函数内部可以访问全局作用域下定义的全局变量，而函数外部却无法访问到函数内部定义(局部作用域)的局部变量。

var a = 1;
function keith() {
 return a;
 var b = 2;
 }
 console.log(keith()); //1
 console.log(b); //ReferenceError: b is not defined

上面代码中，全局变量a可以在函数keith内部访问。可是局部变量b却无法在函数外部访问。

如果需要得到函数内部的局部变量，只有通过在函数的内部，再定义一个函数。

function keith(){
var a=1;
function rascal(){
return a;
}
return rascal;
}
var result=keith();
console.log(result()); //1
function keith(){
var a=1;
return function(){
return a;
};
}
var result=keith();
console.log(result()) //1

上面代码中，两种写法相同，唯一的区别是内部函数是否是匿名函数。函数rascal就在函数keith内部，这时keith内部的所有局部变量，对rascal都是可见的。但是反过来就不行，rascal内部的局部变量，对keith就是不可见的。这就是JavaScript语言特有的”链式作用域”结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。函数keith的返回值就是函数rascal，由于rascal可以读取keith的内部变量，所以就可以在外部获得keith的内部变量了。

闭包就是函数rascal，即能够读取其他函数内部变量的函数。由于在JavaScript语言中，只有函数内部的子函数才能读取内部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包最大的特点，就是它可以“记住”诞生的环境，比如rascal记住了它诞生的环境keith，所以从rascal可以得到keith的内部变量。

闭包可以使得它诞生环境一直存在。看下面一个例子，闭包使得内部变量记住上一次调用时的运算结果。

function keith(num) {
return function() {
return num++;
};
}
var result = keith(2);
console.log(result()) //2
console.log(result()) //3
console.log(result()) //4

上面代码中，参数num其实就相当于函数keith内部定义的局部变量。通过闭包，num的状态被保留了，每一次调用都是在上一次调用的基础上进行计算。从中可以看到，闭包result使得函数keith的内部环境，一直存在。

通过以上的例子，总结一下闭包的特点：

1：在一个函数内部定义另外一个函数，并且返回内部函数或者立即执行内部函数。

2：内部函数可以读取外部函数定义的局部变量

3：让局部变量始终保存在内存中。也就是说，闭包可以使得它诞生环境一直存在。

闭包的另一个用处，是封装对象的私有属性和私有方法。

function Keith(name) {
var age;
function setAge(n) {
age = n;
}
function getAge() {
return age;
}
return {
name: name,
setAge: setAge,
getAge: getAge
};
}
var person = Keith('keith');
person.setAge(21);
console.log(person.name); // 'keith'
console.log(person.getAge()); //21

   

2.2：立即调用的函数表达式（IIFE）

通常情况下，只对匿名函数使用这种“立即执行的函数表达式”。它的目的有两个：一是不必为函数命名，避免了污染全局变量；二是IIFE内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

循环中的闭包

一个常见的错误出现在循环中使用闭包，假设我们需要在每次循环中调用循环序号

for(var i=0;i<10;i++){
setTimeout(function(){
console.log(i); //10
}, 1000)
}

上面代码中，不会符合我们的预期，输出数字0-9。而是会输出数字10十次。

当匿名函数被调用的时候，匿名函数保持着对全局变量 i 的引用，也就是说会记住i循环时执行的结果。此时for循环结束，i 的值被修改成了10。

为了得到想要的效果，避免引用错误，我们应该使用IIFE来在每次循环中创建全局变量 i 的拷贝。

for(var i = 0; i < 10; i++) {
 (function(e) {
 setTimeout(function() {
 console.log(e); //1,2,3,....,10
 }, 1000);
 })(i);
 }

外部的匿名函数会立即执行，并把 i 作为它的参数，此时函数内 e 变量就拥有了 i 的一个拷贝。当传递给 setTimeout 的匿名函数执行时，它就拥有了对 e 的引用，而这个值是不会被循环改变的。