JS--this指向问题

JS--this指向问题

1.function中的this在不同环境下的指向

  • 事件调用环境:

    谁触发的事件,函数里面的this就指向谁
  • 全局环境下:

    在浏览器的环境中,this指向window;在node环境下,this指向module.exports
  • 函数内部:

    • [this最终指向的都是调用他的对象]

      指向的也是window,声明一个变量,一个函数,其实都是在window中声明 一个对象,所以this都是指向window。

    • [函数被多层对象所包含,如果函数被最外层对象调用,this指向的只是它上一级对象]
    • [在构造函数中this指向的是实例对象]
          <scrpit>
              function Fn(){
              this.num = 10
              console.log(this) //Fn{num:10}
              }
              
              var obj = new Fn()
              
              // new Fn()具体做了那些事?
              // 1.调用该构造函数
              // 2.在该构造函数内部创建一个对象
              // 3.将构造函数的this与该对象绑定
              // 4.如果该构造函数没有返回值,将return步骤2中创建的对象(this指向的对象)
          </script>
      
          <scrpit>
              function Fn(){
              this.num = 10
              }
              
              var num = 20
              Fn.prototype.num = 30
              Fn.prototype.method = function(){
              console.log(this.num)
              }
              var prototype = Fn.prototype
              var method = prototype.method
              
              //当调用某种方法或查找某种属性时,首先会在自身调用和查找,如果自身并没有该属性或方法,则会去它的__proto__属性中调用查找,也就是它构造函数的prototype中调用查找
              new Fn().method() //输出10
              method()          //输出20
              prototype.method()//输出30
          </script>
              
      
    • [如果构造函数中有return,且return的值是对象,this则指向返回对象,如果不是则指向实例对象,return的值是null还是指向实例对象]

2.ES6中箭头函数的this指向

  • 箭头函数本身是没有this和arguments的,在箭头函数中引用this实际上调用的是定义在上一层作用域中的this,这里强调一下是上一层作用域,因为对象是不能形成独立的作用域的。

        //不使用箭头函数实现this指向改变
        <script>
            function move(){
                var _this = this //保存当前this
                setTimeout(function(){
                    _this.style.left = "100px"
                },1000)
            }
        </script>
    
        //使用箭头函数
        <script>
            function move(){
                setTimeout(() => {
                    this.style.left = "100px"
                },1000)
            }
        </script>
    
    
  • 这里强调一下,对象是不能形成独立的作用域的。

        <script>
            var obj = {
                fn : () => {
                    console.log(this)
                }
            }
            
            obj.fn() // 输出的是window
        </script>
    

3.修改函数中this的指向

  • 通过call()、apply()、bind()方法,可以修改this指向,三个方法主要都是用于修改this指向问题,但是在传参的时候有一些差别:

    • call()方法传参
        <script>
            var box = document.querySelector('.box')
            var a,b,c
            var obj = {
                fn : function(){
                    console.log(this)
                }
            }
            //通过call()方法,可以修改this指向
            obj.fn.call(box,a,b,c)
        </script>
    
    • apply()方法传参
        <script>
            var box = document.querySelector('.box')
            var a,b,c
            var obj = {
                fn : function(){
                    console.log(this)
                }
            }
            //通过apply()方法,可以修改this指向
            obj.fn.apply(box,[a,b,c])
        </script>
    
    • bind()方法传参,bind()并不会返回this指向,只是修改this指向,需要再次调用才会返回this指向
        <script>
            var box = document.querySelector('.box')
            var a,b,c
            var obj = {
                fn : function(){
                    console.log(this)
                }
            }
            //通过bind()方法,可以修改this指向
            obj.fn.bind(box,a,b,c)()
        </script>
    
  • ES6中箭头函数函数this指向在创建时就已经定义好了,无法修改。

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