5

短いバージョンですが、私が理解していないのは次のコード行です。

(new Function("paper", "window", "document", cd.value)).call(paper, paper);

長いバージョンでは、次の関数を見てください。

window.onload = function () {
            var paper = Raphael("canvas", 640, 480);
            var btn = document.getElementById("run");
            var cd = document.getElementById("code");

            (btn.onclick = function () {
                paper.clear();
                paper.rect(0, 0, 640, 480, 10).attr({fill: "#fff", stroke: "none"});
                try {
                    (new Function("paper", "window", "document", cd.value)).call(paper, paper);
                } catch (e) {
                    alert(e.message || e);
                }
            })();
        };

このコードは Raphael プレイグラウンドからのものです。つまり、raphael ライブラリを実装しています。したがって、私が理解できない上部のコードの 1 行 (try/catch 式の内部にあります) は、cd.value 内に格納されているユーザーが入力したコードを関数にコピーするとします。しかし、それはどのように可能ですか？

こちらのページにアクセスできます: http://raphaeljs.com/playground.html

4

5 に答える 5

4

あなたは何を理解してnew Function()いますか？eval()JavaScriptコードの文字列を受け取るという点で似ています-その文字列を使用して関数を定義します。したがって、投稿した行は、次のことと同等です。

(function(paper,window,document){
  /* the code in the cd.value string goes here */
}).call(paper,paper);

詳細: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Function

于 2010-07-18T03:06:28.597 に答える
2

Function クラスのコンストラクター

functionName = new Function("function code should be written here");

このコンストラクトはコードを文字列として評価し、無名関数を割り当てるよりもはるかに遅くなります。実際に必要な場所でのみ使用してください。

パラメーターを持つ Function クラスのコンストラクター

functionName = new Function("varName","varName2","etc.","function code");

cd.value()解析およびコンパイルされるJavaScriptコードを含む文字列を提供するようです。後であなたはそれを呼びます...

のコードがどのようにcd.value見えるかを確認する必要があります。

于 2010-07-18T03:04:26.557 に答える
1

への引数Functionは、関数の名前付きパラメーターであり、次に関数の本体です。この場合、id がcodeで、valueその要素の属性が Javascript コードである要素があります。ドキュメントのどこかに次の HTML があるとします。

<textarea id="code">
  var a = "foo";
  var b = "bar";

  alert(a+b);
</textarea>

コード例をこのcode要素に対して実行すると、次の関数が作成されます。

function(paper, window, document) {
  var a = "foo";
  var b = "bar";

  alert(a+b);
}

関数に関する Mozilla Development Center のドキュメントをFunction参照して、オブジェクトがどのように機能するかについての完全な説明を得ることができます。

于 2010-07-18T03:14:14.640 に答える
1

基本的に、動的なボディを持つ新しい関数オブジェクトを作成しています...説明できる最良の方法は次のとおりです。

function (paper, window, document) where {} = cd.value;

詳細を読むためのリソースは次のとおりです。 http://www.permadi.com/tutorial/jsFunc/index.html

于 2010-07-18T03:05:36.733 に答える
1

関数は、最後のパラメーターを関数のFunctionコードとして使用して、新しい関数インスタンスを作成します。

したがって、基本的には次と同じです。

eval("function(paper,window,document){"+cd.value+"}").call(paper, paper);

このメソッドは、引数として配列call内の項目を使用して関数を呼び出すだけです。paper

于 2010-07-18T03:11:47.383 に答える