JavaScriptでプロパティ変更をインターセプトする方法

Question

JavaScriptにてプロパティ変更をインターセプトし、独自メソッドで処理する方法を探しています。

具体的には location.href で画面遷移する処理を無効化したり、独自の処理を差し込みたいと考えています。

<div onclick="buttonClicked();">ボタン</div>

<script>
  function buttonClicked() {
    // ↓でhttp://abc.com/に遷移させず、URLに関わらず全てhttp://xyz.com/に遷移させたり、キャンセルさせたりしたい。
    location.href = "http://abc.com/";
  }
</script>

上記だけであればbuttonClicked()の中のURLを修正すれば済む話なのですが、location.hrefで遷移する箇所が非常に多いプロジェクトのため、location.hrefの変更をインターセプトしてURL変更処理を挟んだり、キャンセルさせたりできないかなぁと試行錯誤している次第です。

ちなみに<a>タグによるリンクは以下のような感じでclickイベントをインターセプトしています。

$("a").on("click", function() {
  // 無効化
});

Answer 1

ヒントになればと書きますが、お望みの挙動を完璧に実現できていません。

ちなみに比較的新しいブラウザ向けなのでご注意ください。Object.create のサポートが必要なので、 IE8 以下などが対象外となります。

var alt_location = (function(nativeLocation){
  return Object.create(nativeLocation, {
    href: {
      set: function(href) {
        console.log("alt_location.href is changed to " + href);
      },
      get: function() {
        return nativeLocation.href;
      }
    }
  });
})(location);

console.log(alt_location.href);// 参照の挙動は変更なし

alt_location.href = "the_url";// setter に処理が移譲され、遷移はせず console.log("alt_location.href is changed to the url") を実行

ちょっと挑戦しましたが、window.location という名前のままの置き換えは実現できませんでした。

例えば、上記の alt_location オブジェクトをあるスコープでのみ location として扱う工夫はありかもしれません。

location.href = "the_url";// この挙動は頑張ったけど変更する方法は思いつきませんでした。

alt_location.href = "the_url";// 別名でなら実現できます。

!function(location){
  location.href = "the_url";// この関数内なら location.href で大丈夫です。
}(alt_location);

with({location: alt_location}){
  location.href = "the_url";// この with ブロック内も location.href で大丈夫です。
}
// (まぁ with はあまり褒められた方法ではないですが)

ということで僕から提案できるのは、名前を変えるか、囲むかです。

Answer 2

ES6が使える環境ならばProxyがまさにその動作をできます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy
ただ、習得は難しいです