paper.jsの変数のスコープのテスト

画面内に複数paperscirptの記述があった場合、変数のスコープの範囲がどうなっているのかテスト。ついでにjavascriptも。

以下テスト用ソース

<script type="text/paperscript" canvas="scope_test1">
	console.log("p1 > a : " + a);
	console.log("p1 > b : " + b);

	var a= "a";

	console.log("p1 > a : " + a);
</script>
<canvas id="scope_test1" ></canvas>
<script type="text/javascript">
	console.log("js1 > a : " + a);
	console.log("js1 > b : " + b);

	var a = "ja";
	var b = "b";

	console.log("js1 > a : " + a);
	console.log("js1 > b : " + b);
</script>
<script type="text/paperscript" canvas="scope_test2">
	console.log("p2 > b : " + b);
	console.log("p2 > a : " + a);

	var a= "2";
	var b;

	console.log("p2 > a : " + a);
	console.log("p2 > b : " + b);
</script>
<!--
	対応するcanvasがなくてもpaperscirptは実行される。
	<canvas id="scope_test2" ></canvas>
-->
<script type="text/javascript">
	console.log("js2 > a : " + a);
	console.log("js2 > b : " + b);

	var a = "js";
	var b = "hoge";

	console.log("js2 > a : " + a);
	console.log("js2 > b : " + b);
</script>

<script type="text/paperscript" canvas="scope_test3">
	console.log("p3 > paper : " + paper);
	console.log("p3 > this : " + this);
</script>
<script type="text/javascript">
	console.log("js3 > paper : " + paper);
	console.log("js3 > this : " + this);
</script>

chromeでの表示結果

js1 > a : undefined **.html:21
js1 > b : undefined **.html:22
js1 > a : ja **.html:27
js1 > b : b **.html:28

js2 > a : ja **.html:45
js2 > b : b **.html:46
js2 > a : js **.html:51
js2 > b : hoge **.html:52

js3 > paper : { view: null, views: , project: null, projects: , tool: null, tools:  } **.html:60
js3 > this : [object Window] **.html:61

p1 > a : undefined
p1 > b : hoge
p1 > a : a

p2 > b : undefined
p2 > a : undefined
p2 > a : 2
p2 > b : undefined

p3 > paper : { view: {  }, views: {  }, project: { layers: Layer @3, symbols: , activeLayer: Layer @3 }, projects: { layers: Layer @3, symbols: , activeLayer: Layer @3 }, tool: null, tools:  }
p3 > this : { view: {  }, views: {  }, project: { layers: Layer @3, symbols: , activeLayer: Layer @3 }, projects: { layers: Layer @3, symbols: , activeLayer: Layer @3 }, tool: null, tools:  }

わかったこと

  • paperscirptはjavascriptの後に、実行される。
  • javascirptはスクリプト記述部分が変わってもグローバル変数にアクセスできる
  • papersciprtは対象のcanvasが変わると互いの変数にアクセス出来ない
  • paperscirptでconsoleを使用した場合、行数を表示しない
  • javascirptはpaperscirptの変数に直接アクセスできない
  • papsercirptはjavascirptのグローバル変数にアクセスできる。ただし、同じ変数名をpapsercirt内で宣言している箇所があった場合はできない。
  • paperscirpt内ではthis=paper,paperscirptのpaperとjavascirptのpaperは違う。


 javascriptからpaperscriptの変数に直接アクセスできないというのは実行される順番もあるけれど、下手にグローバル変数扱いできる領域が増えると面倒な事になるためだと思われる。おそらくpaperオブジェクト内に保持しているとは思うのだけれど見つけられていない。
 互いのpaperscirptで干渉しないのであれば、以前このブログで起きた問題は何だったのだろうとも思うが、やはり記述方式が問題だったのだろうか。