🐾如何正确判断this
👉我们先运用下面的代码,模拟我们日常生活中常见的三个开发场景,并针对每个场景我们来一 一介绍this的指向
function fun1() {
console.log(this.a)
}
var a = 1
//场景1
fun1()
const obj = {
a: 2,
fun1: fun1
}
//场景2
obj.fun1()
//场景3
const c = new fun1()
1️⃣ 场景1,我们直接调用了fun1
函数,这种情况不管 fun1
放在上面地方,它的this 一定指向window
2️⃣ 场景2,我们通过obj对象去调用了fun1
方法,这时候我们只需要记住谁调用了它,谁就要对它负责,谁就是this,在这里 this 就指向了**obj
**
3️⃣场景3,这里使用 new 关键字创建了一个实例,对于这种方式来说 this 也就被绑定在了 c 的上面
🔱箭头函数的this 指向
🎲 介绍完上面的几种情况相信大家对 this 的指向有了初步的了解,下面我们继续介绍箭头函数 的this 指向问题:
🥇 首先箭头函数其实是没有 this 的,箭头函数中的 this 取决于包裹着箭头函数的最外层普通函数,在下面这个例子中:
function a() {
return () => {
return () => {
console.log(this)
}
}
}
console.log(a()()())
因为包裹着箭头函数的最外层普通函数是fun
,而fun
的this 指向 window ,所以在这里的箭头函数自然 this也是指向了 window。另外对箭头函数使用 bind
这类函数是无效的。
🥇 最后种情况:类似于 bind
这些改变上下文的API,在这些函数中,this 取决于第一个参数,如果第一个参数为空,那么就指向了 window
let obj = {}
let fn = function () { console.log(this) }
fn.bind().bind(obj)()
fn.bind(obj).bind()()
我们还可以把上述代码进一步的转换:
// fn.bind().bind(a) 等于
let fn2 = function fn1() {
return function() {
return fn.apply()
}.apply(obj)
}
fn2()
🍰从上述代码中发现,不管我们给函数 bind
几次,fun 中的this 永远由第一次 bind
决定, 所以结果永远是 window
let obj = { name: 'jscj' }
function fun() {
console.log(this.name)
}
fun.bind(obj)() // => 'jscj'
✌️ 以上就是 this 的规则了,但是可能会发生多个规则同时出现的情况,这时候不同的规则之间会根据优先级最高的来决定 this 最终指向哪里。
💨优先级:
new
的方式优先级最高,接下来是 bind
这些函数,然后是 obj.fun()
这种调用方式,最后是 fun
这种调用方式,同时,箭头函数的 this 一旦被绑定,就不会再被任何方式所改变。
今天的分享就到这里啦,小江会一直与大家一起努力,文章中如有不足之处,你的支持是我前进的最大动力,请多多指教,感谢支持,持续更新中 ……