Nouvelle compréhension de ce pointeur en JavaScript

Cet article présente principalement la nouvelle compréhension du pointeur this en JavaScript Cet article explique le mode d'appel de méthode, le mode d'appel de fonction, le mode d'appel constructeur et le mode d'appel Apply. Pour comprendre ce pointeur dans , les amis qui en ont besoin peuvent se référer à

La compréhension de cela a toujours été qu'il peut être utilisé et peut être utilisé, mais il n'a pas approfondi son essence. Cette fois, j'ai acquis une compréhension approfondie grâce à "JavaScript The Good Parts". (Tous les débogages sont visibles dans la console, touche F12 du navigateur)

Regardons cela ensemble.

Lorsque nous déclarons une fonction, en plus des paramètres (paramètres formels) lorsqu'elle est définie, chaque fonction elle-même aura deux paramètres supplémentaires, l'un est ceci et l'autre est des arguments (paramètres réels). les arguments sont les paramètres réellement reçus par la fonction, qui est un tableau de type tableau. Je ne donnerai qu'une brève introduction aux arguments, en me concentrant sur ce pointeur.

En programmation orientée objet, ceci est très important, et sa valeur dépend du mode d'appel. En JavaScript, il existe un total de 4 modes d'appel : le mode d'appel de méthode, le mode d'appel de fonction, le mode d'appel de constructeur et le mode d'appel d'application.

Modèle d'appel de méthode

Lorsqu'une fonction est utilisée comme propriété d'un objet, nous appelons généralement la fonction une méthode de l'objet. Lorsque cette méthode est appelée, cela pointe vers l’objet auquel appartient la méthode.

Le code est le suivant :

<script type="text/javascript">
    var people = {
        name : "Yika",
        sayName : function(){
            console.log(this.name);   //"Yika"
                        //this已经绑定在了people对象上了
        }
    }
    people.sayName();
</script>

Comme indiqué dans le marron, cela pointe vers l'objet sayName. Cette méthode d'obtention du contexte de l'objet via this est une méthode publique. (méthode publique)

Mode d'appel de fonction

Lorsqu'une fonction est appelée et n'est pas une méthode sur un objet, elle est appelée en tant que fonction. Lorsque

est appelé dans ce mode, cela pointera vers l'objet fenêtre, même si cette fonction peut être appelée dans une fonction externe, regardons un exemple.

Le code est le suivant :

<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>

En regardant les choses de cette façon, vous savez probablement comment résoudre cette "erreur de conception" en JavaScript.

Oui, mettez simplement ceci en cache dans la fonction étudiant, qui est la ligne 6. Transférez ensuite cela à la fonction sayName via une variable et vous pourrez le résoudre !

Le code est le suivant :

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();
        }
    }

Mode d'appel des constructeurs

Quand on parle de constructeurs en JavaScript, on aura en tête : " function Mettez le nom en majuscule ! Utilisez le nouvelopérateur lors de l'appel ! "Le nom de la fonction est en majuscule pour normaliser la dénomination des constructeurs. Mais avez-vous déjà cherché à savoir pourquoi vous devez utiliser du nouveau ? Si vous appelez une fonction avec new devant, l'arrière-plan de la fonction créera un nouvel objet pointant vers le prototype de la fonction, et celui-ci sera également lié au nouvel objet. JavaScript est un langage basé sur l'héritage de prototypes. Les étudiants qui ne comprennent pas très bien le prototype peuvent vérifier les informations par eux-mêmes.

Voyons d’abord à quoi ressemble généralement un constructeur.

Le code est le suivant :

<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>

À première vue, cela ne semble pas facile à comprendre. Pourquoi cela dans la fonction pointe-t-il simplement vers. la fenêtre ? Il n'est pas nécessaire de la mettre en cache maintenant. Peut-elle pointer vers la fonction Personnes ?

Cela n'a pas d'importance. Ne viens-je pas de dire que lorsqu'une fonction est appelée via new, elle fera de « mauvaises choses » en coulisses ?

Le code est le suivant :

<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>

Ce sera clair si vous le regardez de cette façon. New ne générera pas seulement un objet, mais renvoie également automatiquement l'objet. Cela pointe naturellement vers ce nouvel objet.

Assurez-vous d'utiliser new pour appeler le constructeur, sinon il n'y aura aucun avertissement en cas de problème. Toutes les conventions de capitalisation sont toujours très nécessaires.

Mode d'appel Apply

La méthode apply nous permet de construire un tableau de paramètres à transmettre à la fonction appelante, et nous permet également de modifier cette valeur.

function.apply (valeur liée à ceci, tableau de paramètres d'arguments)

Il y a trop de choses à dire sur apply, je vais seulement vous donner un exemple pour vous aider à comprendre :

Le code est le suivant :

<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>

On peut facilement modifier l'objet de liaison this de la fonction via apply La méthode d'appel, qui est similaire à apply, a également le. même effet. Les étudiants intéressés peuvent rechercher par eux-mêmes.

D'accord, nous avons enfin fini de parler des quatre modes d'appel pour changer cela. Le mode d'appel de méthode et le mode d'appel de constructeur seront davantage utilisés et sont plus importants. Quant au mode d'appel de fonction, nous devons le faire. apprenez-le. Évitez les pièges.

S'il y a des erreurs, veuillez les signaler à temps et je les corrigerai dès que possible pour éviter d'induire les autres en erreur. Merci !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!