JavaScript this?!
7090 ワード
this?
JavaScriptでは、これは何を意味しますか?
これはオブジェクトと深い関連があります.たとえば、letinfo={name:[eunjiang]}というオブジェクトがあります.呼び出しnameは「eunjiang」を出力し、変数infoはこのコンテキストオブジェクトと呼ばれます.
コンテキストという言葉は、表示される任意のオブジェクトとして理解できます.
この4つの操作方法
1.デフォルトバインド(グローバルオブジェクト)
Chrome Developerツールのコンソールにthisを入力して簡単なテストを行います.
Windowオブジェクトが正常に出力されているかどうかを確認できます.つまり、この操作の最初の方法は、グローバルオブジェクト(ウィンドウ)をコンテキストオブジェクトとして使用することです.
グローバル範囲内で変数を宣言するなど、コンテキストとしてグローバルオブジェクトを持つオブジェクトにPropertyを登録します.したがって、thisを使用すると明確でない場合、グローバルステータスに影響を及ぼす可能性があります.
2.暗黙的バインド
暗黙的なバインドをコードで表す場合は、次のようになります.function test() {
console.log(this.a);
}
var obj = {
a: 20,
func1: test,
func2: function() {
console.log(this.a);
}
};
obj.func1(); // 20
obj.func2(); // 20
すなわち、関数がオブジェクトを介して呼び出されると、そのオブジェクトはそのオブジェクトのコンテキストオブジェクトになります.上記のコードでは、func 1およびfunc 2はobjによって呼び出されるため、objはthisである.
3.明示的なバインド
関数にはcall、apply、bindメソッドがあり、最初のパラメータに渡されると、明示的なバインドと呼ばれるコンテキストオブジェクトになります.function test() {
console.log(this);
}
var obj = { name: "eunjeong" };
test.call(obj); // { name: 'eunjeong' }
test.call("원시 네이티브 자료들은 wrapping 됩니다");
4.新規バインド
新しいバインドはクラス設計モードの形式を表示します.function test(a) {
this.a = a;
this.b = 20;
}
var check = new test(2);
console.log(check.a); // 2
console.log(check.b); // 20
上のコードはJavaScriptにクラスがあるように見えます.ただし、newバインドの動作順序を表示します.
function test() {
console.log(this.a);
}
var obj = {
a: 20,
func1: test,
func2: function() {
console.log(this.a);
}
};
obj.func1(); // 20
obj.func2(); // 20
function test() {
console.log(this);
}
var obj = { name: "eunjeong" };
test.call(obj); // { name: 'eunjeong' }
test.call("원시 네이티브 자료들은 wrapping 됩니다");
function test(a) {
this.a = a;
this.b = 20;
}
var check = new test(2);
console.log(check.a); // 2
console.log(check.b); // 20
新規オブジェクトの作成
新しいオブジェクトのプロトタイプチェーンと呼び出し関数のプロトタイプ関連付け
関数は、このコンテキストオブジェクトとして1番の魚オブジェクトを使用して実行されます.
1で作成したオブジェクトを返します
4つのバインドの優先度
新しいバインディング>=明示的バインディング>>>>>暗黙的バインディング>=デフォルトバインディング.
関数のこれ?
これらのバインドについて説明しましたが、さらに理解する必要があります.
特別な動作だ下記のブログを参考にしてください.
Javascript Function, Arrow Function
リファレンス
JAvascript thisの4つの操作方法
Reference
この問題について(JavaScript this?!), 我々は、より多くの情報をここで見つけました https://velog.io/@eunjeong/JavaScript-thisテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol