私はいつもJavaScriptでこれについてもっともらしい感じを持っていました。今日、私は突然啓発されました。ここに録音します。
最初に栗を見てみましょう：
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title>を使用して</title> <script type = "text/javascript"> var car、tesla、car = function（）{this.start = function（）{console.log（ 'car'）; carkey = document.getElementById（ 'car_key'）; carkey.onclick = function（）{this.start（）; };} thirture;} tesla = new car（）; tesla.turnkye（）; </script> </head> <body> <入力タイプ= "ボタン" id = "car_key" value = "test"/> </body> </html>一見すると、このコードに問題はありませんが、これについての誤った理解は最終的に間違った結果につながります。要素Car_keyのクリックイベントをバインドし、車のクラスでバインディングクリックイベントをネストすることで、このDOM要素がこのコンテキストにアクセスできるようにすることができると考えています。この方法は合理的に思えますが、残念ながら機能しません。
JavaScriptでは、このキーワードは常に実行されているスコープの所有者を指しています。
上記の文を慎重に理解してください。私たちが知っているように、関数呼び出しは新しいスコープを生成し、少しのオンクリックイベントがトリガーされ、これは車のクラスではなくDOM要素を指します。
では、どのようにそれを適切に機能させるためにそれを行うのでしょうか？通常、これはローカルの自由変数（_これ、自己、私など、多くのフレームワークに反映されているなど）に割り当てて、範囲によって引き起こされる問題を回避します。ここでは、ローカル変数を使用して、以前の方法をオーバーライドします。
<！doctype html> <html> <head> <meta charset = "utf-8"> <title>この</title> </head> <body> <入力タイプ= "button" car_key "value =" test "/> <スクリプトタイプ="テキスト/javascript "> var car、car started '）;}; this.turnkye = function（）{var this = this; var carkey = document.getElementByid（' car_key '）; carkey.onclick = function（）{that.start（）; };} thistrate;} tesla = new car（）; tesla.turnkye（）; </script> </body> </html>それは無料変数であるため、OnClickイベントの出発は再定義を引き起こしません。
ES6に精通している場合は、次のように、よりシンプルで理解しやすいFat Arrowシンボルを使用できます。
<！doctype html> <html> <head> <meta charset = "utf-8"> <title>この</title> </head> <body> <入力タイプ= "button" car_key "value =" test "/> <スクリプトタイプ="テキスト/javascript "> var car、car start '）;}; this.turnkye = function（）{// var this = this; var carkey = document.getElementById（' car_key '）; // carkey.onclick = function（）{// that.start（）; // carkey.onclick=(）=> this.start(）;} Return this;} tesla = new car（）; tesla.turnkye（）; </script> </body> </html>もちろん、バインディング関数法を使用してこの問題を解決することもできます。
<！doctype html> <html> <head> <meta charset = "utf-8"> <title>この</title> </head> <body> <入力タイプ= "button" car_key "value =" test "/> <スクリプトタイプ="テキスト/javascript "> var car、car start '）;}; var click = function（）{this.start（）; } this.turnkye = function（）{// var this = this; var carkey = document.getElementbyid（ 'car_key'）; carkey.onclick = click.bind（this）;} tesla = new car（）; tesla.turnkye（）; </script> </html> </html>実際、私はこれらの落とし穴を書く方法を知っていました。当時、私はそれらをこのように書く方法しか知っていませんでしたが、何が起こったのかわかりませんでした。今日、私は突然啓発されました。それがすべての人に役立つことを願っています。