|
|
this-想说爱你不容易发表于 2016-12-31 | 暂无评论 | 阅读次数 484
前言javascript中的this是啥东西？为啥我们经常被他搞得晕头转向不知所以？他是恶魔？是天使 ？是怪胎？让我们一起来揭开它那神秘的面纱。
他是个啥首先this是Javascript语言的关键字之一，指函数运行时的当前对象。那既然和函数运行有关，js中函数有哪些调用模式呢？
- 纯粹的函数调用
- 对象的方法调用
- 构造函数调用
- apply、call调用
我擦，有木有一千只草泥马在心里蹦腾不息，人家是要弄懂this，你这又是整的哪一出 我们慢慢来，一步步从这些调用模式中探究this这个神奇的远古神兽 纯粹的函数调用函数调用 即 functionName () 模式，这也是我们使用的最多的一种方式，其属于全局调用，浏览中默认情况下函数内部的this指向window，当然是在非严格模式下。
- <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div><div class="line" style="height: 20px;">10</div><div class="line" style="height: 20px;">11</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name = <span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>;</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> <span class="title" style="color: rgb(102, 204, 204);">showName</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{</span></div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name);</div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span> === <span class="built_in" style="color: rgb(249, 145, 87);">window</span>);</div><div class="line" style="height: 20px;">}</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">showName() </div><div class="line" style="height: 20px;"> </div><div class="line" style="height: 20px;"><span class="comment" style="color: rgb(153, 153, 153);">// qianlong</span></div><div class="line" style="height: 20px;"><span class="comment" style="color: rgb(153, 153, 153);">// true</span></div></div></div></pre></td></tr></tbody></table>
对象的方法调用当一个函数作为对象的某个属性方法被调用的时候
- <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> obj = {</div><div class="line" style="height: 20px;"> <span class="attr">name</span>: <span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>,</div><div class="line" style="height: 20px;"> <span class="attr">showName</span>: <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{</span></div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name);</div><div class="line" style="height: 20px;"> }</div><div class="line" style="height: 20px;">};</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">obj.showName();</div><div class="line" style="height: 20px;"><span class="comment" style="color: rgb(153, 153, 153);">// qianlong</span></div></div></pre></td></tr></tbody></table>
可以看出this指向是obj这个对象，其实本质上讲函数调用形式内部this就是指向调用它的那个对象 上面的例子相当于 这也是为什么可以读取到全局定义的name属性的原因。 再来 - <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> showName = <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{</span></div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name);</div><div class="line" style="height: 20px;"> },</div><div class="line" style="height: 20px;"> obj = {</div><div class="line" style="height: 20px;"> <span class="attr">name</span>: <span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>,</div><div class="line" style="height: 20px;"> <span class="attr">showName</span>: showName</div><div class="line" style="height: 20px;"> };</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"> obj.showName();</div></div></pre></td></tr></tbody></table>
这个时候输出的是什么呢 结果是不变的，在js中，一切都是对象，而这里也只是将，obj的showName属性指向，showNmae函数的引用地址。 继续 当我们把showName方法赋值给了一个变量，又会有什么事情发生呢？ - <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div><div class="line" style="height: 20px;">10</div><div class="line" style="height: 20px;">11</div><div class="line" style="height: 20px;">12</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> obj = {</div><div class="line" style="height: 20px;"> <span class="attr">name</span>: <span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>,</div><div class="line" style="height: 20px;"> <span class="attr">showName</span>: <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{</span></div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name);</div><div class="line" style="height: 20px;"> }</div><div class="line" style="height: 20px;">};</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> tempShowName = obj.showName;</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">tempShowName()</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="comment" style="color: rgb(153, 153, 153);">// undefined</span></div></div></div></div></pre></td></tr></tbody></table>
为什么不是期望的那样输出 qianlong呢。obj的showName方法是一个对象，当把它赋值给了tempShowName变量，此时便和obj没有什么关系了，而这个时候的调用和下面是等价的。 window上此事并没有name属性，自然输出是undefined。 构造函数调用当使用 new 去调用一个构造函数的时候，内部的this，指向的是实例化出来的对象。
- <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> Person = <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">name, sex</span>) </span>{</div><div class="line" style="height: 20px;"> <span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name = name;</div><div class="line" style="height: 20px;"> <span class="keyword" style="color: rgb(204, 153, 204);">this</span>.sex = sex;</div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>);</div><div class="line" style="height: 20px;">};</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> p1 = <span class="keyword" style="color: rgb(204, 153, 204);">new</span> Person(<span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>, <span class="string" style="color: rgb(153, 204, 153);">'boy'</span>);</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="comment" style="color: rgb(153, 153, 153);">// Person {name: 'qianlong', sex: 'boy'};</span></div></div></div></pre></td></tr></tbody></table>
构造函数也是函数，所以当你用普通调用方式调用时 - <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div><div class="line" style="height: 20px;">10</div><div class="line" style="height: 20px;">11</div><div class="line" style="height: 20px;">12</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> Person = <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">name, sex</span>) </span>{</div><div class="line" style="height: 20px;"> <span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name = name;</div><div class="line" style="height: 20px;"> <span class="keyword" style="color: rgb(204, 153, 204);">this</span>.sex = sex;</div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>);</div><div class="line" style="height: 20px;">};</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">Person(<span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>, <span class="string" style="color: rgb(153, 204, 153);">'boy'</span>);</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="comment" style="color: rgb(153, 153, 153);">// 这个时候相当于给window对象添加了name和sex两个属性。</span></div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="built_in" style="color: rgb(249, 145, 87);">window</span>.name <span class="comment" style="color: rgb(153, 153, 153);">// 'qianlong'</span></div><div class="line" style="height: 20px;"><span class="built_in" style="color: rgb(249, 145, 87);">window</span>.sex <span class="comment" style="color: rgb(153, 153, 153);">// 'boy'</span></div></div></div></div></pre></td></tr></tbody></table>
apply、call调用使用call和apply方式去调用一个函数的时候，内部的this指向的是传进来的第一个参数，当第一个参数是undefined或者null的时候，依旧指向window
关于call和apply欢迎查看另一篇文章 - <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> showName = <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{</span></div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>);</div><div class="line" style="height: 20px;"> };</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">showName() <span class="comment" style="color: rgb(153, 153, 153);">// window</span></div><div class="line" style="height: 20px;">showName.call(<span class="literal" style="color: rgb(249, 145, 87);">undefined</span>) <span class="comment" style="color: rgb(153, 153, 153);">// window</span></div><div class="line" style="height: 20px;">showName.call(<span class="literal" style="color: rgb(249, 145, 87);">null</span>) <span class="comment" style="color: rgb(153, 153, 153);">// window</span></div><div class="line" style="height: 20px;">showName.call({<span class="attr">name</span>: <span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>}) <span class="comment" style="color: rgb(153, 153, 153);">// {name: 'qianlong'}</span></div></div></pre></td></tr></tbody></table>
箭头函数在 ES6 的新规范中，加入了箭头函数，它和普通函数最不一样的一点就是 this 的指向，普通函数中的this，是运行时候决定的，而箭头函数却是定义时候就决定了。
- <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div><div class="line" style="height: 20px;">10</div><div class="line" style="height: 20px;">11</div><div class="line" style="height: 20px;">12</div><div class="line" style="height: 20px;">13</div><div class="line" style="height: 20px;">14</div><div class="line" style="height: 20px;">15</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> obj = {</div><div class="line" style="height: 20px;"> <span class="attr">name</span>: <span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>,</div><div class="line" style="height: 20px;"> <span class="attr">showName</span>: <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{</span></div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name);</div><div class="line" style="height: 20px;"> },</div><div class="line" style="height: 20px;"> <span class="attr">showNameLater</span>: <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{</span></div><div class="line" style="height: 20px;"> setTimeout(<span class="function" style="color: rgb(102, 153, 204);"><span class="params" style="color: rgb(249, 145, 87);">()</span> =></span> {</div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name);</div><div class="line" style="height: 20px;"> }, <span class="number" style="color: rgb(153, 204, 153);">1000</span>)</div><div class="line" style="height: 20px;"> } </div><div class="line" style="height: 20px;">};</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">obj.showNameLater();</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="comment" style="color: rgb(153, 153, 153);">// qianlong</span></div></div></div></pre></td></tr></tbody></table>
- <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> obj = {</div><div class="line" style="height: 20px;"> <span class="attr">name</span>: <span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>,</div><div class="line" style="height: 20px;"> <span class="attr">showName</span>: <span class="function" style="color: rgb(102, 153, 204);"><span class="params" style="color: rgb(249, 145, 87);">()</span> =></span> {</div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name);</div><div class="line" style="height: 20px;"> }</div><div class="line" style="height: 20px;">};</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">obj.showName();</div></div></pre></td></tr></tbody></table>
一些坑 - <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div><div class="line" style="height: 20px;">10</div><div class="line" style="height: 20px;">11</div><div class="line" style="height: 20px;">12</div><div class="line" style="height: 20px;">13</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> obj = {</div><div class="line" style="height: 20px;"> <span class="attr">name</span>: <span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>,</div><div class="line" style="height: 20px;"> <span class="attr">showName</span>: <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{</span></div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name);</div><div class="line" style="height: 20px;"> },</div><div class="line" style="height: 20px;"> <span class="attr">showNameLater</span>: <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{ </span></div><div class="line" style="height: 20px;"> setTimeout(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>.showName, <span class="number" style="color: rgb(153, 204, 153);">1000</span>);</div><div class="line" style="height: 20px;"> }</div><div class="line" style="height: 20px;">};</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">obj.showNameLater();</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="comment" style="color: rgb(153, 153, 153);">// undefined</span></div></div></div></pre></td></tr></tbody></table>
这里在执行setTimeout这个函数的时候传了obj的showName函数作为第一个参数，其效果与 1
| var showName = obj.showName
|
是相同的。而setTimeout内部其实也是执行了传进去这个函数而已，即。 还记得这种调用方式和window.showName()是类似的效果吗？这个时候输入为undefined也就好理解了。 那么怎么解决这个问题呢，毕竟我们期望的效果是输出qianlong。 - <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div><div class="line" style="height: 20px;">10</div><div class="line" style="height: 20px;">11</div><div class="line" style="height: 20px;">12</div><div class="line" style="height: 20px;">13</div><div class="line" style="height: 20px;">14</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> obj = {</div><div class="line" style="height: 20px;"> <span class="attr">name</span>: <span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>,</div><div class="line" style="height: 20px;"> <span class="attr">showName</span>: <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{</span></div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name);</div><div class="line" style="height: 20px;"> },</div><div class="line" style="height: 20px;"> <span class="attr">showNameLater</span>: <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{ </span></div><div class="line" style="height: 20px;"> <span class="keyword" style="color: rgb(204, 153, 204);">var</span> self = <span class="keyword" style="color: rgb(204, 153, 204);">this</span>;</div><div class="line" style="height: 20px;"> setTimeout(<span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{</span></div><div class="line" style="height: 20px;"> self.showName();</div><div class="line" style="height: 20px;"> }, <span class="number" style="color: rgb(153, 204, 153);">1000</span>);</div><div class="line" style="height: 20px;"> }</div><div class="line" style="height: 20px;">};</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">obj.showNameLater();</div></div></pre></td></tr></tbody></table>
或者 - <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div><div class="line" style="height: 20px;">10</div><div class="line" style="height: 20px;">11</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> obj = {</div><div class="line" style="height: 20px;"> <span class="attr">name</span>: <span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>,</div><div class="line" style="height: 20px;"> <span class="attr">showName</span>: <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{</span></div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name);</div><div class="line" style="height: 20px;"> },</div><div class="line" style="height: 20px;"> <span class="attr">showNameLater</span>: <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">) </span>{ </span></div><div class="line" style="height: 20px;"> setTimeout(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>.showName.bind(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>), <span class="number" style="color: rgb(153, 204, 153);">1000</span>);</div><div class="line" style="height: 20px;"> }</div><div class="line" style="height: 20px;">};</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">obj.showNameLater();</div></div></pre></td></tr></tbody></table>
尼玛坑爹啊，居然还是因为你。
- <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="meta">'use strict'</span>;</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> <span class="title" style="color: rgb(102, 204, 204);">show</span>(<span class="params" style="color: rgb(249, 145, 87);">) </span>{</span></div><div class="line" style="height: 20px;"> <span class="built_in" style="color: rgb(249, 145, 87);">console</span>.log(<span class="keyword" style="color: rgb(204, 153, 204);">this</span>);</div><div class="line" style="height: 20px;">}</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">show(); <span class="comment" style="color: rgb(153, 153, 153);">// undefined </span></div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">setTimeout(show, <span class="number" style="color: rgb(153, 204, 153);">1</span>); <span class="comment" style="color: rgb(153, 153, 153);">// window</span></div></div></div></div></pre></td></tr></tbody></table>
在严格模式下面，函数调用的时候没有指定this的情况下，内部this的表现为undefined,但是setTimeout却不同，其内部默认还是指向window。 - <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> Person = <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">name, sex</span>) </span>{</div><div class="line" style="height: 20px;"> <span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name = name;</div><div class="line" style="height: 20px;"> <span class="keyword" style="color: rgb(204, 153, 204);">this</span>.sex = sex;</div><div class="line" style="height: 20px;">};</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> p1 = <span class="keyword" style="color: rgb(204, 153, 204);">new</span> Person.call({});</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="comment" style="color: rgb(153, 153, 153);">// Uncaught TypeError: Person.call is not a constructor</span></div></div></div></pre></td></tr></tbody></table>
这里报错了，原因是我们去 new 了 Person.call 函数 ，这里的函数不是一个构造函数； 当然解决方式也是有的。 - <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> Person = <span class="function" style="color: rgb(102, 153, 204);"><span class="keyword" style="color: rgb(204, 153, 204);">function</span> (<span class="params" style="color: rgb(249, 145, 87);">name, sex</span>) </span>{</div><div class="line" style="height: 20px;"> <span class="keyword" style="color: rgb(204, 153, 204);">this</span>.name = name;</div><div class="line" style="height: 20px;"> <span class="keyword" style="color: rgb(204, 153, 204);">this</span>.sex = sex;</div><div class="line" style="height: 20px;">};</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="keyword" style="color: rgb(204, 153, 204);">var</span> p1 = <span class="keyword" style="color: rgb(204, 153, 204);">new</span> (Person.bind({}))(<span class="string" style="color: rgb(153, 204, 153);">'qianlong'</span>, <span class="string" style="color: rgb(153, 204, 153);">'sex'</span>);</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;"><span class="comment" style="color: rgb(153, 153, 153);">// Person {name: "qianlong", sex: "sex"}</span></div></div></div></pre></td></tr></tbody></table>
- <table style="border-spacing: 0px; width: auto; border: none; font-size: 14px; table-layout: fixed;"><tbody><tr style="background-color: rgb(249, 249, 249);"><td class="gutter" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px="" 20px="" 1px;="" color:="" rgb(102,="" 102,="" 102);="" line-height:="" 1.6;="" border:="" none;="" text-align:="" right;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">1</div><div class="line" style="height: 20px;">2</div><div class="line" style="height: 20px;">3</div><div class="line" style="height: 20px;">4</div><div class="line" style="height: 20px;">5</div><div class="line" style="height: 20px;">6</div><div class="line" style="height: 20px;">7</div><div class="line" style="height: 20px;">8</div><div class="line" style="height: 20px;">9</div><div class="line" style="height: 20px;">10</div><div class="line" style="height: 20px;">11</div><div class="line" style="height: 20px;">12</div></pre></td><td class="code" style="padding: 0px; text-align: left; vertical-align: middle; border: none;"><pre style="overflow: auto; font-family: consolas, Menlo, " pingfang="" sc",="" "microsoft="" yahei",="" monospace;="" font-size:="" 13px;="" padding:="" 1px;="" line-height:="" 1.6;="" border:="" none;="" background:="" rgb(45,="" 45,="" 45);"=""><div class="line" style="height: 20px;">var show = (str) => {</div><div class="line" style="height: 20px;"> console.log(str);</div><div class="line" style="height: 20px;"> console.log(this);</div><div class="line" style="height: 20px;">};</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">show('qianlong');</div><div class="line" style="height: 20px;">// qianlong</div><div class="line" style="height: 20px;">// window</div><div class="line" style="height: 20px;"><div class="line" style="height: 20px;">show.call({name: 'qianlong'}, 'qianlong');</div><div class="line" style="height: 20px;">// qianlong</div><div class="line" style="height: 20px;">// window</div></div></div></pre></td></tr></tbody></table>
可以看到使用call来手动改变箭头函数中的this的时候，无法成功。 箭头函数中的 this 在定义它的时候已经决定了（执行定义它的作用域中的 this），与如何调用以及在哪里调用它无关，包括 (call, apply, bind) 等操作都无法改变它的 this。 结语文章可能有些疏漏与错误之处，欢迎各位指正。
|
|
发新帖
窥视卡
雷达卡
发表于 2017-1-4 15:20:00
收藏
转播
淘帖
赞一个
踩一下
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
