1. ホーム
  2. javascript

[解決済み] JavaScriptの慣用句、var self = thisの根底にあるものは?

2022-03-14 21:18:04

質問

のソースに次のようなものがありました。 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;
  // ...
}

作者は 自己 をところどころ(関数本体)に、そして これ を、他の場所(メソッドの引数リストで定義された関数の本体)で使用することができます。 どうなっているのでしょうか? 一度気づいたからには、どこでも見るようになるのでしょうか?

どうすれば解決するの?

こちらをご覧ください alistapart.comに掲載された記事 . (編集部: 記事内容はリンク先から更新されています)

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

編集する を使用することに注意してください。 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"
});