多くのフロントエンドプログラマーが見落としがちな JavaScript の面接の質問の概要-jsチュートリアル-php.cn

多くのフロントエンドプログラマーが見落としがちな JavaScript の面接の質問の概要

黄舟

リリース： 2017-03-09 14:38:09

オリジナル

2120 人が閲覧しました

多くのフロントエンドプログラマーが無視しがちな JavaScript の面接の質問の要約:

前書き

私が数年前に仕事を辞めたばかりのこの質問は、一連の質問です。フロントエンド面接で尋ねた質問質問の最後の質問は、面接官の JavaScript に関する総合的な能力を評価するために使用されます。残念ながら、これまでのところ、過去 2 年間で完全に正解できた人はほとんどいません。それは難しいということではなく、ほとんどの面接官が彼を過小評価しているからです。

質問は次のとおりです:

function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//请写出以下输出结果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

ログイン後にコピー

答えは次のとおりです:

function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

//答案：
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3

ログイン後にコピー

この質問は、私のこれまでの開発経験と、私が遭遇したさまざまな JS の落とし穴をまとめたものです。この質問には、変数定義のプロモーション、このポインターの指定、演算子の優先順位、プロトタイプ、継承、グローバル変数の汚染、オブジェクト属性とプロトタイプ属性の優先順位など、多くの知識ポイントが含まれます。

この質問には 7 つの質問が含まれています。以下で説明してください。

最初の質問

最初に Foo という関数を定義し、次に Foo の getName という静的プロパティを作成し、匿名関数を保存しました。 Foo。オブジェクトは getName という名前の新しい匿名関数を作成します。次に、関数変数式を通じて getName 関数が作成され、最後に getName 関数が宣言されます。

Foo.getName に関する最初の質問は、当然のことながら、Foo 関数に格納されている静的プロパティにアクセスすることです。これは当然 2 です。言うことはありません。

2 番目の質問

2 番目の質問は、getName 関数を直接呼び出します。直接呼び出しているため、上記の現在のスコープにある getName という関数にアクセスしているため、1 2 3 とは関係ありません。この質問に対して多くの面接官は5と答えました。ここには 2 つの落とし穴があります。1 つは変数宣言の昇格、もう 1 つは関数式です。

変数宣言の昇格

つまり、宣言されたすべての変数または宣言された関数は、現在の関数の先頭に昇格されます。

たとえば、次のコード:

console.log(&#39;x&#39; in window);//true
var x;

ログイン後にコピー

x = 0;

ログイン後にコピー

コードが実行されると、JS エンジンは宣言ステートメントをコードの先頭に上げて次のようになります:

var x;
console.log(&#39;x&#39; in window);//true
x = 0;

ログイン後にコピー

関数式

var getName と function getName はどちらも宣言ステートメントです。違いは、var getName が関数式であるのに対し、function getName は関数宣言であることです。 JS でさまざまな関数を作成する方法の詳細については、記事「ほとんどの人が間違える古典的な JS クロージャ面接の質問」を参照してください。

関数式の最大の問題は、js がこのコードを 2 行のコードに分割し、別々に実行することです。

たとえば、次のコード:

console.log(x);//输出：function x(){}
var x=1;
function x(){}

ログイン後にコピー

実際に実行されるコードは、まず var x=1 を var x; と x = 1; の 2 行に分割し、次に var x と function x; を分離します。 (){ } 2 行を一番上に上げて、次のようになります。

var x;
function x(){}
console.log(x);
x=1;

ログイン後にコピー

したがって、final 関数によって宣言された x は、変数によって宣言された x をカバーし、ログ出力は x 関数になります。

同様に、元の質問のコードの最終実行は次のとおりです:

function Foo() {
    getName = function () { alert (1); };
    return this;
}
var getName;//只提升变量声明
function getName() { alert (5);}//提升函数声明，覆盖var的声明

Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
getName = function () { alert (4);};//最终的赋值再次覆盖function getName声明

getName();//最终输出4

ログイン後にコピー

3 番目の質問

3 番目の質問 Foo().getName(); は、最初に Foo 関数を実行し、次に Foo を呼び出します。 function 値オブジェクトの getName プロパティ関数を返します。

Foo 関数 getName = function () {alert (1) }; の最初の文は関数代入ステートメントであるため、最初に現在の Foo 関数で getName 変数を探します。範囲はありません。次に、現在の関数スコープの上位層、つまり外側のスコープを調べて、getName 変数が含まれているかどうかを確認します。これは、2 番目の質問のalert(4) 関数です。 function(){alert(1) } への変数。

外側のスコープの getName 関数は、ここで実際に変更されます。