this指向问题

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依然指向的是实例化的对象

原文地址:https://www.cnblogs.com/cn-andy/p/8626777.html