JavaScriptの基礎を楽しく学べるクイズ -Interactive JavaScript Quiz

Post on:2020年4月9日

はじめに

JavaScriptのクイズは混乱する可能性があることを誰もが知っています。
無意味なfoo bar bazなどの問題はJavaScriptの面白さを台無しにし、さらに混乱を招くことがあります。

私は昨年GitHubでJavaScript Questionsを公開しました。今回はインタラクティブなゲームにすると面白いのではないかと思い、私は視覚学習者なので、可能な限りGIFアニメーションで解説してみました🥳

callとbindの違い

何が出力されるでしょうか？
下記の4つから選択してください、正解すると紙吹雪が舞います。

解説

bind()とcall()メソッドを使用すると、thisキーワードがどのオブジェクトを参照するかを決めることができます。この例では、sayHi関数でbindとcallの両方を呼び出すことで、sayHi関数内のthisキーワードがpersonオブジェクトを参照するようにしています🥳

bind()とcall()メソッドの両方で、thisキーワードが参照するオブジェクトを指定することができます、この2つにはわずかな違いがあります。

bind()は、バインドされた関数のコピーのみを返します。
call()は、バインドされた関数をすぐに実行します。

最初に「sayHi.call(person, 21)」をログに出力します。callメソッドは（バインドされた）関数をすぐに実行し、その結果「Lydia is 21」が出力されます。

次に「sayHi.bind(person, 21)」をログに出力します。bindメソッドはバインドされた関数のコピーを返します。つまり、新しくコピーされた関数をログに記録しているだけです 😃

オブジェクトの参照

何が出力されるでしょうか？
下記の4つから選択してください、正解すると紙吹雪が舞います。

解説

オブジェクトと等しい変数のセットを宣言するときはいつでも、その変数にそのオブジェクトの値を実際に与えているわけではありません。その代わりに、メモリ内のそのオブジェクトの参照（または実際にはポインタ）の値を与えます ⚡️

この例では、person変数にメモリ内のオブジェクト「{ name: "Lydia" }」への参照（ポインタ）の値を与えます。

person変数にメモリ内の「name: "Lydia" }」を与えている

そして、membersという変数を宣言します。
membersの値は、メモリ内のその配列への参照です！

membersが参照している配列の最初の要素は、personが参照しているオブジェクトです。オブジェクトをお互いに等しく定義すると、実際には参照のコピーが作成されます。つまり、personとmenbersの配列の最初の要素がメモリ内では同じオブジェクトを指していることになります 😃

personとmenbersの配列の最初の要素が同じオブジェクトを指している

そして、personをnullに等しく定義します。これは、personがメモリ内で{ name: "Lydia" }オブジェクトへの参照の値を持たなくなったことを意味します。これでnullへの参照を持つようになりました！🎉
membersが参照する配列の最初の要素にはそれ自身のコピーされた参照があるため、personの値を変更してもその配列の最初の要素には影響しません！