【JavaScript】this指向的问题

本文主要是介绍【JavaScript】this指向的问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

this指向不是在创建时指定的，而是由最后调用它的对象决定的。

全局对象的this

在非严格模式下，this指向window；在严格模式下，this指向undefined。

1）简单版

function f1 () {console.log(this)
}
function f2 () {'use strict'console.log(this)
}f1() // window
f2() // undefined

2）赋值版

const foo = {bar: 10,fn: function() {console.log(this)console.log(this.bar)}
}var fn1 = foo.fn
fn1()

foo.fn在赋值给fn1后，fn1仍然是在window的全局环境下执行的，因此输出

// window
// undefined

其结果与以下语句等价：

console.log(window)
console.log(window.bar)

上下文对象调用中的this

一般通过上下文对象调用函数时，函数体内的this会被绑定到该对象上。

const student = {name: 'Lucas',fn: function() {return this}
}console.log(student.fn() === student) // true

当存在更复杂的调用关系时，this会指向最后调用它的对象。

const person = {name: 'Lucas',brother: {name: 'Mike',fn: function() {return this.name}}
}console.log(person.brother.fn()) // Mike

箭头函数中的this

箭头函数中的this指向是由其所属函数或全局作用域来决定的。

const foo = {fn: function() {setTimeout(function() {console.log(this)})}
}console.log(foo.fn())

在这段代码中，this出现在setTimeout的匿名函数中，因此this指向window对象。

如果需要让this指向foo这个对象，则可以巧用箭头函数来解决，代码如下：

const foo = {fn: function() {setTimeout(() => {console.log(this)})}
}console.log(foo.fn()) // { fn: f }

除了巧用箭头函数外，

也可以复制当前对象的this指向到一个新的变量（如that）中。【JavaScript】var that = this

---

最后，看一个综合例子：

const obj = {fn() {console.log(this)const f = () => {console.log(this)}f()}
}obj.fn()
const fn = obj.fn
fn()

const f = () => { 这里因为巧用箭头函数，所以this指向是跟fn里的console.log(this)是一样的。

obj.fn()的最后调动对象是obj，所以this指向obj。

fn() 的最后调用对象是window，所以this指向window

其输出结果如下：

// { fn: f }
// { fn: f }
// window
// window

这篇关于【JavaScript】this指向的问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---