ホームページ > 記事 > ウェブフロントエンド > JavaScript でこれがどこを指しているのかを確認する方法
JavaScript は非常に柔軟な言語であるとも言えますが、この記事を通じて JavaScript に関する知識を共有しましょう。一緒に
誰もが言うJavaScriptは非常に柔軟な言語ですが、わかりにくい言語とも言えます。関数型プログラミングとオブジェクト指向プログラミングを組み合わせたもので、動的言語機能と組み合わせると、非常に強力です (実際、C++ とは比較になりません ^_^)。
JSのThis
は関数内で作成されます
呼び出されたとき(一口)、関数にバインドされたオブジェクトを指します
これは割り当てることはできませんが、呼び出し/適用することはできます
ディレクトリを変更します
* 特殊なケース
* 判定を開始します
* ルール1: オブジェクトメソッド内のthisはオブジェクト自体を指します(アロー関数の形式を除く)
* ルール2:マルチレベルの入れ子関数 This in は、this を含む最新の関数と同等の this
を指します。 * ルール 3: アロー関数および非ポインティング オブジェクト メソッド内の関数の場合、this は window
* を指します。 * * 通常の関数の This * 関数 実行後、別の関数 (通常の関数) で this を返す
* * 多段の入れ子関数 (タイマー & アロー関数) の This 1
* * 多段の入れ子関数 (タイマー) の This & アロー関数) 2
特殊なケース 正式に始める前に、特殊なケースについて話しましょう。
// 构造函数 function Student(name) { this.name = name } // 创建小明和小红两个实例 var XM = new Student('xiaoming') var XH = new Student('xiaohong') // 输出信息 console.log(XM) // Student {name: "xiaoming"} console.log(XH) // Student {name: "xiaohong"}
判断を開始以下は典型的な例であり、分析はここから始まります。
var x = { name: 'bw2', getName1: function() { console.log(this) }, getName2: function() { setTimeout(() => { console.log(this) },0) }, getName31: () => { console.log(this) }, getName32: function() { return function() { console.log(this) } } } x.getName1() // {name: "bw2", getName1: ƒ} x.getName2() // {name: "bw2", getName1: ƒ} x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …} x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
var x = { name: 'bw2', getName1: function() { console.log(this) } } x.getName1() // {name: "bw2", getName1: ƒ}
アロー関数には独立した this スコープがないため、引き続き外側の層に進み、getName: function(){} に到達します。このポインタは、この関数内の this ポインタと同等です。ルール 1 によれば、これはオブジェクト自体を指します。
var x = { name: 'bw2', getName2: function() { console.log(this) // 等同于此处的this setTimeout(() => { console.log(this) // 原始的this位置 },0) } } x.getName2() // {name: 'bw2', getName1: ƒ}
ルール 3: アロー関数と非オブジェクト指向メソッドの関数の場合、これはウィンドウを指します
ルール 2 に従って、これは最も近い関数を指します。したがって、ここでのこれは、したがって、メソッド内の this はオブジェクトではなく、グローバルを指します。
少し変な気がしますか?しかし、実践により、これが事実であることが証明されました。
var x = { name: 'bw2', getName31: () => { console.log(this) }, getName32: function() { return function() { console.log(this) } } } x.getName31() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …} x.getName32()() // Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
演習セット 誰もがルール 1 ~ 3 に従って判断し、結果を推測し、ブラウザでテストすることができます。テスト結果を返信して一緒に話し合うこともできます。
私の能力が限られているため、この一連のルールは場合によっては失敗する可能性があります。皆さんもぜひ一緒に議論してください。
以下は質問の時間です。
これは通常の関数内です
function x() { console.log(this) } x()
function xx(){ return function() { console.log(this) } } xx()()
var x = { name: 'bw2', getName: () => { setTimeout(() => { console.log(this) },0) } } x.getName()
var x = { name: 'bw2', getName: () => { setTimeout(function() { console.log(this) },0) } } x.getName()
以上がJavaScript でこれがどこを指しているのかを確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。