問題:
eval がもたらす問題は、eval がグローバル スコープで実行されることです。
eval.call(document, "console.log(this)")
eval.call(navigator, "console.log(this)")
eval.call(window, "console.log(this)")
(function(){eval.call(document, "console.log(this)")})()
>Window
シナリオ:
属性onvisibleなど、さまざまなドキュメント要素のマークアップ コードで個々の属性を使用しているとします。
<img src="" onvisible="src='http://www.example.com/myimg.png';">
この属性を持つすべての要素を取得し、onvisible-content-string をクロージャーに変えて、それを EventHandler キューに入れたいとします。ここで、JS Function コンストラクターの出番です。
Function === 0..constructor.constructor
>true
Function('return [this, arguments]').call(window, 1,2,3)
>Window, Arguments[3]]
Function('return [this, arguments]').call(document, 1,2,3)
>Document, Arguments[3]]
Function('return [this, arguments]').call(navigator, 1,2,3)
>Navigator, Arguments[3]]
すべてを一緒に入れて:
var eventQueue = [];
var els = document.querySelectorAll('[onvisible]');
for (var el in els) {
var jscode = els[el].getAttribute('onvisible');
eventQueue.push( {el:els[el], cb:Function(jscode)} )
}
//eventQueue[0].cb.call(scope, args);