JavaScriptのthis指向と矢印関数のthisを簡単に理解します.

1168 ワード

普段はコードを打つ時にthisキーワードを使うことが多いですが、現在のthisが誰を指すのかよくわからない場合、JavaScriptの中のthisを簡単に理解してください.
JavaScriptの中でthisは関数とどの声明を指しますか?それともどこで実行しますか?主に最終的に誰が呼び出しますか?簡単に言えば、関数の実行時の前に少しありますか?少しあれば、この関数の中でthisは点の前のオブジェクトを指します.コードを見る
var obj1 = {
  fn: function(){
    console.log(this)
  }
}
obj1.fn();
//  obj1  

var obj2 = {
  fn: function(){
    function f2(){
      console.log(this);
    }
    f2();    //          
  }
}
obj2.fn();
//  window  
上は普通の関数の中のthisですが、s 6の矢印関数は違っています.実は矢印関数の中にthisが宣言されていませんので、スコープの上にthisがあります.つまり矢印関数の中のthisはこの関数から一番近いthisです.つまり、矢印関数の定義時にあるスコープのthisです.どう分かりますか?コードを見る
var obj1 = {
  fn: ()=>{//             this window
    console.log(this)
  }
}
obj1.fn();
//  window  

var obj2 = {
  fn: function(){
    var f2 = ()=>{
      console.log(this);
    }
    f2();
  }
}
obj2.fn();
//  obj2  
普通の関数はコールバック関数としてwindowを指すので、矢印関数はコールバック関数にとても適しています.コードを見てください.
function fn(){
  setTimeout(function(){
     console.log(this)
  },0)
}
fn.call({})
//  window  

function fn(){
  setTimeout(()=>{
     console.log(this)
  },0)
}
fn.call({})
//  {}  
構造関数のthisが現在のクラスを指す例もあります.