特定の変数の値が変更されたときに発生するイベントを JS で作成することは可能ですか? JQuery が使用できます。
ベストアンサー1
この質問はもともと 2009 年に投稿されたもので、既存の回答のほとんどは時代遅れか、効果がないか、または大きく肥大化したライブラリを組み込む必要があります。
- オブジェクト.ウォッチそしてオブジェクト.観察どちらも非推奨なので使用しないでください。
- プロパティの変更は、IE の一部のバージョンでのみ動作する DOM 要素イベント ハンドラーです。
- オブジェクト.definePropertyオブジェクトのプロパティを不変にすることができ、変更の試みを検出できるようになりますが、変更はすべてブロックされます。
- セッターとゲッターの定義動作しますが、多くのセットアップ コードが必要であり、新しいプロパティを削除または作成する必要がある場合にはうまく動作しません。
2018年現在、プロキシオブジェクトに加えられた変更を監視 (および傍受) するオブジェクト。これは、OP が実行しようとしていることを目的として構築されています。基本的な例を次に示します。
var targetObj = {};
var targetProxy = new Proxy(targetObj, {
set: function (target, key, value) {
console.log(`${key} set to ${value}`);
target[key] = value;
return true;
}
});
targetProxy.hello_world = "test"; // console: 'hello_world set to test'
このオブジェクトの唯一の欠点は次Proxyのとおりです。
- この
Proxyオブジェクトは古いブラウザ（IE11など）では利用できず、ポリフィル機能を完全に再現することはできませんProxy。 - プロキシ オブジェクトは、特殊なオブジェクト (例:
Date)では必ずしも期待どおりに動作するとは限りませんProxy。オブジェクトは、プレーンなオブジェクトまたは配列と組み合わせるのが最適です。
ネストされたオブジェクトに加えられた変更を観察する必要がある場合は、次のような専用ライブラリを使用する必要があります。観測可能なスリム (私が公開したものです)。動作は次のようになります:
var test = {testing:{}};
var p = ObservableSlim.create(test, true, function(changes) {
console.log(JSON.stringify(changes));
});
p.testing.blah = 42; // console: [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]