JavaScript.The.Good.Parts 読書メモ (2) 範囲と閉鎖と地球規模の宇宙汚染の軽減_JavaScript スキル

たとえば、コード ブロック

コードをコピーします コードは次のとおりです。

if (true) {
int i = 100;
}
print(i); //エラー、変数 i が宣言されていません

上記の例に示すように、コード外の関数ですブロックは i 変数にアクセスできません。
しかし、JavaScript では状況がまったく異なります。

コードをコピー コードは次のとおりです。

if (true) {
var i = 100 ;
}
alert(i); //ボックスをポップアップして 100 を表示します

多くの現代言語では変数をできるだけ遅く宣言することが推奨されていますが、JavaScript ではこれは最悪の提案です。ブロックレベルのスコープがないため、関数で使用されるすべての変数を関数本体の先頭で宣言することが最善です。


クロージャ機能:
ブロックレベルのスコープが欠落していますが、関数のスコープはまだ存在します。
この種のスコープの利点の 1 つは、内部関数が、それが定義されている外部関数のパラメーターと変数にアクセスできることです (this と argument を除く)。
この機能を使用すると、次のようにコードを設計できます。

コードをコピー コードは次のとおりです。

varbankAccount = function () {
var value = 0;
return {
deposit: function (inc) {
value = inc;
},
getValue: function (){
return value ;
}
}
}


var myAccount =bankAccount(); //新しい銀行口座を開設します
myAccount.deposit(1000); yuan
alert(myAccount.getValue()); // should alter(1000); BankAccount 関数内にあるため、外部から直接操作することはできませんこの関数は、操作を実行するために返されるオブジェクトを提供します。この方法で、C# と Java のプライベート フィールドが実装されます。

グローバル変数によるグローバル空間の汚染を減らす: 関数のスコープを使用すると、JS ライブラリを作成するときに他のライブラリとの競合を減らすことができます。

コードをコピー

コードは次のとおりです。 (function () { var hello = ' Hello World.';

})();

alert(hello); //エラー: こんにちは、存在しません。主なアイデアは、匿名メソッドを定義してすぐに実行することです。関数の先頭のリテラルは関数定義として解釈されるため、それを囲むように一対の括弧が追加され、その後、一対の括弧を使用して関数が呼び出されることを示します。外部アラートは、関数内で定義された hello にアクセスできません。


トラップ 1: var のトラップ

「グローバル空間の汚染からグローバル変数の速度を低下させる」例は、

コードをコピー


コードは次のとおりです:

(function () { hello = 'Hello World.'; //remove var })(); alert(hello); //alert ('Hello World.');

変数 hello が var で明示的に宣言されていない場合、hello はグローバル変数になります！ ！

この機能を使用して外部インターフェイスを提供することはできますが、お勧めしません。

コードをコピー


コードは次のとおりです。

(function () { var hello = ' Hello World.'; sayHello = function () { //この方法でインターフェイスを提供することはお勧めできません。alert(hello); })( ;

(function (window) {

var hello = 'Hello World.';
window.$ = {
sayHello: function () {
alert(hello );
}
})(window);
$.sayHello(); // jQuery と同じくらいクールです

コードをコピー コードは次のとおりです。

var obj = ( function ( ) {
var hello = 'Hello World.';
return {
sayHello: function () {
alert(hello)
}; ();
obj.sayHello();

Trap 2: Closure Trap

Copy code The code is as follows:

(function () { //Function a
var arr = [];
　 var i = 0;
var j;
for ( ; i < 3; i ) {
arr.push(function () { //Function b
alert(i * 10);
});
}


for (j in arr) {
arr[j]();
}
})();

I thought that after each function in the function array arr is executed, 0 will pop up, 10,20, but it turned out not to be the case. The result is 30,30,30 popping up.
Function b does not access the current value of i, but directly accesses the variable i (used to always take the latest value of i).
The reason is that function b is an internal function of function a, variable i is visible to function b, and function b gets the latest value from i every time.

This time changed to:

Copy the code The code is as follows:

( function () { //function a
var arr = [];
var i = 0;
　 var j;
for ( ; i < 3; i ) {
arr. push((function (anotherI) { //Function m
return function () { //Function b
alert(anotherI * 10);
}
})(i)); // Here is (function b(anotherI) {})(i)
}


for (j in arr) {
arr[j]();
}
})();

After this execution, 0,10,20 finally popped up. Why is this?

Function b accesses anotherI (the value of i at that time) instead of directly accessing variable i.
Every time before arr.push, a new anonymous function m will be defined. In this example, three anonymous functions m0, m1, and m2 are defined. Each time they are called, their otherI gets the value of the current i. Each m function returns a b function after execution. b0 is in m0, b1 is in m1, and b2 is in m2. b0 can only access anotherI of m0 (which is 0), but b0 cannot access anotherI of m1 because m0 and m1 are different functions.