このキーワードを理解する
私が学び、使い始めてJavaScript以来、私が立ち往生していることの1つは、thisキーワードです。
私が勉強を始めVueたとき、それthisは私に悪夢を与えました。私は多くの時間を学習と練習に費やしました、そして今日私はあなたと私のthisキーワード。
thisはオブジェクト指向言語の重要な部分ですが、 thisJavaScriptthisのキーワードはJavaやPythonのキーワードselfとはます。JavaScriptでは、コンテキスト内のオブジェクトをthis参照します。つまり、関数でthisは、オブジェクトを含むオブジェクトを参照します。thisその値は、オブジェクトの使用方法によって異なります。
アプリケーションシナリオとthisの値は次のとおりです：
-
デフォルト：オブジェクトを
this参照globalします。つまり、グローバルオブジェクトはwindow;を参照します。 -
関数では、 ：
thisはglobalオブジェクトを参照します。これはデフォルトの場合と同じですが、strict（strict）モードでthisは、値はundefined;です。 -
メソッド内：
this所有者オブジェクトを参照します。（オブジェクトプロパティに属する関数です） -
イベントの場合：イベント
thisをトリガーした要素を指します。 -
矢印関数の内部：
()=>関数が矢印で定義されている場合、関数は作成されませんthisが、関数の外部で参照しているのと同じオブジェクトを参照し続けます。
特定の練習
具体的な実践を見てみましょう
関数内
デフォルトはwindowオブジェクト
function test(){
console.log(this)
}
test();
厳密モードでは、undefined
function test(){
"use strict";
console.log(this)
}
test();
メソッド内
メソッド内とは、メソッド呼び出しでメソッドを所有するオブジェクトをthis指します。
const me = {
name: "我想养只猫",
show() {
console.log(this.name);
},
info: {
webSite: "uiuing.com",
show() {
console.log(this.webSite)
}
}
};
me.show();
me.info.show();
イベントで
イベントでは、thisそれはdomオブジェクトです。これは言う必要はありません。このコードを実行するだけで、自然にわかります。
<body>
<button onclick="run(this)"> CLICK ME!</button>
<script>
function run(data){
console.log(data);
}
</script>
</body>
矢印関数の内側
function次のように、関数の定義と矢印関数の違いは、を使用すると特に明白thisになります。
<body>
<button id="btn"> CLICK ME!</button>
<script>
let btn_el = document.getElementById("btn");
btn_el.onclick = function (){
console.log("function 下的this：",this);
};
btn_el.click();
btn_el.onclick = ()=>{
console.log("箭头函数下的this：",this);
};
btn_el.click();
</script>
</body>
あなたは違いを見つけることができますか？