Heim > Web-Frontend > js-Tutorial > Hauptteil

Anwendungsbeispielanalyse der JS-Funktion this_javascript skills

WBOY
Freigeben: 2016-05-16 16:15:42
Original
1076 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Verwendung der JS-Funktion this. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Beim Schreiben von Funktionen in js wird dies häufig verwendet. Was genau ist das? Dies ist ein Schlüsselwort und ein Zeiger, der auf den Ausführungsumgebungsbereich zeigt, auch Kontext genannt.
Lassen Sie uns zunächst über Funktionen sprechen. Mein persönliches Verständnis ist, dass Funktionen Codeblöcke sind, die in der Sprache wiederholt aufgerufen werden.
Wenn in JS einer Eigenschaft eines Objekts eine Funktion zugewiesen wird, wird diese als Methode
bezeichnet Zum Beispiel:

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

Nach dem Login kopieren

Ist der Aufruf der Funktion als Methode des Objekts m
In diesem Fall zeigt dies auf das Objekt m.

Der direkte Aufruf des Funktionsnamens wird als Funktion bezeichnet:

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

Nach dem Login kopieren

In der globalen Umgebung können globale Variablen als Eigenschaften von Fenstern verstanden werden, und globale Funktionen sind Methoden von Fenstern
Schauen Sie sich das Beispiel unten an:

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

Nach dem Login kopieren

Dieser Ausdruck entspricht der gleichzeitigen Referenzierung von
durch a.show und m.show

function(){
  alert(this.id)
}
Nach dem Login kopieren

entspricht tatsächlich

a.show=function(){
  alert(this.id)
}
Nach dem Login kopieren

Wenn Sie also a.show() aufrufen, zeigt dies auf das a-Objekt,
Schauen Sie sich die folgende Kastanie an

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

Der Aufruf von a.show() entspricht also dem Aufruf der m.show()-Methode, sodass dies auf das m-Objekt verweist.

Sehen Sie sich das folgende Beispiel noch einmal an. Ich verstehe es zunächst immer noch nicht.

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

Nach dem Login kopieren

Wenn Funktionsparameter übergeben werden, werden Parameter als Wert und nicht als Referenz übergeben

Wenn also findNode(app.paint); übergeben wird, ist es tatsächlich

function(node){
  node.style.color=this.color;
  alert(this.color);
}
Nach dem Login kopieren

Referenz, und da findNode global definiert ist, verweist dies auf WINDOW OR UNDEFINED;

Informationen zur Übergabe von Parametern: Übergeben Sie sie als Wert

function show(a){
  alert(a)
}
Nach dem Login kopieren
Leicht verständlich, wenn es sich bei den Parametern um grundlegende Datentypen handelt


var b=10;
show(b)//alert(10);
Nach dem Login kopieren
Was das Objekt betrifft


var c ={};
c.prop=true;
var showProp=function(obj){
obj.prop=false
}
showProp(c); //c.prop = false
Nach dem Login kopieren
Manche Leute denken, dass das obige Beispiel Parameter als Referenz übergibt

Tatsächlich werden die oben genannten Parameter immer noch als Wert übergeben. Wenn showProp(c) c an die Funktion übergibt, entspricht c tatsächlich einer Referenz. Obj.prop=false entspricht der Änderung des referenzierten Objekts in {prop: falsch
Sehen Sie sich das folgende Beispiel an


var c ={};
c.prop=true;
var showProp=function(obj){
  obj = new Object();
  obj.prop=false
  return obj;
}
showProp(c);
alert(c.prop); //true
Nach dem Login kopieren
Das eingehende Objekt wurde hier geändert. Wenn Parameter gemäß der Funktion als Referenz übergeben werden, werden die Änderungen in der Funktion auf jeden Fall extern widergespiegelt

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!