ホームページ > 記事 > ウェブフロントエンド > これはどのように使用されますか?
(1) グローバル環境
グローバル環境で this
を使用します。これは、トップレベルのオブジェクト を参照します。ウィンドウ
code>。 this
,它指的就是顶层对象window
。
<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="k">this <span class="o">=== <span class="nb">window <span class="c1">// true<span class="kd">function <span class="nx">f<span class="p">() <span class="p">{ <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this <span class="o">=== <span class="nb">window<span class="p">); <span class="c1">// true<span class="p">}<br/>不管是不是在函数内部,只要是在全局环境下运行,<code class="highlighter-rouge">this</code>就是指顶层对象<code class="highlighter-rouge">window</code>。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span>
(2)构造函数
构造函数中的this
,指的是实例对象。
<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="kd">var <span class="nx">Obj <span class="o">= <span class="kd">function <span class="p">(<span class="nx">p<span class="p">) <span class="p">{ <span class="k">this<span class="p">.<span class="nx">p <span class="o">= <span class="nx">p<span class="p">;<span class="p">};<span class="nx">Obj<span class="p">.<span class="nx">prototype<span class="p">.<span class="nx">m <span class="o">= <span class="kd">function<span class="p">() <span class="p">{ <span class="k">return <span class="k">this<span class="p">.<span class="nx">p<span class="p">;<span class="p">};</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/><span style="font-size: 16px; font-family: "Microsoft YaHei"">上面代码定义了一个构造函数<code class="highlighter-rouge">Obj</code>。由于<code class="highlighter-rouge">this</code>指向实例对象,所以在构造函数内部定义<code class="highlighter-rouge">this.p</code>,就相当于定义实例对象有一个<code class="highlighter-rouge">p</code>属性;然后<code class="highlighter-rouge">m</code>方法可以返回这个p属性。</span>
(3)对象的方法
当A对象的方法被赋予B对象,该方法中的this
就从指向A对象变成了指向B对象。所以要特别小心,将某个对象的方法赋值给另一个对象,会改变this
的指向。
<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="kd">var <span class="nx">obj <span class="o">=<span class="p">{ <span class="na">foo<span class="p">: <span class="kd">function <span class="p">() <span class="p">{<span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">); <span class="p">}<span class="p">};<span class="nx">obj<span class="p">.<span class="nx">foo<span class="p">() <span class="c1">// obj</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/>
obj.foo
方法执行时,它内部的this
指向obj
。
但是,只有这一种用法(直接在obj
对象上调用foo
方法),this
指向obj
;其他用法时,this
都指向代码块当前所在对象(浏览器为window
对象)。
// 情况一(obj.foo = obj.foo)() // window// 情况二(false || obj.foo)() // window// 情况三(1, obj.foo)() // window
obj.foo
先运算再执行,即使它的值根本没有变化,this
也不再指向obj
了。
可以这样理解,在JavaScript引擎内部,obj
和obj.foo
储存在两个内存地址,简称为M1
和M2
。只有obj.foo()
这样调用时,是从M1
调用M2
,因此this
指向obj
。但是,上面三种情况,都是直接取出M2
进行运算,然后就在全局环境执行运算结果(还是M2
),因此this
指向全局环境。
<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="c1">// 情况一<span class="p">(<span class="nx">obj<span class="p">.<span class="nx">foo <span class="o">= <span class="kd">function <span class="p">() <span class="p">{ <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);<span class="p">})()<span class="c1">// 情况二<span class="p">(<span class="kc">false <span class="o">|| <span class="kd">function <span class="p">() <span class="p">{ <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);<span class="p">})()<span class="c1">// 情况三<span class="p">(<span class="mi">1<span class="p">, <span class="kd">function <span class="p">() <span class="p">{ <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);<span class="p">})()</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/><span style="font-size: 16px; font-family: "Microsoft YaHei"">同样的,如果某个方法位于多层对象的内部,这时为了简化书写,把该方法赋值给一个变量,往往会得到意料之外的结果。</span>
var a = { b: {m: function() { console.log(this.p);},p: 'Hello' }};var hello = a.b.m;hello() // undefined
上面代码中,m是多层对象内部的一个方法。为求简便,将其赋值给hello变量,结果调用时,this指向了顶层对象。为了避免这个问题,可以只将m所在的对象赋值给hello,这样调用时,this的指向就不会变。
<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="kd">var <span class="nx">hello <span class="o">= <span class="nx">a<span class="p">.<span class="nx">b<span class="p">;<span class="nx">hello<span class="p">.<span class="nx">m<span class="p">() <span class="c1">// Hello</span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/>
(4)Node
在Node中,this
的指向又分成两种情况。全局环境中,this
指向全局对象global
;模块环境中,this
<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="c1">// 全局环境<span class="k">this <span class="o">=== <span class="nx">global <span class="c1">// true<span class="c1">// 模块环境<span class="k">this <span class="o">=== <span class="nx">module<span class="p">.<span class="nx">exports <span class="c1">// true</span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/><span style="font-size: 16px; font-family: "Microsoft YaHei""><br/></span><br/><br/>🎜 (2) コンストラクター 🎜🎜🎜🎜 コンストラクター内の
this
はインスタンス オブジェクトを参照します。 🎜🎜<br/>🎜🎜(3) オブジェクトのメソッド🎜🎜🎜🎜オブジェクトAのメソッドがオブジェクトBに代入されると、メソッド内の
this
がオブジェクトAを指すように変わります。 to B オブジェクトを指すようになります。したがって、オブジェクトのメソッドを別のオブジェクトに割り当てると、this
のポインタが変更されますので、特に注意してください。 🎜🎜rrreee🎜🎜 obj.foo
メソッドが実行されると、その内部の this
は オブジェクトコード>。 🎜🎜🎜🎜ただし、使用方法は 1 つだけです (<code class="highlighter-rouge">obj
オブジェクトの foo
メソッドを直接呼び出す) 、this
は、他の用途の obj
を指します。this > すべては、コード ブロックが現在配置されているオブジェクトを指します (ブラウザは <code class="highlighter-rouge">window
オブジェクトです)。 🎜🎜rrreee🎜🎜obj.foo
は、値がまったく変更されていない場合でも、最初に計算されてから実行されます。これは
obj
を指しなくなりました。 🎜🎜🎜🎜JavaScript エンジン内部では、obj
と obj.foo
が保存されていることがわかります。 2 つのメモリ アドレス。M1
と M2
と呼ばれます。このように obj.foo()
が呼び出された場合のみ、M1
">M2 から呼び出されます。 code> なので、this
は obj
を指します。ただし、上記 3 つのケースでは、M2
を直接取り出して計算し、その計算結果をグローバル環境で実行します (それでも M2
)、this
は地球環境を指します。 🎜🎜rrreeerrreeerreerrreee🎜🎜 (4) Node🎜🎜🎜🎜 Node では、this
のポイントは 2 つの状況に分けられます。グローバル環境では、this
はモジュール環境のグローバル オブジェクト global
を指します。 "highlighter-rouge ">this は module.exports を指します。 🎜🎜れーれーれー以上がこれはどのように使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。