浅谈this指向

最新推荐文章于 2024-07-10 00:06:42 发布

转载最新推荐文章于 2024-07-10 00:06:42 发布 · 185 阅读

文章标签：

#this #JavaScript

JS小点专栏收录该内容

21 篇文章

订阅专栏

本文深入解析JavaScript中this关键字的绑定规则，从基本的全局环境到复杂的箭头函数场景，覆盖了六种主要的绑定类型，帮助开发者更好地理解和掌握this的工作原理。

首先

this is all about context.

this说白了就是找大佬，找拥有当前上下文（context）的对象（context object）。

大佬可以分为六层，层数越高权力越大，this只会认最大的。

第一层：世界尽头

权力最小的大佬是作为备胎的存在，在普通情况下就是全局，浏览器里就是window；在use strict的情况下就是undefined。

function showThis () {
  console.log(this)
}
function showStrictThis () {
  'use strict'
  console.log(this)
}
showThis() // window
showStrictThis() // undefined

第二层：点石成金

第二层大佬说白了就是找这个函数前面的点.。

如果用到this的那个函数是属于某个 context object 的，那么这个 context object 绑定到this。

比如下面的例子，boss是returnThis的 context object ，或者说returnThis属于boss。

var boss = {
  name: 'boss',
  returnThis () {
    return this
  }
}
boss.returnThis() === boss // true

下面这个例子就要小心点咯，能想出答案么？

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() // ?

答案是boss1和window哦，猜对了吗。

只要看使用this的那个函数。

在boss2.returnThis里，使用this的函数是boss1.returnThis，所以this绑定到boss1；

在boss3.returnThis里，使用this的函数是returnThis，所以this绑定到window。

这里可能比较难懂，在boss3的returnthis函数里面声明了一个变量叫returnthis，为他赋值为boss1的returnthis函数对象地址，这里调用returnthis这个函数就不是boss3对象在调用了（boss3只调用了它自己声明了的函数），而是全局在调用，所以对象函数里面的函数的this指向window

要想把this绑定到boss2怎么做呢？

var boss1 = {
  name: 'boss1',
  returnThis () {
    return this
  }
}
var boss2 = {
  name: 'boss2',
  returnThis: boss1.returnThis
}
boss2.returnThis() //boss2

没错，只要让使用this的函数是属于boss2就行。

这里最主要要注意写的是boss1.returnthis，而不是returnthis(),后者表示立即执行，那么立即执行的函数里面的this还是指向boss1，因为是boss1在调用函数。不加括号的意思则是把这个函数对象的地址给returnthis这个变量，当boss2调用这个变量指定的函数时，函数里面的this就指向boss2

第三层：指腹为婚

第三层大佬是Object.prototype.call和Object.prototype.apply，它们可以通过参数指定this。它们之间的区别：call的参数是,号隔开的，apply可以接受数组作为参数（注意this是不可以直接赋值的哦，this = 2会报ReferenceError。）

function returnThis () {
return this
}
var boss1 = { name: 'boss1' }
returnThis() // window
returnThis.call(boss1) // boss1
returnThis.apply(boss1) // boss1

第四层：海誓山盟

第四层大佬是Object.prototype.bind，他不但通过一个新函数来提供永久的绑定，还会覆盖第三层大佬（call、apply）的命令。

function returnThis () {
return this
}
var boss1 = { name: 'boss1'}
var boss1returnThis = returnThis.bind(boss1)
boss1returnThis() // boss1
var boss2 = { name: 'boss2' }
boss1returnThis.call(boss2) // still boss1

第五层：内有乾坤

一个比较容易忽略的会绑定this的地方就是new。当我们new一个函数时，就会自动把this绑定在新对象上，然后再调用这个函数。它会覆盖bind的绑定。直接new showThis()会立即执行函数，并将函数里的this绑定到函数名变量上

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

第六层：军令如山

最后一个法力无边的大佬就是 ES2015 的箭头函数。箭头函数里的this不再妖艳，被永远封印到当前词法作用域之中，称作 Lexical this ，在代码运行前就可以确定。没有其他大佬可以覆盖。

这样的好处就是方便让回调函数的this使用当前的作用域，不怕引起混淆。

所以对于箭头函数，只要看它在哪里创建的就行。

如果对 V8 实现的词法作用域感兴趣可以看看这里。

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 我的理解：因为callback是在全局作用域中创建的，所以执行它里面的函数的this也是指向window
boss1.callback2(() => { console.log(this) }) // boss1 我的理解：相当于是在boss1里面又创建了一个箭头函数，那么这个箭头函数指向boss1

下面这种奇葩的使用方式就需要注意：

var returnThis = () => this //在window中创建
returnThis() // window
new returnThis() // TypeError
var boss1 = {
  name: 'boss1',
  returnThis () { //在boss1中创建
    var func = () => this
    return func()
  }
}
returnThis.call(boss1) // still window
var boss1returnThis = returnThis.bind(boss1)
boss1returnThis() // still window call和apply不改变箭头函数里面的this的指向
boss1.returnThis() // boss1
var boss2 = {
  name: 'boss2',
  returnThis: boss1.returnThis //returnThis在boss2中创建
}
boss2.returnThis() // boss2