me_javascript スキルから JavaScript 関数と関数式を学びます

1. 関数宣言と関数式

ECMAScript では、関数を作成する最も一般的な 2 つの方法は、関数式と関数宣言です。ECMA 仕様では、関数宣言には識別子 (識別子) が必要であるという 1 つの点だけが明確にされているため、この 2 つの違いは少しわかりにくいです。 ) (これは、誰もがよく関数名と呼ぶものです)、この識別子は関数式では省略できます:

関数宣言: 関数 関数名 (パラメータ: オプション){関数本体}

関数式: 関数 関数名 (オプション) (パラメータ: オプション) { 関数本体 }

つまり、関数名が宣言されていない場合は式であることがわかりますが、関数名が宣言されている場合、それが関数宣言であるか関数式であるかをどのように判断するのでしょうか。 ECMAScript はコンテキストによって区別されます。関数 foo(){} が代入式の一部である場合、関数 foo(){} が関数本体内に含まれている場合、またはプログラムの先頭にある場合、それは関数式です。関数宣言。

function foo(){} // 声明，因为它是程序的一部分
var bar = function foo(){}; // 表达式，因为它是赋值表达式的一部分

new function bar(){}; // 表达式，因为它是new表达式

(function(){
 function bar(){} // 声明，因为它是函数体的一部分
})();

式と宣言の間には非常に微妙な違いがあります。まず、関数の宣言は、コードの最後の行にある場合でも、式が解析および評価される前に解析および評価されます。同じスコープ内の式は前に解析/評価されます。次の例を参照してください。関数 fn はアラートの後に宣言されますが、アラートの実行時には fn がすでに定義されています。

alert(fn());

function fn() {
 return 'Hello world!';
}

// 千万别这样做！
// 因为有的浏览器会返回first的这个function，而有的浏览器返回的却是第二个

if (true) {
 function foo() {
 return 'first';
 }
}
else {
 function foo() {
 return 'second';
 }
}
foo();

// 相反，这样情况，我们要用函数表达式
var foo;
if (true) {
 foo = function() {
 return 'first';
 };
}
else {
 foo = function() {
 return 'second';
 };
}
foo();

関数宣言はプログラムまたは関数本体内でのみ使用できます。構文的には、ブロック ({ … }) 内、たとえば if、while、または for ステートメント内にこれらを使用することはできません。 Block には Statement ステートメントのみを含めることができ、関数宣言などのソース要素は含めることができないためです。一方、ルールを詳しく見てみると、ブロック内で式を使用できる唯一の方法は、それが式ステートメントの一部である場合であることがわかります。ただし、仕様では、式ステートメントをキーワード関数で始めることはできないと明確に述べられています。これが実際に意味するのは、関数式を Statement ステートメントまたはブロック内に使用できないということです (ブロックは Statement ステートメントで構成されているため)。

名前付き関数式の場合は、もちろん名前が必要です。前の例 var bar = function foo(){}; は、名前付き関数式としては有効ですが、覚えておくべきことが 1 つあります。仕様では、周囲のスコープ内では識別子を有効にできないと規定されているため、新しく定義された関数のスコープ内でのみ有効です:

var f = function foo(){
 return typeof foo; // function --->foo是在内部作用域内有效
};
// foo在外部用于是不可见的
typeof foo; // "undefined"
f(); // "function"

最初に述べたように、名前を付けるとデバッグ プロセスがより便利になります。デバッグするときに、コール スタック内の各項目にそれを説明するための独自の名前があれば、デバッグ プロセスがより効果的になるからです。 、感覚が違います。

ヒント:ここに小さな質問があります。ES3 では、名前付き関数式のスコープ オブジェクトも Object.prototype のプロパティを継承します。これは、関数式に名前を付けるだけで、Object.prototype のすべてのプロパティもスコープに取り込まれることを意味します。結果は驚くべきものになるかもしれません。

var constructor = function(){return null;}
var f = function f(){
 return construcor();
}
f(); //{in ES3 环境}

この動作に対する合理的な解決策は、関数式と同じ名前のローカル変数を作成し、それに null の値を割り当てることです。関数式宣言を誤ってホイストしない環境でも、var を使用して変数を再宣言すると、変数 g がバインドされたままになります。変数 g を null に設定すると、重複した関数をガベージ コレクションできるようになります。

function foo(){
 return bar();
}
function bar(){
 return baz();
}
function baz(){
 debugger;
}
foo();

// 这里我们使用了3个带名字的函数声明
// 所以当调试器走到debugger语句的时候，Firebug的调用栈上看起来非常清晰明了 
// 因为很明白地显示了名称
baz
bar
foo
expr_test.html()

function foo(){
 return bar();
}
var bar = function(){
 return baz();
}
function baz(){
 debugger;
}
foo();

// Call stack
baz
bar() //看到了么？ 
foo
expr_test.html()

function foo(){
 return bar();
}
var bar = (function(){
 if (window.addEventListener) {
 return function(){
  return baz();
 };
 }
 else if (window.attachEvent) {
 return function() {
  return baz();
 };
 }
})();
function baz(){
 debugger;
}
foo();

// Call stack
baz
(?)() // 这里可是问号哦，显示为匿名函数(anonymous function)
foo
expr_test.html()

function foo(){
 return baz();
}
var bar = function(){
 debugger;
};
var baz = bar;
bar = function() { 
 alert('spoofed');
};
foo();

// Call stack:
bar()
foo
expr_test.html()

function foo(){
 return bar();
}
var bar = (function(){
 if (window.addEventListener) {
 return function bar(){
  return baz();
 };
 }
 else if (window.attachEvent) {
 return function bar() {
  return baz();
 };
 }
})();
function baz(){
 debugger;
}
foo();

// 又再次看到了清晰的调用栈信息了耶!
baz
bar
foo
expr_test.html()