首先注意一点:this取什么值是在函数执行的时候被确定的,不是在定义的时候被确定的【非常重要】
下面是5种赋值情况,大家可以再自己电脑上写一写打印出来看看
1.作为普通函数被调用
function fn(){
console.log(this) // window
}
fn() // window
2.作为对象方法被调用
const zhangsan = {
name:'张三',
sayHi(){
console.log(this) // this是zhangsan这个对象,因为是zhangsan.sayHi()被执行
},
wait(){
setTimeout(function(){
console.log(window) //this===window 因为setTimeOut之后当这个方法被执行时候,就是再window下面执行的
})
},
waitAgain(){
setTimeOut(()=>{
console.log(this) // zhangsan 箭头函数的this指向上级作用域的this
})
}
}
3.再class方法中被调用
class People{
constructor(){
this.name = name; // this 创建的实例
this.age = 20;
}
sayHi(){ console.log(this) } // this就是zhangsan这个实例
}
const zhangsan = new People('zhangsan')
zhangsan.sayHi() // zhangsan对象
4.箭头函数
箭头函数的this指向上级作用域的this
5.使用call apply bind 被调用
fn1.call({x:100}) // this是{x:100} 调用的对象
const fn2 = fn1.bind( {x:200})
fn2() // this 是 {x:200} 调用的对象
下面我们先来看几个函数调用的场景
function foo() {
console.log(this.a)
}
var a = 1
foo() // 1 window.a =1
const obj = {
a: 2,
foo: foo
}
obj.foo() // 2 obj.a=2
const c = new foo() //undefined
接下来我们一个个分析上面几个场景
- 【1】对于
直接调用 foo
来说,不管foo
函数被放在了什么地方,this
一定是window
- 【2】对于
obj.foo()
来说,谁调用了函数,谁就是this
, - 【3】对于
new
的方式来说,this
被永远绑定在了c
【实例】上面,不会被任何方式改变this
说完了以上几种情况,其实很多代码中的 this
应该就没什么问题了,下面让我们看看箭头函数中的 this
a = function () {
return () => {
return () => {
console.log(this)
}
}
}
console.log(a()()())
- 【4】箭头函数其实是没有
this
的,箭头函数中的this
只取决包裹箭头函数的第一个普通函数的this
。
在这个例子中,因为包裹箭头函数的第一个普通函数是 a
,所以此时的 this
是 window
。另外对箭头函数使用 bind
这类函数是无效的。
- 【5】最后种情况也就是
bind
这些改变上下文的 API 了,对于这些函数来说,this
取决于第一个参数,如果第一个参数为空,那么就是window
。 那么说到bind
,不知道大家是否考虑过,如果对一个函数进行多次bind
,那么上下文会是什么呢?
let a = {}
let fn = function () { console.log(this) }
fn.bind().bind(a)() // => ?
如果你认为输出结果是 a
,那么你就错了,其实我们可以把上述代码转换成另一种形式
// fn.bind().bind(a) 等于
let fn2 = function fn1() {
return function() {
return fn.apply() // 第一步
}.apply(a) // 第二步
}
fn2()
可以从上述代码中发现,不管我们给函数 bind
几次,fn
中的 this
永远由第一次 bind
决定,所以结果永远是 window
。
let a = { name: 'yck' }
function foo() {
console.log(this.name)
}
foo.bind(a)() // => 'yck'
以上就是 this
的规则了,但是可能会发生多个规则同时出现的情况,这时候不同的规则之间会根据优先级最高的来决定 this
最终指向哪里。
首先,new
的方式优先级最高,接下来是 bind
这些函数,然后是 obj.foo()
这种调用方式,最后是 foo
这种调用方式,同时,箭头函数的 this
一旦被绑定,就不会再被任何方式所改变。
如果你还是觉得有点绕,那么就看以下的这张流程图吧,图中的流程只针对于单个规则。
流程图
总结
1.普通函数直接调用,就是window
2.谁调用就是谁; 作为对象方法被调用
3.new的话就是实例
4.箭头函数就是上一级this
5.call、apply、bind永远是第一次传的参数决定