H5W3
当前位置:H5W3 > 问答 > 正文

js属性方法里面的函数this指向

<div onclick="obj.a()"></div>
<div onclick="a()"></div>
<script>
let obj = {
a(){
alert(this)
function b(){
alert(this)
}
b()
},
}
function a(){
alert(this)
function b(){
alert(this)
}
b()
}
</script>

为什么调用属性方法的时候 a里面的b函数this指向了window,而调用函数的时候a和b都指向window

回答

函数体内的this。由是谁调用的来决定~


let obj = {
    a(){
      alert(this)
      function b(){
        alert(this)
      }
      b()
    },
}
  • 执行obj.a()时,a由obj调用,所以obj.a里面的this为obj
  • b 里面的this,当执行obj.a()执行时,函数体提升,执行b(),相当于window.b(),所以b中this为window。另:由于函数b中无闭包,执行完即释放。
  • b 函数为 箭头函数,则会继承外层函数a的this, 此时b中this会为a

function a(){
    alert(this)
    function b(){
        alert(this)
    }
    b()
}
  • 若执行上述函数方法a() 相当于window.a(),同理。
  • 可以把函数复制在浏览器console控制台,然后输入window.a测验

指向哪里,看调用的时候,如果是 o.b(),一般指向 o,如果是 b()(没有 . 调用),指向全局对象(strict 模式下是 undefined

来来,这篇文章看一下:JavaScript 的 this 指向问题深度解析

a()的this是a(),b的this是b()。

如果要在b()里使用外层a()的this,应该这样:

let obj = {
    a(){
    let that = this  <---- 这里
      alert(this)
      function b(){
        alert(that) <!---- 这里
      }
      b()
    },
  }

可以简单理解 this 为调用函数的对象

this变量取值取决于函数被调用的方式。还是先扫盲

未经允许不得转载:H5W3 » js属性方法里面的函数this指向

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址