調査したいので、この JavaScript 構文を何と呼びますか?

StackOverflow https://stackoverflow.com/questions/3208236

  •  13-09-2020
  •  | 
  •  

質問

1) 次のコードで、その背後にある理由は何ですか? gameOfLive 変数だけではなく function gameOfLife()?

2) とは何ですか gol?配列のように見えますが、構文やその名前がわかりません。

私は勉強しています http://sixfoottallrabbit.co.uk/gameoflife/

if (!window.gameOfLife) var gameOfLife = function() {

    var gol = {
        body: null,
        canvas: null,
        context: null,
        grids: [],
        mouseDown: false,
        interval: null,
        control: null,
        moving: -1,
        clickToGive: -1,
        table: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".split(''),
        tableBack: null,

        init: function(width, height) {
            gol.body = document.getElementsByTagName('body')[0];
            gol.canvas = document.createElement('canvas');
            if (gol.canvas.getContext) {
                gol.context = gol.canvas.getContext('2d');
                document.getElementById('content').appendChild(gol.canvas);
                gol.canvas.width = width;
                gol.canvas.height = height;
                gol.canvas.style.marginLeft = "8px";

                gol.control = document.getElementById('gridcontrol');

                gol.canvas.onmousedown = gol.onMouseDown;
                gol.canvas.onmousemove = gol.onMouseMove;
                gol.canvas.onmouseup = gol.onMouseUp;

                gol.addGrid(48,32,100,44,8);

                gol.refreshAll();
                gol.refreshGridSelect(-1);
                gol.getOptions(-1);

                gol.genTableBack();
            } else {
                alert("Canvas not supported by your browser. Why don't you try Firefox or Chrome? For now, you can have a hug. *hug*");
            }
        },
    }
}
役に立ちましたか？

解決 

var gameOfLife = function() { }
.

は関数式ですが、

function gameOfLife() { }
.

は関数宣言です。

Juriy 'Kangax' Zaytsevについて関数式と関数式宣言：

には微妙な違いがあります 宣言の行動 式。

まず、関数宣言 解析され、その前に評価されます 他の式はです。たとえ 宣言は最後に配置されています ソース、それは評価されます 範囲に含まれている他の表現を中止します。 [...]

もう1つ 機能の重要な特徴 宣言はそれらを宣言することです 条件付きでは非標準化されていません さまざまな環境で異なります。 あなたは決して関数に頼るべきではありません 条件付きで宣言されています 代わりに関数式。

この場合、コメント内のJoel CoehoORNは、条件付きで定義されているため、関数式を使用する必要があります。

これらの条件付きで定義された関数の一般的なユースケースは、新しい関数に対するネイティブサポートを持っていないブラウザのJavaScript機能を強化することです（以前のECMAScript / JavaScriptのバージョンでは利用できません）。これは、関数宣言を使用してこれをしたくありません。これは、とにかくネイティブ機能を上書きするためです。これは、あなたが望むもの（スピードなどを考慮するなど）ではありません。短例 

if (!Array.prototype.indexOf) { 
    Array.prototype.indexOf = function(item, from) {
        /* implement Array.indexOf functionality,
           but only if there's no native support */
    }
}
.

関数式の大きな欠点は、実際には匿名関数を変数に割り当てることです。これは関数名が通常わからないときに、harder をデバッグすることができます。スクリプトの実行は停止します（たとえば、設定したブレークポイントで）。 FirebugのようなJavaScriptデバッガの中には、関数が割り当てられた変数の名前を付けてみましょうが、デバッガはスクリプト内容をオンザフライに解析してこれを推測しなければならないため、これは難しくなる可能性があります（関数名の代わりに、または間違っているのではなく、gameOfLifeが表示されています。

（その内容は初心者に完全には適していない）

ですが、ページ上で読み取りをしてください）

他のヒント

  1. JavaScriptでは、関数はファーストクラスオブジェクト。オブジェクトに保存し（変数）、それらを関数の引数として渡すことができます。すべての関数は実際にはFunctionオブジェクトです。

  2. golはオブジェクトで、オブジェクトを使用して初期化されているオブジェクトです。リテラル表記

1) 次のコードで、gameOfLive を単なる「関数 gameOfLife()」ではなく変数にしている理由は何ですか?

グローバル レベルで定義された変数は、ウィンドウ オブジェクトのメンバーです。したがって、変数にすることで、次のような構文を使用できるようになります。 window.gameOfLife(). 。それが彼らが使用できる理由でもあります if (!window.gameOfLife) スニペットの先頭を確認してください。

しかし、これではなぜこの方法を選択したのかが実際には説明できず、関数宣言でも同じことが行われます。 マルセル・コルペルの答え 2 つのオプションの「理由」をよりよく説明します。

2) ゴルとは何ですか?配列のように見えますが、構文やその名前がわかりません。

この構文はコンパクト オブジェクト表記法と呼ばれます。ここで興味深いのは、「コンパクト」オブジェクトが関数内で宣言されていることです。このように関数内でオブジェクトを宣言すると、それを使用して (事実上) プライベート メンバーを含む JavaScript オブジェクトを構築できるため便利です。

重要なのは、JavaScript の関数とオブジェクトを覚えておくことです。 同じものです. 。したがって、完全な gameOfLife() 関数は実際にはオブジェクト定義です。さらに、 gol のメンバーとして宣言されたオブジェクト gameOfLife これはおそらく、プライベート メンバーを定義するための一般的な手法の一部です。の gameOfLife() 関数/オブジェクトはこれを返します gol 物体。内で宣言されている他のすべての項目 gameOfLife() 関数/オブジェクトは事実上、返されたオブジェクトのプライベート メンバーになります。 gol インスタンス内で宣言されているものはすべて gol オブジェクト自体はパブリックです。彼らが本当にやりたいことは、最終的には次のようなコードを書くことです。

var game = new gameOfLife();

これを行うと、ゲーム変数には gol 物体。このオブジェクトのメソッドは、完全な宣言で宣言された項目に引き続きアクセスできます。 gameOfLife() 機能しますが、他のコードは機能しません（少なくとも、それほど簡単ではありません）。したがって、これらのアイテムは事実上非公開になります。の項目 gol オブジェクト自体はまだ公開されています。したがって、他のオブジェクト指向言語で構築する場合と同様に、適切なカプセル化/情報隠蔽を行うために、プライベート メンバーとパブリック メンバーの両方を含むオブジェクトが作成されます。

関数を変数に置くことで、後で移動させて別の関数に置き換えて、関数を透過的に入力してください。フォームウィジェットで "onclick="を指定したときに、これはあなたがしているのと同じことです。

Sure：構文を説明するには：

関数はJavaScriptの最初のクラスオブジェクトであるため、関数を変数に入れることができます。したがって、このコードの主要部分は実際にはVAR GameOflifeに格納されている関数定義であり、これは後で呼び出して使用することができます：

gameOfLife()
.

golはオブジェクト（Hash）であり、 "init"は上記の構文のもう1つの例です。 "Gol" Hashの "Init"キーに直接入力してください。その関数は次のように呼び出すことができます：

gol["init"](w,h)
.

このページ、gameOfLifeを宣言することは異なりませんあなたの道を宣言することから。golを定義する方法はそれをオブジェクトにします（またはそれを連想配列と考えることができます）。配列の同様のショートカットは、巻き毛のみの代わりに角括弧を使用することです。

変数としての関数を考慮すると、関数がオブジェクトのプロパティになる場合に役立ちます。（ http://www.permadi.com/tutorial/jsfunc/index.html）

私はGOLが名前/値のペアで説明されているJavaScriptオブジェクトであると考えています。（

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top