Exemple d'utilisation de l'analyse des compétences this_javascript de la fonction JS

L'exemple de cet article décrit l'utilisation de la fonction JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Lors de l'écriture de fonctions en js, ceci est beaucoup utilisé. De quoi s'agit-il exactement ? Il s'agit d'un mot-clé et d'un pointeur, pointant vers la portée de l'environnement d'exécution, également appelé contexte.
Parlons d'abord des fonctions. Ma compréhension personnelle est que les fonctions sont des blocs de code qui sont appelés à plusieurs reprises dans le langage.
En JS, lors de l'attribution d'une fonction à une propriété d'un objet, cela s'appelle une méthode
Tel que :

var m={};
m.title='title';
m.show=function(){
alert(this.title)
}
m.show()

Est d'appeler la fonction comme méthode de l'objet m
Dans ce cas, cela pointe vers l'objet m.

Appeler directement le nom de la fonction s'appelle une fonction :

var a=1212;
function show(){
alert(a)//1212
}
show()// 1212

Dans l'environnement global, les variables globales peuvent être comprises comme des propriétés de fenêtre, et les fonctions globales sont des méthodes de fenêtre
Regardez l'exemple ci-dessous :

var m ={};
m.id='mmm';
m.show=function(){
  alert(this.id);
}
var a={};
a.id='aaa';
a.show=m.show;
a.show(); //aaa

a.show=m.show;  先理解这句话，因为函数是个对象，
m.show=function(){
  alert(this.id)
}

Cette expression équivaut à a.show et m.show référençant simultanément

function(){
  alert(this.id)
}

est en fait équivalent à

a.show=function(){
  alert(this.id)
}

Donc, lors de l'appel à a.show(), cela pointe vers l'objet a,
Jetez un oeil à la châtaigne suivante

var m ={};
m.id='mmm'
m.show=function(){
  alert(this.id)
}
var a={}
a.id='aaa'
a.show=function(){
  m.show()
};
a.show(); //mmm

Donc, lorsque vous appelez a.show(), cela équivaut à appeler la méthode m.show(), donc ceci pointe vers l'objet m.

Regardez à nouveau l'exemple suivant. Je ne le comprends toujours pas au début

var color='red';
var app = {};
app.color="green";
app.paint=function(node){
node.style.color=this.color;
  alert(this.color);
}
function findNode(callback){
  var btn =document.querySelector('.btn');
  callback(btn);//传进来，
}
findNode(app.paint);
alert(this.color); //red 而不是green

Lorsque les paramètres de fonction sont transmis, les paramètres sont transmis par valeur et non par référence

Donc, lorsque findNode(app.paint); est transmis, c'est en fait

function(node){
  node.style.color=this.color;
  alert(this.color);
}

référence, et comme findNode est défini globalement, cela pointe vers WINDOW OR UNDEFINED

;

À propos du passage des paramètres, transmettez-les par valeur

function show(a){
  alert(a)
}

Facile à comprendre lorsque les paramètres sont des types de données de base

var b=10;
show(b)//alert(10);

Quant à l'objet

var c ={};
c.prop=true;
var showProp=function(obj){
obj.prop=false
}
showProp(c); //c.prop = false

Certaines personnes pensent que l'exemple ci-dessus transmet des paramètres par référence
En fait, les paramètres ci-dessus sont toujours transmis par valeur. Lorsque showProp(c) passe c dans la fonction, c est en fait équivalent à une référence Obj.prop=false dans la fonction équivaut à changer l'objet référencé en {prop : faux>

Regardez l'exemple suivant

var c ={};
c.prop=true;
var showProp=function(obj){
  obj = new Object();
  obj.prop=false
  return obj;
}
showProp(c);
alert(c.prop); //true

L'obj entrant a été modifié ici. Si les paramètres sont passés par référence en fonction de la fonction, les modifications dans la fonction seront définitivement répercutées en externe

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.