ホームページ > 記事 > ウェブフロントエンド > JavaScript におけるこのポインタの新たな理解
この記事では、主に JavaScript におけるこのポインターの新しい理解と共有について、メソッド呼び出しモード、関数呼び出しモード、コンストラクター 呼び出しモード、および適用呼び出しモードでのこのポインターの理解を説明します。 can ご参考までに
これまでは「使える」「使える」という理解でしたが、本質までは掘り下げられていませんでした。今回は「JavaScript The Good Parts」を通して理解が深まりました。 (すべてのデバッグはコンソール、ブラウザーの F12 キーで確認できます)
これを一緒に見てみましょう。
関数を宣言する場合、定義時のパラメーター (仮パラメーター) に加えて、各関数には 2 つの追加パラメーターもあります。1 つは this で、もう 1 つは引数 (実パラメーター) です。引数は、関数によって実際に受け取られるパラメータであり、配列のような配列です。 this ポインタに焦点を当てて、引数について簡単に説明するだけです。
メソッド呼び出しパターン
関数がオブジェクトのプロパティとして使用される場合、通常、その関数をオブジェクトのメソッドと呼びます。このメソッドが呼び出されると、これはメソッドが属するオブジェクトを指します。 コードは次のとおりです。<script type="text/javascript"> var people = { name : "Yika", sayName : function(){ console.log(this.name); //"Yika" //this已经绑定在了people对象上了 } } people.sayName(); </script>栗の部分に示すように、this を通じてオブジェクトのコンテキストを取得するこのメソッドは public メソッドです。 (publiceメソッド)
関数呼び出しモード
関数が呼び出され、それがオブジェクトのメソッドではない場合、関数として呼び出されます。 このモードで呼び出される場合、これはwindow オブジェクト を指します。この関数が外部関数で呼び出される場合でも、例を見てみましょう。
コードは次のとおりです:
<script type="text/javascript"> var name = "window-Yika"; var people = { name : "people-Yika", student : function(){ console.log(this); //这里的this绑定的是对象people function sayName(){ var name = "sayName-Yika"; console.log(this.name); //window-Yika //即使sayName函数本身和它所在的people对象都有name值,但是this是指向window的 }; sayName(); } } people.student(); </script>このように見ると、おそらく JavaScript でこの「設計エラー」を解決する方法がわかるでしょう。 はい、これを Student 関数 (6 行目) にキャッシュするだけです。次に、これを変数を介してsayName関数に転送すると、問題を解決できます。 コードは次のとおりです:
var people = { name : "people-Yika", student : function(){ var self = this; //将this缓存起来 function sayName(){ var name = "sayName-Yika"; console.log(self.name); //"people-Yika",此时的self指向的是people对象 }; sayName(); } }
コンストラクター呼び出しモード
JavaScriptのコンストラクターに関して言えば、「関数名を大文字にしてください!呼び出し時にはnewまず、コンストラクターが一般的にどのようなものかを見てみましょう。 コードは次のとおりです:
<script type="text/javascript"> function People(name){ this.name = name; //这里的this,用new调用后便指向了新对象Yika this.sayName = function(){ console.log(this.name); //输出 } } var Yika = new People("Yika"); Yika.sayName(); //输出“Yika" ,因为Yika是通过new调用得来的,this都绑定在了Yika对象上。 </script>一見すると、関数内の this は単にウィンドウを指していたのに、キャッシュせずに People 関数を指すことができるようになったのはなぜでしょうか。 それは問題ではありません。関数が new を通じて呼び出されるとき、舞台裏で「悪いこと」が行われると言いましたよね? では、その関数が実際に何をしたか見てみましょう。
コードは次のとおりです:
<script type="text/javascript"> function People(name){ var that = {}; //坏事一:自己生成一个对象 that.name = name; that.sayName = function(){ console.log(that.name); }; return that; //坏事二,自己会改变return的行为,return刚生成的对象 } var Yika = People("Yika"); //这里可以省略new,模仿调用new操作符 Yika.sayName(); //和刚才一样输出"Yika" </script>このように見ると、New はオブジェクトを生成するだけでなく、このオブジェクトを自動的に返すので、当然、これはこの新しいオブジェクトを指します。 。 コンストラクターを呼び出すには必ず new を使用してください。そうしないと、何か問題が発生した場合に警告が表示されなくなります。大文字の使用規則は依然として非常に必要です。
Apply 呼び出しモード
apply メソッドを使用すると、呼び出し関数に渡すパラメーターの配列を構築でき、また、この値を変更することもできます。 function.apply(thisbound value, argumentparameter array)apply 言えることはたくさんありますが、理解の助けとなる例だけを示します:<script type="text/javascript"> function People(name){ this.name = name; this.sayName = function(){ console.log(this.name); //sayName这个方法是属于People构造函数的 } } function Student(name){ People.apply(this, arguments);//借用构造函数的集成方式,就是在Student构造函数里,通过apply调用People构造函数,并改变People的this值 //这样每次创建Student实例时,都会调用People构造函数 } var student = new Student("Yika"); student.sayName(); //输出“Yika” </script>apply を使用して関数の this バインディング オブジェクトを簡単に変更できます。apply に似たメソッドでも、興味のある学生は自分で検索して学習できます。 さて、これを変更するための 4 つの呼び出しモードについての説明が終わりました。メソッド呼び出しモードとコンストラクター呼び出しモードがさらに使用され、より重要になります。関数呼び出しモードに関しては、トラップを回避する方法を学ぶ必要があります。 間違いがある場合は、時間内に報告してください。他の人に誤解を与えないように、できるだけ早く修正します。ありがとうございます。
以上がJavaScript におけるこのポインタの新たな理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。