JavaScriptのthis指向と矢印関数のthisを簡単に理解します.
1168 ワード
普段はコードを打つ時にthisキーワードを使うことが多いですが、現在のthisが誰を指すのかよくわからない場合、JavaScriptの中のthisを簡単に理解してください.
JavaScriptの中でthisは関数とどの声明を指しますか?それともどこで実行しますか?主に最終的に誰が呼び出しますか?簡単に言えば、関数の実行時の前に少しありますか?少しあれば、この関数の中で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が現在のクラスを指す例もあります.