[Javascript] this

11522 ワード
this JavaScript JavaScript this JavaScript テキストリンク
JavaScriptのthis
他の言語とは異なり、JavaScriptの独特な特性の一つはthisの使い方です.thisは、状況によって異なるため、必要に応じてthisを操作するには、明確にする必要があります.
このアイテムを単独で使用
これは単独呼び出しの場合です.単独で呼び出すとwindowを指します.
const x = this;

console.log(x);	//window

thisを単独で使用する場合、thisは글로벌 객체を指します.厳格モードで単独で使用されるthisはundefinedを指す.
関数のthis
関数がこの関数を直接呼び出す場合は、windowを指します.次のようにします.
const func = () => {
  return this;	//window
};

関数でthisを使用する場合は、글로벌 객체を指します.Strictモードでは、undefinedも指します.
ただし、関数には、thisがグローバルオブジェクトを指さないようにする方法があります.これがArow関数を使う方法です.allow関数がグローバルに実行されている場合でも、allow関数のthisは外部関数またはクラスのthisを指します.
オブジェクトメソッドのthis
さっき見た2つの状況は、グローバルオブジェクトを指しています.したがって、これは実際にはグローバルオブジェクトを指していることに注意してください.これからは、グローバルオブジェクトではないことを議論します.
このオプションがオブジェクトメソッドで使用されている場合.
const obj = {
  x: 100,
  printX: function() {
    return this.x;
  },
};

obj.printX(); //100

オブジェクトメソッドのthisは、メソッドを呼び出すオブジェクトを表します.
また、同じ名前のプロパティをオブジェクト内に追加し、同じメソッドを使用すると、このメソッドは最も近いオブジェクトを指します.
const obj = {
  x: 100,
  printX: function() {
    return this.x;
  },
};

obj.innerObj = {
  x: 404,
  printX: function() {
    return this.x;
  }
};

obj.innerObj.printX();

生成者のthis
ジェネレータの内部でthisを使う人をたくさん見たことがありますが、この場合thisは何を指していますか?
function Student(name, id) {
  this.name = name;
  this.id = id;
}

let student01 = new Student('무지', 101);

console.log(student01.name);	//'무지'
console.log(student01.id);	//101

ジェネレータのthisは、作成したインスタンスオブジェクトを指します.
しかし、少し注意しなければならないことがあります.コンストラクション関数も関数の1つです.したがって、オブジェクトがnew演算子でインスタンス化されていない場合、コンストラクション関数ではなく汎用関数として認識され、グローバルオブジェクトを指します.

これらの問題はES 6にclassとconstructorコマンドを追加したときに解決された.new演算子の損失を防止します.また、コンストラクション関数コンストラクション関数で使用されるthisもインスタンスオブジェクトを指します.
イベントリスナーのthis이벤트 리스너は、ウェブページ上でイベントが発生したときの動作を定義するコードである.
document.body.addEventListdocument.body.addEventListener('click', function () {
  console.log(this);	//<body>
});
イベントリスナーがこのオプションを使用すると、イベントターゲットとしてDOM要素を指します.
bind、call、applyのこの明示的なバインド
明示的なバインディングthisは、指定されたターゲットを意味する.
let sayYaho = {z: '야호'};

function whatIsThis() {
  console.log(this);
};

whatIsThis();	//window
whatIsThis.bind(sayYaho).call();	//sayYaho 객체
whatIsThis.call(sayYaho);	//sayYaho 객체
whatIsThis.apply(sayYaho);	//sayYaho 객체

このオブジェクトをbind()、call()、apply()メソッドで明示的にバインドすると、このメソッドはパラメータとして渡されるオブジェクトを指します.
リファレンス
  • MDN - this
  • Zerochブログ-this
  • ナナのブログ
    • どのように反応してフィルタリングポートフォリオを作成します.js
    使われていない` nodeound module `データのギガバイトを削除するコマンド