JS中常见的this指向问题

最新推荐文章于 2024-06-02 08:16:33 发布

卖火柴的天山童姥

最新推荐文章于 2024-06-02 08:16:33 发布

阅读量1k

点赞数 1

分类专栏：原生js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_62728880/article/details/121759475

版权

原生js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中this的常见指向问题，包括普通函数、构造函数、方法声明、定时器、事件、全局环境和箭头函数。同时，讲解了如何通过call、apply和bind方法来改变this的指向，并通过示例展示了它们的使用。文章最后还通过一个示例展示了bind在定时器中的应用，演示了如何保持事件函数中this的指向。

摘要由CSDN通过智能技术生成

一、常见的this指向问题

（1）、在普通函数中，this指向window

 function fn() {
      console.log(this);//window
    }

（2）、在构造函数中，this指向实例化后的对象

 function A(name, age) {
      this.name = name;
      this.age = age;
      console.log(this);// this指向实例化后的对象,为A {name: '黄四郎', age: 18}
    }
    let a = new A('黄四郎', 18);

（3）、在方法声明中，this指向该方法所属的对象

let obj= {
      name: '张麻子',
      say() {
        function fn() {
          console.log(this, 1);//window 1
        }
        fn();
      let a = () => {
          console.log(this, 2);//{name: '张麻子', say: ƒ} 2
        }
        a();
      }}
    obj.say();

（4）、在定时器中， this指向window

setInterval(function(){
    console.log(this,1);//this指向window
  })

（5）、在事件中，this 指向事件源

<body>
 <p>南风知我意，吹梦到西洲</p>
<script>
      let p = document.querySelector('p');
      p1.onclick=function(){
        console.log(this);//this指向p标签
      }
</script>
</body>

（6）、在JS中,单独使用this,this指向全局对象window

console.log(this);//window

（7）、在箭头函数中,this指向window

<body>
 <p>路漫漫其修远兮，吾将上下而求索</p>
<script>
     let p = document.querySelector('p');
      p.onclick = () => {
      console.log(this);//window
    }
</script>
</body>

箭头函数中，this指向固定化(指向其宿主对象)，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数没有自己的this,导致内部的this为外层代码块的this。正因如此，所以箭头函数也不能做构造函数。

二、改变this指向的方法

（1）call()。作用是调用函数,并修改函数中this的指向；语法是：函数名. call(对象,实参1,实参2);

 function A(name,age){
      this.name=name
      this.age=age
      this.say=function(){
        console.log(this.name);
      }
    }
    A.prototype.like='女妖'
    function B(name,age,des,ibfo){
        this.des=des
        this.ibfo=ibfo
        A.call(this,name,age)
    }
    let b=new B('聂小倩',24,'漂漂亮亮','白富美')
    console.log(b);//B {des: '漂漂亮亮', ibfo: '白富美', name: '王小丫', age: 24, say: ƒ}
    console.log(b.like);//undefined，call不能继承原型对象上的属性和方法

（2）、apply()。修改函数中this的指向，立即执行函数；语法: 函数名. apply(对象,数组);

function g(a,b){
     console.log(a*b);//64
   }
   let o={}
   g.apply(o,[32,2])

（3）、bind()，在低版本IE中有兼容问题；bind可以返回一个新的函数，它会创建一个与原函数主体相同的新函数，新函数中的this指向传入的对象。语法: 函数名. bind(对象,实参1,实参2);

<body>
 <div>诸葛亮</div>
<script>
 let div=document.querySelectorAll('div')
    div[0].onclick=function(){
      console.log(this);//div标签
      setTimeout(function(){
      console.log(this);//结果为div标签；bind改变了this的指向，此处this与事件函数中this指向一致
      }.bind(this,2000) )
    }
</script>
</body>