this指向问题

Posted 2020-10-28 学海无涯苦作舟

javascript作为一门面向对象的语言，this的指向一直是最基础，也让大家最头疼的问题，下面就了解一下这个this。this指向最终调用它的那个对象，至于这句话怎么理解，下面就直接来看实例吧！
情景一：

例1
function a () {
　　var user = ‘good‘
　　console.log(this.user) // 返回undefined
　　console.log(this) // 返回window
}
a()

例2
 function a () {
  　　var user = ‘good‘
  　　console.log(this.user) //返回undefined
  　　console.log(this) // 返回window
 }
 window.a()

详解：this指向最终调用它的对象，这里的函数a最终是被window对象所点出来的，例2就是很好的说明。user属性是函数a的局部变量，window上面无法访问到属性user，所以返回的是undefined

情景二：

var o = {
　　user: ‘good‘,
　　fn: function () {
　　　　console.log(this.user) // 返回‘good‘
　　　　console.log(this) // 返回 {user:‘good‘,....}
　　}
}
o.fn()

详解：函数fn是被对象o调用，所以这里的this指向对象o;

情景三：

var o = {
　　user:‘good‘,
　　fn: function () {
　　　　console.log(this.user) // 返回‘good‘
　　　　console.log(this) // 返回{user:‘good‘,....}
　　}
}
window.a.fn()

详解：此处的this并不是指向window,依然是指向a，和情景二的效果一样

总结：
(1)如果函数中有一个this，但是并没有被上一级的对象所调用，那么this指向就是window
(2)如果函数中有一个this，并且被上一级对象所调用，那么this就指向上一级的对象
(3)如果函数中有this，函数中包含多个对象，尽管函数被最外层的对象所调用，this指向的也是它上一级的对象

情景四：

var o = {
　　a: ‘good‘,
　　b: {
　　　　fn: function () {
　　　　　　console.log(this.a) // 返回undefined
　　　　}
　　}
}
o.b.fn()

详解：为什么返回undefined就有很好的解释啦
情景五：

var o = {
　　a: ‘good‘,
　　b: {
　　　　a: ‘day‘,
　　　　fn: function () {
　　　　　　console.log(this) // 返回window
　　　　　　console.log(this.a) // 返回undefined
　　　　}
　　}
}
var m = o.b.fn
m()

详解：this永远指向的是最后调用它的对象，也就是说最后是谁调用的它。函数fn是被对象b所引用，但是又将函数赋值给m，this指向永远都是在调用的时候产生的，并不是在创建的时候就产生的。最后是window调用了这个函数，那么这样所有的返回值就可以解释啦

构建函数中的this
function Fn () {
　　this.name = ‘good‘
}
var o = new Fn()
console.log(a.name) // 返回‘good‘

详解：相信看到上述实例返回的值都没什么好惊讶的，但是为什么会返回这个值呢？是因为关键字new改变了this的指向，将this指向了对象o,并且将这个函数赋值给变量o,所以当读取这个user属性的时候，就能有返回值啦
当this遇到了return

情景六：

function Fn () {
　　this.name = ‘good‘
　　return {} // undefined
　　return function () {} // undefined
　　return 1 // ‘good’
　　return null // ‘good‘
　　return undefined // ‘good‘
}
var o = new Fn ()
console.log(o.name) 

详解：函数里面有this和return，当返回的是对象的时候，this指向返回的对象，如果是非对象的话，this就指向实例化的对象，但是null是个例外，虽然也是对象，但是this依然指向的是实例化的对象