☰

この JavaScript 慣用句 var self = this の根底にあるものは何ですか? 質問する

tag-icon • tag-icon javascript scope closures
この JavaScript 慣用句 var self = this の根底にあるものは何ですか? 質問する

私は以下のソースを見ましたWebKit HTML 5 SQL ストレージ ノート デモ:

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

著者は、ある場所 (関数本体) ではself を使用し、別の場所 (メソッドの引数リストで定義された関数本体) ではthis を使用しています。何が起こっているのでしょうか。一度気づいたので、今後はどこでも見かけるようになるのでしょうか。

ベストアンサー1

これを見てalistapart.com の記事（編集者注：この記事は当初リンクされていたものから更新されています）

selfthisコンテキストが変化しても、元の参照を維持するために使用されています。これは、イベント ハンドラ (特にクロージャ) でよく使用される手法です。

編集：注意：self現在では、window.self存在しており、注意しないとエラーが発生する可能性があります。

変数にどのような名前を付けるかは特に重要ではありません。var that = this;問題ありませんが、名前に魔法のようなものは何もありません。

コンテキスト内で宣言された関数 (コールバック、クロージャなど) は、同じスコープ内または上位のスコープ内で宣言された変数/関数にアクセスできます。

たとえば、単純なイベント コールバックは次のようになります。

function MyConstructor(options) {
  let that = this;

  this.someprop = options.someprop || 'defaultprop';

  document.addEventListener('click', (event) => {
    alert(that.someprop);
  });
}

new MyConstructor({
  someprop: "Hello World"
});

おすすめ記事