JavaScript 関数のパラメータとクロージャについての深い理解

私は最近 JavaScript 関数を学習しています。関数は JavaScript の最上級のオブジェクトです。JavaScript をよく学びたい場合は、関数について深く理解する必要があります。学習プロセスを記事にまとめたのは、第一に自分自身の役割についての理解を深め、第二に、学習方法を学び、寄り道を避ける方法を読者に提供するためでした。内容は盛り沢山ですが、作者による機能のまとめです。

1. 関数のパラメータ

1.1: パラメータとは

1.2: パラメータの省略

1.4: パラメータの渡し方

1.5: 同名のパラメータ

1.6: 引数オブジェクト

2. クロージャ

2.1: クロージャ定義

2.2: 即時呼び出し関数式(IIFE、即時呼び出し関数式)

1. 関数パラメータ

1.1: パラメータとは

関数を定義する際に、追加データが必要になることがあります。異なる外部データは異なる結果を生成します。この外部データはパラメータと呼ばれます。

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

上記のコードでは、パラメーター a が keith 関数に渡され、a+a 式が返されます。

1.2: パラメータの省略

関数のパラメータは必須ではありません。JavaScript の仕様では、呼び出し時に渡される実際のパラメータを省略できます。

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

上記のコードでは、keith 関数は 3 つのパラメーターを定義していますが、呼び出し時にどれだけ多くのパラメーターが渡されても、JavaScript はエラーを報告しません。省略されたパラメータのデフォルト値は不定となります。関数定義と関数スコープを理解している人なら誰でも、関数の長さ属性がパラメーターの数を返すことを知っています。 length 属性は実際のパラメータの数とは関係がなく、仮パラメータの数のみを返すことに注意してください。

(実パラメータ: 呼び出し時に渡されるパラメータ。仮パラメータ: 定義時に渡されるパラメータ。)

しかし、前の要素だけを省略して後ろの要素を保持する方法はありません。先頭要素を省略する必要がある場合は、未定義のみが表示されます。

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

上記のコードでは、最初のパラメータが省略されている場合、ブラウザはエラーを報告します。 undefine が最初のパラメータとして渡された場合、エラーは報告されません。

1.3: デフォルト値

JavaScriptでは、関数パラメータのデフォルト値は未定義です。ただし、異なるデフォルト値を設定すると便利な状況もあります。一般的な戦略は、パラメーター値が未定義かどうかを関数の本体でテストし、未定義の場合は値を割り当て、そうでない場合は、渡された実際のパラメーターの値を返すことです。

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

上記のコードでは判定が行われました。呼び出し時に b パラメータが渡されない場合、デフォルトは 1 です。

ECMAScript 6 以降、デフォルトのパラメーターが定義されています。デフォルトのパラメーターを使用すると、関数本体のチェックは必要なくなります。

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

1.4: パラメータの受け渡し方法

関数のパラメータを渡すには、値で渡す方法とアドレスで渡す方法の 2 つがあります。

関数パラメータがプリミティブデータ型(文字列、数値、ブール値)の場合、パラメータの受け渡し方法は値によるものです。つまり、関数本体内のパラメータ値を変更しても、関数の外部には影響しません。

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

上記のコードでは、グローバル変数 a はプリミティブ型の値であり、それを関数 keith に渡す方法は値渡しです。したがって、関数内では a の値は元の値のコピーであり、どのように変更しても元の値には影響しません。

ただし、関数のパラメータが複合型の値（配列、オブジェクト、その他の関数）の場合、転送メソッドは参照渡しとなります。つまり、関数に渡されるのは元の値のアドレスであるため、関数内のパラメータを変更すると元の値に影響します。

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

上記のコードでは、関数 keith に渡されるのはパラメータ オブジェクト arr のアドレスです。したがって、関数内で arr の最初の値を変更すると、元の値に影響します。

関数内で変更されたものがパラメータオブジェクトの特定の属性ではなく、パラメータ全体を置き換えた場合、元の値は影響を受けないことに注意してください。

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

上記のコードでは、関数 keith 内で、パラメーター オブジェクト arr が別の値に完全に置き換えられます。現時点では、元の値は影響を受けません。これは、仮パラメータ（Arr）と実パラメータarrの間に代入関係があるためです。

1.5: 同じ名前のパラメータ

同じ名前のパラメータがある場合、最後に出現する値が取得されます。最後のパラメータの値が指定されていない場合、値は不定になります。

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

同じ名前のパラメータの最初のパラメータにアクセスしたい場合は、arguments オブジェクトを使用します。

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

1.6 引数オブジェクト

JavaScript のすべての関数は、特別な変数引数にアクセスできます。この変数は、この関数に渡されるすべてのパラメータのリストを維持します。

arguments オブジェクトには、関数の実行時にすべてのパラメーターが含まれます。arguments[0] が最初のパラメーター、arguments[1] が 2 番目のパラメーターになります。このオブジェクトは関数本体内でのみ使用できます。

引数オブジェクトの長さ属性にアクセスして、関数の呼び出し時に取得されるパラメーターの数を決定できます。

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);

引数オブジェクトと配列の関係

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 的引用，而这个值是不会被循环改变的。