美文网首页
this的指向

this的指向

作者: 美玲_ee39 | 来源:发表于2020-05-24 22:46 被阅读0次

    什么是this??

    js中的this含义非常多,它可以是全局对象,当前对象或者任意对象,这完全取决于函数调用方式
    随着函数使用场合的不同,this的值会发生改变。this指的是调用函数的那个对象
    this使用场景
    第一种:作为函数调用
    在函数被直接调用时this绑定到到全局对象上,在浏览器中,window就是该全局对象

     var a=10;
     var b=20;
     console.log(a);//结果是10相当于window.a window.是可以省略的
     //第一种场景---直接调用--this指向
            function fn(){
                console.log(this);//window
            }
            fn()
              function fn1(){
                  var c=100;
                  console.log(this.c)//undefined 因为this.c 相当于window
              }
              fn1();
    

    第二种:函数嵌套
    函数嵌套产生的内部函数this不是其父函数,仍然指的全局变量

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

    第三种:给dom绑定事件---this指向
    指向发生改变

      document.addEventListener('click',function(){
                  console.log(this);//document
              })
    

    setTimeout()定时器的回调函数(把函数作为参数)相当于一个匿名函数
    怎么改变this的指向
    1:var that=this 把this存储起来
    2: .bind(this)

    document.addEventListener('click',function(){
                  console.log(this);//document
    
                  setTimeout(function(){
                  console.log(this)//window 原因:::定时器的回调函数(把函数作为参数)==相当于一个匿名函数
                },200)
              })
     //怎么把setTimeout里面的指向改变
     //第一种        
     document.addEventListener('click',function(){
                 var that=this;
                 console.log(this);//document
    
                  setTimeout(function(){
                  console.log(that)//document
                },200)
              })   
    //第二种
    document.addEventListener('click',function(){
                 console.log(this);//document
    
                  setTimeout(function(){
                  console.log(this)//document
                }.bind(this),200)
              })      
    

    第四种:作为构造函数调用
    this的指向是new那个也就是实例

    
    function Person(name,age){
                this.name=name
                this.age=age
            }
            Person.prototype.sayName=function(){
                console.log(this.name)
            }
            var p1=new Person('lili',300)//把创建的对象赋值p1
            p1.sayName()
    

    第五种:作为对象方法调用
    哪个对象调用了this所在的成员方法,那么this就指向谁

    var obj={
                name:'lulu',
                fn:function(){
                    console.log(this);//obj---哪个对象调用了this所在的成员方法,那么this就指向obj
                }
            }
            obj.fn()//obj 调用
    

    特殊例子

    var fn5=obj.fn;
            fn5();//此时this指向的事windo fn5()是window调用的
    

    相关文章

      网友评论

          本文标题:this的指向

          本文链接:https://www.haomeiwen.com/subject/ektsahtx.html