一步理解this的指向问题!
// 0. this对象是函数执行时才有的,它是函数执行上下文的一个对象,上下文中包括this对象、函数参数、作用域链
// 1. 箭头函数的this: 箭头函数没有自己的this,它的this指向到该函数定义时所在的区域的this
// 2. 显式指定的this: call apply bind
// 3. 通过对象调用的方法的this: 指向调用函数的对象
// 4. 直接执行某个函数的this: 不管这个函数从哪来,它的this指向全局对象,在严格模式全局是undefined,非严格模式下浏览器环境是window,node环境是global。使用es6模块的代码默认开启了严格模式
// 5. 匿名函数的this: 匿名函数this对象指向全局对象,在严格模式全局是undefined,非严格模式下浏览器环境是window,node环境是global。使用es6模块的代码默认开启了严格模式
// 5.1 如果使用setTimeout setInterval内定义的匿名函数,他们的this对象在浏览器下永远都是window
'use strict'
const obj1 = {
a: 1,
f1: function () {
console.log('f1 this: ', this.a)
const f2 = () => {
console.log('f2 this: ', this.a)
}
f2()
},
}
let f3 = () => {
console.log('f3 this', this)
}
obj1.f1()
f3()
// 2============
const obj2 = {
a: 2,
f1: function (a, b, c, d, e, f) {
console.log('obj2 f1 this: ', this)
console.log('obj2 f1 参数: ', arguments)
console.log('obj2 f1 参数: ', a, b, c, d)
},
f7: function () {
;(function () {
console.log('f7内的匿名函数 this: ', this)
})()
setTimeout(function () {
console.log('f7内的setTimeout的匿名函数this: ', this)
}, 1000)
setTimeout(() => {
console.log('f7内的setTimeout的箭头函数this: ', this)
}, 1000)
},
}
console.log('-------------obj2 f1')
obj2.f1()
// call apply共同点: 执行函数时指定这个函数的this对象,第一个参数指定this对象
// call apply不同点: call方法传递参数需要逐个传递,apply传递参数使用数组
// call比apply方法性能要好, 但是apply使用起来方便
obj2.f1.call(obj1, 1, 2, 3)
obj2.f1.apply(obj1, [1, 2, 3, 4])
console.log('-----------------f4')
// bind方法指定函数的this对象,但是不执行函数,同时返回指定好this对象的后的函数
// 如下: f4是对obj2.f1函数的this明确指定后的函数,f4的函数体内容和obj2.f1的内容完全一样
let f4 = obj2.f1.bind(obj1)
f4()
let f5 = obj2.f1
console.log('-----------------f5')
f5()
function f6() {
console.log('f6 this', this)
}
console.log('-----------------f6')
f6()
console.log('-----------------f7')
obj2.f7()
现在总结三句话,来完全理解this的指向问题:
情况一:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window(除去严格模式外)。
情况二:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
情况三:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象