箭头函数中this的指向问题
- 箭头函数不会改变this的指向,在它外面拿到的this是什么,它里面获取到的就是什么
- setTimeout方法挂载在window上面,高程中写道,超时调用的代码都是在全局作用域下执行,非严格模式下this指向window对象,严格模式下为undefined
- 老的通过闭包获取this的方法,都可以通过箭头函数来替换
// 箭头函数不会改变this指向
const obj = {
name: 'xcc',
func: function() {
console.log('---1---', this)
},
func1: () => {
console.log('---2---', this)
},
func2: function() {
console.log('---3---', this) // { name: 'xcc', ...}
setTimeout(function() {
console.log('---4---', this)
}, 1000)
},
func3: function() {
setTimeout(() => {
console.log('---5---', this)
}, 1500)
},
func4: function() {
const _this = this
setTimeout(function() {
console.log('---6---', _this)
}, 2000)
}
}
obj.func() // { name: 'xcc', func: [Function: func], func1: [Function: func1] }
// 箭头函数没有this的机制,在箭头函数外面拿到的是什么,在里面拿到的就是什么
obj.func1() // {}
console.log(this) // {}
obj.func2()
// setTimeout方法是挂在window对象下的。《JavaScript高级程序设计》第二版中,
// 写到:“超时调用的代码都是在全局作用域中执行的,因此函数中this的值在非严格模式下指向window对象,在严格模式下是undefined”
// 箭头函数中的this始终都是指向当前作用域的this
obj.func3() // ---5--- { name: 'xcc', ...}
// 采用闭包来获取this
obj.func4() // ---6--- { name: 'xcc', ...}
this的调用究竟取决于什么?
- this的指向取决于调用,而不是定义
- 严格模式下以及浏览器端与node环境下有区别
- 指向原则:沿着作用域向上找最近的一个function,看这个function最终是怎么样执行的
function foo() {
console.log(this)
}
// 普通调用
foo() // => 指向全局(浏览器window,node global),严格模式下undefined
// new 调用
new foo() // new 的时候是当构造函数去调用,此时 this => foo {}
// call/apply/bind
foo.call('111') // => 自己指定this => 111
const obj1 = {
foo: function() {
console.log(this)
}
}
// 情况1
// obj1.foo() // obj1
// 情况2
// const fn = obj1.foo
// 等价于
// const fn = function() {
// console.log(this)
// }
// fn() // fn{}
const obj2 = {
foo: function() {
function bar() {
console.log(this)
}
bar()
}
}
obj2.foo() // this => 全局
const obj3 = {
foo: function() {
console.log(this)
const bar = () => {
console.log(this)
}
bar()
}
}
// 在这里this上面一个function是foo(箭头函数不是普通函数,不改变this的指向,拿到的是箭头函数外面一层的this,因此上面两个this相同),foo是在obj3这里调用的,因此this指向obj3
obj3.foo() // this => obj3