[解決済み] 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"
});
関連
-
vueにおけるv-forループオブジェクトのプロパティ
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] ループ内のJavaScriptクロージャ - シンプルな実用例
-
[解決済み] どのような場合に '$this' よりも 'self' を使うべきですか?
-
[解決済み】JavaScript版sleep()とは?)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
Vue+ElementUIによる大規模なフォームの処理例
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】「X-Frame-Options」を「SAMEORIGIN」に設定したため、フレームでの表示を拒否された。
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
JavaScriptのStringに関する共通メソッド
-
[解決済み] var self = this?
-
[解決済み] JavaScriptにおけるthisとselfの違い
-
[解決済み] コールバック内で正しい `this` にアクセスする方法
-
[解決済み] JavaScriptで「var that = this;」とはどういう意味ですか?