js中this的指向问题

一.引言

   首先我们需要知道：javascript中的this不是指定到一个固定的对象的，它会根据我们函数的调用方式不同，指向不同的对象。
   学习this的目的：在面向对象的编程中使用较多，熟悉在不同场景中this的指向，能够帮助我们更好理解代码，代码也会更清晰。

二.this指向的分类

1.this指向window
  (1) js文件中的this指向window
  (2) 通过函数名+()形式调用函数this指向window
  (3) 定时器、延时器回调函数里this指向window
  (4) 行内绑定事件（DOM0级）通过函数名+()形式调用this指向window
2.this指向事件调用的节点对象
 (1)行内绑定事件时通过函数名+(this)形式,this指向调用的节点对象
 (2)DOM1级事件调用，this指向调用的节点对象
 (3)DOM2级事件调用，this指向调用的节点对象
3.this指向传入的第一个参数
  (1)bind()
  (2)call()
  (3)apply()
4.this指向对象
  (1)通过对象.方法名+()形式调用this指向对象
5.this指向数组
  (1)通过数组[下标]+()形式调用,this指向数组
6.this在箭头函数中的指向
  (1)箭头函数中this指向它的宿主对象

三.代码讲解

1.this指向window,如果在严格模式下this无法指向全局window
  (1) js文件中的this指向window

 <script>
        // js中直接打印this
        console.log(this);//Window {window: Window, self: Window, document: document, name: '', location: Location, …}
    </script>

 (2) 通过函数名+()形式调用函数this指向window

 <script>
        function fn(){
            console.log(this);//Window {window: Window, self: Window, document: document, name: '', location: Location, …}
        }
        // 通过函数名()形式调用this指向window
        fn()
    </script>

 (3) 定时器、延时器的回调函数里this指向window

 <script>
        // 定时器
        // setInterval(function(){
        //     console.log(this);  //this指向window，每隔1秒在控制台输出一次
        // },1000)

        // 延时器
        setTimeout(function(){
            console.log(this); //延迟1s输出一次this指向window
        },1000)
        
    </script>

 (4)行内绑定事件（DOM0级）通过函数名+()形式调用this指向window

<body>
    <div onclick="clickFn()">这是内容</div>
    <script>
        function clickFn(){
            console.log(this); //点击div时打印出的this指向window
        }
    </script>
</body>

2.this指向事件调用的节点对象
 (1)行内绑定事件时通过函数名+(this)形式,this指向调用的节点对象

 <div onclick="clickFn(this)">这是内容</div>
    <script>
        // str是接收函数传递过来的this,指向的是调用这个事件的节点对象
        function clickFn(str){
            console.log(str);  //str指的是：调用这个<div onclick="clickFn(this)">这是内容</div>
        }
    </script>

 (2)DOM1级事件调用，this指向调用的节点对象,通过节点对象.onclick调用函数称之为DOM1级事件。

 <button id='btn'>按钮</button>
    <script>
        // 获取元素
        let btn=document.querySelector('#btn')

        // DOM1级事件
        btn.onclick=function(){
            console.log(this);  //结果为：button这个节点对象 <button id="btn">按钮</button>
        }

    </script>

 (3)DOM2级事件调用，this指向调用的节点对象.DOM2级事件是使用节点对象.addEventListener()调用函数。
函数补充：addEventListener('事件名不加on',callback,true/false):true表示冒泡，false表示捕获

 <button id='btn'>按钮</button>
    <script>
           // 获取元素
           let btn=document.querySelector('#btn')
           btn.addEventListener('click',function(){
               console.log(this);  //结果指向 button这个节点对象，<button id="btn">按钮</button>
           })
    </script>

3.this指向传入的第一个参数
 (1)bind(this的指向,参数2,参数3):返回一个新函数并改变这个新函数中的this指向bind的第一个参数,后面的参数是调用时给函数传递的参数.

<body>
  <ul>
    <li>哈哈</li>
    <li>呵呵</li>
    <li>嘿嘿</li>
    <li>嘻嘻</li>
    <li>哼哼</li>
  </ul>
  <script>
    // 获取元素节点
    let lisObj = document.querySelectorAll('li');
    // 使用ES6新增的方法获取元素节点得到的数组可以直接使用数组的方法forEach
    lisObj.forEach(function (li) {
      // 给每一个Li绑定事件
      li.onclick = function () {
        // console.log(this);  //这个this指向的是调用事件的节点对象
        setTimeout(function () {
            //原本延时器里面this指向window
          // 加个bind改变setTimeout这个函数里面的this指向是bind的第一个参数
          console.log(this)
        }.bind(this), 1000);
      }
    });
  </script>
</body>

  (2)call(this指向,参数2,参数3)：调用函数并且改变这个函数中的this指向。

<script>
    function Fn1(name,age){
        this.name=name
        this.age=age
        // console.log('Fn1中this的指向',this); //原本this指向Fn1实例化的对象
        console.log('Fn1中this的指向',this)  //现在Fn1中this的指向为Fn2 {score: 100, name: 'zs', age: 19}
    }
   
    function Fn2(name,age,score){
        this.score=score
        // 使用call这个函数，改变Fn1中this的指向call里面的第一个参数this
        // 第一个参数this是指的Fn2这个实例化的对象
        // 并且调用Fn1这个函数
        Fn1.call(this,name,age)
    }
    // 实例化Fn2的对象
    let f2=new Fn2('zs',19,100)
</script>

  (3)apply(this的指向,数组[]):调用函数并改变这个函数中的this指向。

<script>
      function Fn1(name,age){
          this.name=name
          this.age=age
          // console.log('Fn1中的this指向：',this);  //原来Fn1中的this指向： Fn1 {name: 'ls', age: 20}
          console.log('Fn1中的this指向：',this); //现在Fn1中的this指向： Fn2 {score: 80, name: 'zs', age: 29}
      }
      // let f1=new Fn1('ls',20)
      function Fn2(name,age,score){
          this.score=score
          // 这里的this指向的是Fn2实例化的对象
          Fn1.apply(this,[name,age])
      }
      let f2=new Fn2('zs',29,80)
  </script>

4.this指向对象
  (1)通过对象.方法名+()形式调用this指向对象

<script>
        let obj={
            name:'zs',
            age:18,
            score:90,
            say(){
                console.log(this);  //this指向的是对象：{name: 'zs', age: 18, score: 90, say: ƒ}
            }
        }
        obj.say()
    </script>

5.this指向数组
  (1)通过数组[下标]+()形式调用,this指向数组

 <script>
        function fn(){
            console.log(this); //this指向数组：['a', 'b', 'c', ƒ]
        }
        // 数组元素是函数名
        let arr=['a','b','c',fn]

        // 通过数组名下标+()调用函数，this指向数组
        arr[arr.length-1]() 
    </script>

6.this在箭头函数中的指向
  (1)箭头函数中this指向它的宿主对象

  <div>这是内容</div>
   <script>
    //    获取元素(
    let div=document.querySelector('div')
    // 给div元素绑定事件
    div.onclick=function(){
        // console.log(this);  //this指向调用事件的节点对象：<div>这是内容</div>
        setInterval(() => {
            console.log(this); //原本里面的this指向的是window,使用箭头函数，就指向它的宿主对象(也就是它的上一级)：<div>这是内容</div>
        }, 2000);
    }
   </script>

四.总结

 总之，this在不同的调用方式下指向不同的对象，小伙伴们可以熟记一些常见的this指向。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容