JavaScript におけるこのポインタの新たな理解

この記事では、主に JavaScript におけるこのポインターの新しい理解と共有について、メソッド呼び出しモード、関数呼び出しモード、コンストラクター 呼び出しモード、および適用呼び出しモードでのこのポインターの理解を説明します。 can ご参考までに

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

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

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

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

メソッド呼び出しパターン

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

コードは次のとおりです。

<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

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

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

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

<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 サイトの他の関連記事を参照してください。