JavaScript this指向問題總結


一、誰調用this this就指向誰(ES6 箭頭函數除外)

  Demo 1   全局作用域內調用函數,this就指向window

 

  function fn()  {  
    console.log(this) 
  }
  fn();     //window
  window.fn();      //window
  //注意 全局定義的變量函數等..其實都是在window對象下新增的屬性

 

  Demo 2  this永遠指向的是最后調用它的對象  

    var obj = {
      user:"zhangsan",
      age:20,
      fn:function(){
        console.log(this); //{user: "zhangsan", age: 20, fn: ƒ}
      }
    }
    window.obj.fn();

  Demo 3  通過事件來調用函數,this就指向這個事件的調用者

  <button id="btn">按鈕</button>
  <script>
          var btn=document.getElementById('btn');
          btn.addEventListener('click',function(){
              console.log(this)    //<button id="btn">按鈕</button>
          })
  </script>

   Demo 4  通過對象來調用對象里面的函數,this就指向這個對象

    var obj={
      name:"zhangsan",
      age:20,
      say:function(){
        console.log(this)   //{name: "zhangsan", age: 20, say: ƒ}
      }
    }
    obj.say();

   Demo 5  通過構造函數來實例化的對象中的this,指向這個實例化對象

    function Fn(){
      this.name="zhangsan"
      this.age=20
      console.log(this)   //Fn {name: "zhangsan", age: 20}
    }
    var user=new Fn()

 

二、ES6 箭頭函數

  箭頭函數里的this指的是定義時所在的作用域,而不是運行時所在的作用域(箭頭函數的 this 永遠指向該函數構造時的環境)

    //不使用箭頭函數
    var obj1 = {   
      name: "zhangsan",
      age:20,
      test: function(){   //{name: "zhangsan", age: 20, test: ƒ} 普通函數中的this表示調用此函數時的對象
        console.log(this)
      }
    }
    obj1.test();
    // 使用箭頭函數
    var obj = {
      name: "zhangsan",
      age:20,
      test: () => console.log(this)    //window  這是為什么呢  因為 箭頭函數里面的this會繼承自外部的this
    }
    obj.test();
 注意:如果還不明白請看下面例子
  
    var obj={
      name:"zhangsan",
      age:20,
      there:this,    //這個this 指的是 window 
      say:()=>{
        console.log(this)   //window  箭頭函數的this 繼承函數外部的this
      }
    }
    obj.say()   //window
    console.log(obj.there)   //window

  箭頭函數總結:箭頭函數並不是用來替代普通函數的,如果在箭頭函數中使用this當前調用者的this就沒有必要使用箭頭函數。



  


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com