首頁  >  文章  >  web前端  >  this是怎麼使用的?

this是怎麼使用的?

零下一度
零下一度原創
2017-06-26 09:27:081767瀏覽

(1)全域環境

在全域環境使用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引擎內部,objobj.foo儲存在兩個記憶體位址,簡稱為 M1M2。只有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: &#39;Hello&#39;  }};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指向module.exports。

<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/>
 <br/>

以上是this是怎麼使用的?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:學習Vue前述下一篇:學習Vue前述