zoukankan      html  css  js  c++  java
  • 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依然指向的是实例化的对象

  • 相关阅读:
    序列
    笔算开方法
    笔算开方法
    【AFO】闷声发大财
    P1092 虫食算[搜索]
    数据结构总结
    P1486 [NOI2004]郁闷的出纳员[权值线段树]
    P1850 换教室[dp+期望]
    P4281 [AHOI2008]紧急集合 / 聚会[LCA]
    P5021 赛道修建[贪心+二分]
  • 原文地址:https://www.cnblogs.com/cn-andy/p/8626777.html
Copyright © 2011-2022 走看看