JavaScript This 的六道坎

   <p>鉴于 this 风骚的运作方式，对 this 的理解是永不过时的话题，本文试图通过将其大卸六块来钉住这个磨人的妖精。</p>    <h2>首先</h2>    <p>this   is all about context.</p>    <p>this 说白了就是找大佬，找拥有当前上下文（context）的对象（context object）。</p>    <p>大佬可以分为六层，层数越高权力越大， this 只会认最大的。</p>    <h2>第一层：世界尽头</h2>    <p>权力最小的大佬是作为备胎的存在，在普通情况下就是全局，浏览器里就是 window ；在 use strict 的情况下就是 undefined 。</p>    <pre>  <code class="language-javascript">function showThis () {  console.log(this)  }     function showStrictThis () {  'use strict'  console.log(this)  }     showThis() // window  showStrictThis() // undefined  </code></pre>    <h2>第二层：点石成金</h2>    <p>第二层大佬说白了就是找这个函数前面的点 . 。</p>    <p>如果用到 this 的那个函数是属于某个 context object 的，那么这个 context object 绑定到 this 。</p>    <p>比如下面的例子， boss 是 returnThis 的 context object ，或者说 returnThis 属于 boss 。</p>    <pre>  <code class="language-javascript">var boss = {  name: 'boss',  returnThis () {  return this  }  }     boss.returnThis() === boss // true  </code></pre>    <p>下面这个例子就要小心点咯，能想出答案么？</p>    <pre>  <code class="language-javascript">var boss1 = {  name: 'boss1',  returnThis () {  return this  }  }     var boss2 = {  name: 'boss2',  returnThis () {  return boss1.returnThis()  }  }     var boss3 = {  name: 'boss3',  returnThis () {  var returnThis = boss1.returnThis  return returnThis()  }  }     boss1.returnThis() // boss1  boss2.returnThis() // ?  boss3.returnThis() // ?  </code></pre>    <p>答案是 boss1 和 window 哦，猜对了吗。</p>    <p>只要看使用 this 的那个函数。</p>    <p>在 boss2.returnThis 里，使用 this 的函数是 boss1.returnThis ，所以 this 绑定到 boss1 ；</p>    <p>在 boss3.returnThis 里，使用 this 的函数是 returnThis ，所以 this 绑定到备胎。</p>    <p>要想把 this 绑定到 boss2 怎么做呢？</p>    <pre>  <code class="language-javascript">var boss1 = {  name: 'boss1',  returnThis () {  return this  }  }     var boss2 = {  name: 'boss2',  returnThis: boss1.returnThis  }     boss2.returnThis() //boss2  </code></pre>    <p>没错，只要让使用 this 的函数是属于 boss2 就行。</p>    <h2>第三层：指腹为婚</h2>    <p>第三层大佬是 Object.prototype.call 和 Object.prototype.apply ，它们可以通过参数指定 this 。（注意 this 是不可以直接赋值的哦， this = 2 会报 ReferenceError 。）</p>    <pre>  <code class="language-javascript">function returnThis () {  return this  }     var boss1 = { name: 'boss1' }     returnThis() // window  returnThis.call(boss1) // boss1  returnThis.apply(boss1) // boss1  </code></pre>    <h2>第四层：海誓山盟</h2>    <p>第四层大佬是 Object.prototype.bind ，他不但通过一个新函数来提供永久的绑定，还会覆盖第三层大佬的命令。</p>    <pre>  <code class="language-javascript">function returnThis () {  return this  }     var boss1 = { name: 'boss1'}     var boss1returnThis = returnThis.bind(boss1)     boss1returnThis() // boss1     var boss2 = { name: 'boss2' }  boss1returnThis.call(boss2) // still boss1  </code></pre>    <h2>第五层：内有乾坤</h2>    <p>一个比较容易忽略的会绑定 this 的地方就是 new 。当我们 new 一个函数时，就会自动把 this 绑定在新对象上，然后再调用这个函数。它会覆盖 bind 的绑定。</p>    <pre>  <code class="language-javascript">function showThis () {  console.log(this)  }     showThis() // window  new showThis() // showThis     var boss1 = { name: 'boss1' }  showThis.call(boss1) // boss1  new showThis.call(boss1) // TypeError     var boss1showThis = showThis.bind(boss1)  boss1showThis() // boss1  new boss1showThis() // showThis  </code></pre>    <h2>第六层：军令如山</h2>    <p>最后一个法力无边的大佬就是 ES2015 的箭头函数。箭头函数里的 this 不再妖艳，被永远封印到当前词法作用域之中，称作 Lexical this ，在代码运行前就可以确定。没有其他大佬可以覆盖。</p>    <p>这样的好处就是方便让回调函数的 this 使用当前的作用域，不怕引起混淆。</p>    <p>所以对于箭头函数，只要看它在哪里创建的就行。</p>    <p>如果对 V8 实现的词法作用域感兴趣可以看看 <a href="/misc/goto?guid=4959736516059846343" rel="nofollow,noindex"> 这里 </a> 。</p>    <pre>  <code class="language-javascript">function callback (cb) {  cb()  }     callback(() => { console.log(this) }) // window     var boss1 = {  name: 'boss1',  callback: callback,  callback2 () {  callback(() => { console.log(this) })  }  }     boss1.callback(() => { console.log(this) }) // still window  boss1.callback2(() => { console.log(this) }) // boss1  </code></pre>    <p>下面这种奇葩的使用方式就需要注意：</p>    <pre>  <code class="language-javascript">var returnThis = () => this     returnThis() // window  new returnThis() // TypeError     var boss1 = {  name: 'boss1',  returnThis () {  var func = () => this  return func()  }  }     returnThis.call(boss1) // still window     var boss1returnThis = returnThis.bind(boss1)  boss1returnThis() // still window     boss1.returnThis() // boss1     var boss2 = {  name: 'boss2',  returnThis: boss1.returnThis  }     boss2.returnThis() // boss2  </code></pre>    <p>如果你不知道最后为什么会是 boss2，继续理解“对于箭头函数，只要看它在哪里创建”这句话。</p>    <h2>参考</h2>    <ol>     <li>Mozilla Developer Network</li>     <li>Kyle Simpson,   <em>this & object prototypes</em></li>     <li>Axel Rauschmayer,   <em>Speaking JavaScript</em></li>    </ol>    <p> </p>    <p>来自：http://www.linuxeden.com/html/news/20170209/167944.html</p>    <p> </p>