# uniapp之this作用域 01.先看一個案例 代碼如下所示 發現了點擊按鈕1可以更新title內容，但是點擊按鈕2卻無法更新title內容。這個究竟是為什么呢？ ``` <pre class="calibre13">``` <span class="token"><</span>template<span class="token">></span> <span class="token"><</span>view <span class="token2">class</span><span class="token">=</span><span class="token4">"container"</span><span class="token">></span> <span class="token"><</span>text<span class="token">></span><span class="token1">{</span><span class="token1">{</span>title<span class="token1">}</span><span class="token1">}</span><span class="token"><</span><span class="token">/</span>text<span class="token">></span> <span class="token"><</span>button type<span class="token">=</span><span class="token4">"default"</span> @click<span class="token">=</span><span class="token4">"changeTitle1"</span><span class="token">></span>改變標題內容按鈕<span class="token5">1</span><span class="token"><</span><span class="token">/</span>button<span class="token">></span> <span class="token"><</span>button type<span class="token">=</span><span class="token4">"default"</span> @click<span class="token">=</span><span class="token4">"changeTitle2"</span><span class="token">></span>改變標題內容按鈕<span class="token5">2</span><span class="token"><</span><span class="token">/</span>button<span class="token">></span> <span class="token"><</span><span class="token">/</span>view<span class="token">></span> <span class="token"><</span><span class="token">/</span>template<span class="token">></span> <span class="token"><</span>script<span class="token">></span> <span class="token2">export</span> <span class="token2">default</span><span class="token1">{</span> <span class="token3">data</span><span class="token1">(</span><span class="token1">)</span><span class="token1">{</span> <span class="token2">return</span><span class="token1">{</span> title <span class="token1">:</span> <span class="token4">"這個是標題"</span><span class="token1">,</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">,</span> methods<span class="token1">:</span><span class="token1">{</span> <span class="token3">changeTitle1</span><span class="token1">(</span><span class="token1">)</span><span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>title <span class="token">=</span> <span class="token4">"改變標題1"</span><span class="token1">;</span> <span class="token1">}</span><span class="token1">,</span> <span class="token6">//可以發現下面這個執行了success方法，但是調用this賦值卻無法改變內容</span> <span class="token3">changeTitle2</span><span class="token1">(</span><span class="token1">)</span><span class="token1">{</span> uni<span class="token1">.</span><span class="token3">setStorage</span><span class="token1">(</span><span class="token1">{</span> key<span class="token1">:</span> <span class="token4">'storage_key'</span><span class="token1">,</span> data<span class="token1">:</span> <span class="token4">'hello'</span><span class="token1">,</span> success<span class="token1">:</span> <span class="token2">function</span> <span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>title <span class="token">=</span> <span class="token4">"改變標題2"</span><span class="token1">;</span> console<span class="token1">.</span><span class="token3">log</span><span class="token1">(</span><span class="token4">'changeTitle2------success'</span><span class="token1">)</span><span class="token1">;</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">)</span><span class="token1">;</span> <span class="token1">}</span><span class="token1">,</span> <span class="token1">}</span> <span class="token1">}</span> <span class="token"><</span><span class="token">/</span>script<span class="token">></span> <span class="token"><</span>style<span class="token">></span> <span class="token1">.</span>container<span class="token1">{</span> display<span class="token1">:</span> flex<span class="token1">;</span> flex<span class="token">-</span>flow<span class="token1">:</span> column<span class="token1">;</span> <span class="token1">}</span> <span class="token"><</span><span class="token">/</span>style<span class="token">></span> ``` ``` 為什么changeTitle2無法改變title內容 在changeTitle2方法的success方法中，該success方法指向閉包，所以this屬于閉包，由此在success回調函數里是不能直接使用this.title的。 02.看一下解決方案 可以發現這樣操作就可以解決作用域問題 第一種解決方案 解決辦法就是在閉包之外先把this賦值給另一個變量 //可以發現這樣操作就可以解決作用域問題 ``` <pre class="calibre13">``` <span class="token3">changeTitle3</span><span class="token1">(</span><span class="token1">)</span><span class="token1">{</span> <span class="token6">//賦值</span> <span class="token2">var</span> me <span class="token">=</span> <span class="token2">this</span><span class="token1">;</span> uni<span class="token1">.</span><span class="token3">setStorage</span><span class="token1">(</span><span class="token1">{</span> key<span class="token1">:</span> <span class="token4">'storage_key'</span><span class="token1">,</span> data<span class="token1">:</span> <span class="token4">'hello'</span><span class="token1">,</span> success<span class="token1">:</span> <span class="token2">function</span> <span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> me<span class="token1">.</span>title <span class="token">=</span> <span class="token4">"改變標題3"</span><span class="token1">;</span> console<span class="token1">.</span><span class="token3">log</span><span class="token1">(</span><span class="token4">'changeTitle2------success'</span><span class="token1">)</span><span class="token1">;</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">)</span><span class="token1">;</span> <span class="token1">}</span><span class="token1">,</span> ``` ``` 第二種解決方案 使用箭頭函數也可以解決該問題，思考一下這是為什么？ ``` <pre class="calibre14">``` <span class="token3">changeTitle4</span><span class="token1">(</span><span class="token1">)</span><span class="token1">{</span> uni<span class="token1">.</span><span class="token3">setStorage</span><span class="token1">(</span><span class="token1">{</span> key<span class="token1">:</span> <span class="token4">'storage_key'</span><span class="token1">,</span> data<span class="token1">:</span> <span class="token4">'hello'</span><span class="token1">,</span> success<span class="token1">:</span><span class="token1">(</span><span class="token1">)</span> <span class="token">=></span> <span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>title <span class="token">=</span> <span class="token4">"改變標題4"</span><span class="token1">;</span> console<span class="token1">.</span><span class="token3">log</span><span class="token1">(</span><span class="token4">'changeTitle2------success'</span><span class="token1">)</span><span class="token1">;</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">)</span><span class="token1">;</span> <span class="token1">}</span><span class="token1">,</span> ``` ```