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"}

コンストラクターでは、インスタンスの作成時に、 this の値が新しく作成されたインスタンスにバインドされます。以下の判定方法には当てはまりませんので、ここで説明します。

判断を開始以下は典型的な例であり、分析はここから始まります。

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: ƒ, …}

ルール 1: オブジェクトメソッドの this はオブジェクト自体を指します (アロー関数の形式を除く)

var x = {
 name: 'bw2',
 getName1: function() {
 console.log(this)
 }
}
x.getName1() // {name: "bw2", getName1: ƒ}

ルール 2: マルチレベルの入れ子関数の this は最新のオブジェクトを指しますthis を含むもの function の this

アロー関数には独立した 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()()

これは多層ネストされた関数内です（タイマーとアロー関数 ) 1

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(() => {
  console.log(this)
 },0)
 }
}
x.getName()

多層ネスト関数のこれ (タイマー & アロー関数) 2

var x = {
 name: 'bw2',
 getName: () => {
 setTimeout(function() {
  console.log(this)
 },0)
 }
}
x.getName()

繰り返しになりますが、このルールは実験的なものであり、大規模なテストは行われておらず、保証されていませんすべてのケースで一貫した結果が得られます。ルール判定に失敗する場面を見つけた場合は、メッセージを残して一緒に議論してください。

以上がJavaScript でこれがどこを指しているのかを確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。