this的四种指向以及箭头函数中this指向

最新推荐文章于 2025-02-16 16:59:19 发布

风里有诗句

最新推荐文章于 2025-02-16 16:59:19 发布

阅读量754

点赞数

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/qq_43378800/article/details/100736952

版权

JS 专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨了JavaScript中this关键字的指向规则，包括普通函数、对象函数、构造函数、apply和call方法以及箭头函数中this的不同行为。通过具体示例，帮助读者理解并掌握this在不同上下文中的工作原理。

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

1.普通函数 this指向是,window

 function sayHi(){
        console.log(this)
      }
      sayHi();

在这里插入图片描述
2.对象函数 this的指向是,当前对象

 var obj={
        name:'小花',
        age:18,
        sayHi(){
          console.log(this)
        }
      }
      obj.sayHi()

在这里插入图片描述
3.构造函数 this的指向是,创建出来的实例

function obj(name,age){
      this.name=name;
      this.age=age;
      console.log('名字是:'+this.name+',age是'+this.age);
    }

    var fn=obj('lxf',18)

在这里插入图片描述
4.apply和call this的指向是,方法后的第一个参数

 var obj1={
        name:'小花',
        age:18,
        sayHi(){
          console.log(this)
        }
      }

    var obj2={
        name:'小明',
        age:19,
        sayHi(){
          console.log(this)
        }
      }
      obj1.sayHi()
      obj1.sayHi.call(obj2)
      obj2.sayHi.apply(obj1)

在这里插入图片描述
5.箭头函数 他的this的指向是,上一层作用域中的this

var obj={
        name:'小花',
        age:18,
        sayHi(){
          setTimeout(()=>{
            console.log(this)
          },0)
          setTimeout(function(){
            console.log(this)
          },0)
        }
      }
      obj.sayHi()

在这里插入图片描述

拓展知识:let声明的对象,不在window中,在script标签包裹的作用域中

let username='刘亦菲'
    var age=18
      function sayHi(){
        console.log(this.username)
        console.log(this.age)
      }
      sayHi();

在这里插入图片描述