# 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> ``` ```