3.this 指向

要成为光的女人

于 2022-11-14 20:40:35 发布

阅读量136

点赞数

分类专栏： ES6 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_51614564/article/details/127853787

版权

ES6 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了JavaScript中不同场景下this的指向，包括全局作用域、普通函数调用、事件处理和构造函数。特别强调了箭头函数中this的特性，即它没有自己的this，会向上查找。通过实例展示了在函数内部如何判断this，并提供了练习帮助理解this的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.全局作用域的this 指向

console.log(this);//window

2.一般函数（非箭头函数）中的this 指向

1.只有在函数调用的时候this 指向菜确定，不调用的时候，不知道指向谁

2.this 指向和函数在哪儿调用没关系，只和谁在调用有关

一般普通函数谁调用我就指向谁

事件处理中this,指向当前事件的触发对象

构造函数this: 指向实例化生成的对象
function PerSon(username){
    this.username=username;
    console.log(this) //p
}
const p=new PerSon("Alex"); 

箭头函数是没有this 指向的：箭头函数没有自己的this

const calc ={
    add:()=>{
        console.log(this)
    }
}
calc.add() //window

练习：

const calc ={
  add:function(){
      const adder=()=>{
          console.log(this) //calc
      }
      adder() //箭头函数调用，箭头函数是没有this 指向的，要往上一层作用域查找
  }
}
calc.add() //普通函数谁调用 里面的 this 就指向谁
const addFn=calc.add //没有调用，复制给一个新的函数
addFn() //windown