JavaScript_javascript スキルでこのポインターについての新たな理解を共有する

これについては、使える、使えるという理解が常にありましたが、その本質までは掘り下げられていませんでした。今回は「JavaScript The Good Parts」を通じて理解が深まりました。 (すべてのデバッグはコンソール、ブラウザーの F12 キーで確認できます)

これを一緒に見てみましょう。

関数を宣言する場合、定義時のパラメーター (仮パラメーター) に加えて、各関数には 2 つの追加パラメーターもあります。1 つは this で、もう 1 つは引数 (実パラメーター) です。引数は、関数によって実際に受け取られるパラメータであり、配列のような配列です。 this ポインタに焦点を当てて、引数について簡単に説明するだけです。

オブジェクト指向プログラミングでは、これは非常に重要であり、その値は呼び出しモードによって異なります。 JavaScriptには、メソッド呼び出しモード、関数呼び出しモード、コンストラクタ呼び出しモード、適用呼び出しモードの合計4つの呼び出しモードがあります。

メソッド呼び出しモード

関数がオブジェクトのプロパティとして使用される場合、通常、その関数をオブジェクトのメソッドと呼びます。このメソッドが呼び出されると、これはメソッドが属するオブジェクトを指します。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var people = {
名前: "Yika"、
sayName : function(){
console.log(this.name) //"Yika"
; //これは people オブジェクトにバインドされています
}
}
People.sayName();

栗の部分に示すように、これは、sayName オブジェクトを指します。このメソッドを通じてオブジェクトのコンテキストを取得するメソッドは、パブリック メソッドです。 (公開メソッド)

関数呼び出しモード

関数が呼び出されたが、オブジェクトのメソッドではない場合、その関数は関数として呼び出されます。

このモードで呼び出すと、この関数が外部関数で呼び出される場合でも、これはウィンドウ オブジェクトを指します。例を見てみましょう。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var name = "window-Yika";
var people = {
名前: "people-Yika"、
学生: function(){
console.log(this) //これはオブジェクト people
にバインドされています。 関数sayName(){
var name = "sayName-Yika";
console.log(this.name); //ウィンドウ-Yika
//sayName 関数自体とそれに含まれる people オブジェクトの両方に名前の値がありますが、これはウィンドウ
を指します。 };
sayName();
}
}

people.student();

このように見ると、JavaScript の「設計エラー」を解決する方法がわかるでしょう。

はい、これを Student 関数 (6 行目) にキャッシュするだけです。次に、これを変数を介してsayName関数に転送すると、問題を解決できます。

コードをコピー コードは次のとおりです:

var people = {
名前: "people-Yika"、
学生: function(){
var self = this; // これをキャッシュします
関数sayName(){
var name = "sayName-Yika";
console.log(self.name); //「people-Yika」、この時点では self は people オブジェクトを指します
};
sayName();
}
}

コンストラクター呼び出しモード

JavaScript でコンストラクタというと、「関数名を大文字にしろ！呼び出すときは new 演算子を使おう！」と思うでしょう。関数名を大文字にするのは分かりやすく、コンストラクタの名前を標準化して統一するためです。しかし、なぜ new を使用する必要があるのか​​を詳しく調べたことがありますか? new を先頭に付けて関数を呼び出すと、関数のバックグラウンドによって関数のプロトタイプを指す新しいオブジェクトが作成され、これも新しいオブジェクトにバインドされます。 JavaScript はプロトタイプの継承に基づいた言語です。プロトタイプについてよくわからない学生は、これに焦点を当てて情報を確認します。

まず、コンストラクターが一般的にどのようなものかを見てみましょう。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
関数 People(名前){
This.name = name; //ここでは、new で呼び出した後、新しいオブジェクト Yika を指します
this.sayName = function(){
Console.log(this.name) //出力
; }
}
var Yika = 新しい人("Yika")
Yika.sayName(); // Yika は new を通じて呼び出され、これは Yika オブジェクトにバインドされているため、「Yika」を出力します。

一見すると、先ほどはウィンドウを指定していた関数が、キャッシュせずに People 関数を指定できるようになったのはなぜでしょうか。

それは問題ではありません。関数が new を通じて呼び出されるとき、その関数が舞台裏で「悪いこと」を行うと言いましたよね? では、関数が実際に何をしたか見てみましょう。

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
関数 People(名前){
var that = {} // 悪い点 1: 自分でオブジェクトを生成する
That.name = 名前;
That.sayName = function(){
console.log(その名前);
};
それを返します。 }
var Yika = People("Yika") //ここでは new を省略して、new 演算子の呼び出しを模倣することができます
Yika.sayName() // 前と同様に「Yika」を出力します

こうして見るとよくわかりますが、New はオブジェクトを生成するだけでなく、そのオブジェクトを自動的に返すので、当然 this はこの新しいオブジェクトを指します。

コンストラクターを呼び出すには必ず new を使用してください。そうしないと、何か問題が発生した場合に警告が表示されません。依然としてすべて大文字が必要です。

通話モードを適用する

apply メソッドを使用すると、呼び出し関数に渡すパラメーターの配列を構築でき、また、この値を変更することもできます。

function.apply(このバインドされた値、引数パラメータ配列)

適用に関して言えることはたくさんありますが、理解を助けるためにいくつかの例だけを示します。

コードをコピー コードは次のとおりです:

<スクリプトタイプ="text/javascript">
関数 People(名前){
This.name = 名前;
This.sayName = function(){
console.log(this.name) //メソッドsayNameはPeopleコンストラクター
に属します。 }
}
関数 Student(名前){
People.apply(this, argument);//コンストラクターを借用する統合方法は、Student コンストラクターの apply を通じて People コンストラクターを呼び出し、People
の this 値を変更することです。 //このようにして、Student インスタンスが作成されるたびに、People コンストラクター
が呼び出されます。 }
var Student = new Student("Yika");
Student.sayName() //「Yika」を出力

apply を使用して関数の this バインディング オブジェクトを簡単に変更できます。apply と似たメソッドでも、興味のある学生は自分で検索して学習できます。

ようやく、これを変更するための 4 つの呼び出しモードについての説明が終わりました。メソッド呼び出しモードとコンストラクター呼び出しモードがより使用され、より重要になります。関数呼び出しモードに関しては、トラップを回避する方法を学ぶ必要があります。 。

間違いがある場合は、時間内にご報告ください。他の人に誤解を与えないよう、できるだけ早く修正します。ありがとうございます。