[コアJS]3.this
5176 ワード
実行コンテキストがアクティブなときにdissバインドを行います.実行コンテキストは、関数が呼び出されたときに生成されるので、関数が呼び出されたときに決定されます.
1.グローバルスペースで
このグローバルオブジェクトを指します.ブラウザではwindowオブジェクト、ノードJSではグローバルオブジェクトです.
グローバルコンテキストを実行するボディはグローバルオブジェクトであるためです.このグローバルオブジェクトはhostオブジェクトとも呼ばれます.グローバルオブジェクトの情報は、ランタイム(JavaScriptランタイム環境)によって異なります.Windowsオブジェクトとグローバルオブジェクトは、ECMAScriptで定義されたオブジェクトではなく、実行時にECMAScriptで定義されたグローバルオブジェクトに提供される実装です.グローバルオブジェクトの具体的な内容は、各ホスト環境で定義された内容に依存します.
2.塩水湖上場
関数を呼び出すと、関数の内部でグローバルオブジェクトも指します.
function a() {
console.log(this);
}
a(); // Window 객체 출력
少しおかしいですが、関数を呼び出した瞬間に関数を実行する主体がグローバルオブジェクトであるため、このようなことが発生すると理解できます.function b() {
function c() {
console.log(this);
}
c(); // 여기에 집중(함수로써 호출)
}
b(); // Window 객체 출력
内部関数でも、呼び出し時のボディがグローバルオブジェクトを指すように指示されます.関数として呼び出されると、これはグローバルオブジェクトです.ES 6では、この問題を解決するために、このバインドを行わないarrow関数が作成されます.arrow関数はコンテキストで直接使用されます.var d = {
e: function() {
function f() {
console.log(this);
}
f(); // 여기에 집중(함수로써 호출)
}
}
d.e(); // Window 객체 출력
このメソッドを関数として呼び出すと、このオブジェクトはグローバルオブジェクトになります.次の章のメソッドとして呼び出す場合、thisはターゲットオブジェクトを指すのとは異なります.3.メソッド呼び出し時
メソッドを呼び出すと、このメソッドはメソッドを呼び出すボディを指します.メソッドは誰が呼び出したのか、メソッド名の前のポイントの前の内容はthisです.
var a = {
b: function() {
console.log(this);
}
}
a.b(); // a(객체) 출력
var a = {
b: {
c: function() {
console.log(this);
}
}
}
a.b.c(); // a.b(c가 들어있는 객체) 출력
かっこ表示法を使用する場合は、方法の前でよく見ることもできます.
メソッド内部関数における迂回法
2つ目の方法では、内部関数が存在する場合、内部関数のthisを迂回してグローバルオブジェクトの現象を参照できます.
obj.b()ではobj,thisを表す.出力aは20に等しい.内部関数cが呼び出されると、グローバルオブジェクトになります.でもこれ.出力aはwindowです.a以外のグローバル変数aが出力されます.JSの特徴.グローバルオブジェクトとグローバル変数は独立した概念ではありません.グローバル変数は、グローバルオブジェクトのプロパティとして動作します.
ちなみに,内部関数cのthisがobjを指すように,スコフ鎖を用いた迂回法を用いることができる.
内部関数の親でselfという変数に保存し、内部関数でselfを使用します.内部関数は独自のLexicalEnvironmentでselfを検索しますが、ないのでouterEnvironmentReferenceで外部(b関数のLexicalEnvironment)のselfを検索して使用します.selfにはthisが含まれており、thisがobj(obj.bを呼び出すとthis)になります.selfまたはthisも、これと同じ変数名を使用します.
ES 6では,この項をバインドしないarrow関数が現れるため,本迂回法を用いる必要はない.arrow関数はバインドされず、親(20出力)を使用します.
ES 5にはcallやapplyを用いた迂回方法もあるが,第1の迂回方法を用いたソースコードも多い.
4.callback呼び出し時
call、apply、bind(明確なthisバインドには3つの方法がある)
以上のコードは
{bb: "bbb"} 1 2 3
を出力します.3つの方法はいずれも最初のパラメータを使用してthisをバインドします.
デフォルトでは、コールバック関数のthisはグローバルオブジェクトです.ただし、コールバック呼び出し時にthisを指定すると変更される場合があります.
関数はコールバックを呼び出すため、グローバルオブジェクトです.
コールバック関数を受信するターゲットにこの値が指定されている場合、この値はです.上のコードではobjです.
settimeoutは、2番目のパラメータに指定した時間後にコールバック関数(1番目の面パラメータ)を実行します.上記のコードでは、コールバック関数は0.1秒後に実行されます.settimeoutは、この値を個別に指定しない関数です.したがって、コールバックが実行されると、グローバルオブジェクトになります.
settimeoutはコールバック処理方式を勝手に変更できないためbindメソッドを使用して指定します.bindがないときは,もう一度関数を囲んでselfを用いたことがある.
ここの概念から見ると、addEventListenerメソッドのコールバック関数は内部的にwindowを意味するかもしれないが、html dom要素を意味する.addEventListenerメソッドは、コールバック関数の処理時にイベントが発生するターゲットターゲットエイリアスとして定義されます.
この場合、bindメソッドでこの値を指定することもできます.
コールバックのこの定理
この値を指定する
5.コンストラクション関数を呼び出す場合
new演算子を使用する場合.new演算子は、コンストラクション関数の内容に基づいてインスタンスオブジェクトを作成するコマンドです.新しく作成したインスタンスオブジェクトはthisです.
上記のコードでは、Person関数を呼び出すときにnew演算子は使用されません.Personは関数として呼び出されるため、グローバルオブジェクトを指します.royには値は含まれず、値はグローバルオブジェクトのpropertyに格納されます.
new呼び出し(コンストラクション関数を呼び出す)を使用すると、royという変数自体がthis(新しく作成されたPersonインスタンスオブジェクト)になります.新しいオブジェクトが作成され、nameが作成され、age Propertyが保存されます.
整理する
Reference
この問題について([コアJS]3.this), 我々は、より多くの情報をここで見つけました https://velog.io/@hyeonze/JS-thisテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol