Heim Web-Frontend js-Tutorial Anwendungsbeispielanalyse der JS-Funktion this_javascript skills

Anwendungsbeispielanalyse der JS-Funktion this_javascript skills

May 16, 2016 pm 04:15 PM
js this 函数 用法

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.

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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tipps zum dynamischen Erstellen neuer Funktionen in Golang-Funktionen Tipps zum dynamischen Erstellen neuer Funktionen in Golang-Funktionen Apr 25, 2024 pm 02:39 PM

Tipps zum dynamischen Erstellen neuer Funktionen in Golang-Funktionen

Überlegungen zur Parameterreihenfolge bei der Benennung von C++-Funktionen Überlegungen zur Parameterreihenfolge bei der Benennung von C++-Funktionen Apr 24, 2024 pm 04:21 PM

Überlegungen zur Parameterreihenfolge bei der Benennung von C++-Funktionen

Wie schreibe ich effiziente und wartbare Funktionen in Java? Wie schreibe ich effiziente und wartbare Funktionen in Java? Apr 24, 2024 am 11:33 AM

Wie schreibe ich effiziente und wartbare Funktionen in Java?

Vergleich der Vor- und Nachteile von C++-Funktionsstandardparametern und variablen Parametern Vergleich der Vor- und Nachteile von C++-Funktionsstandardparametern und variablen Parametern Apr 21, 2024 am 10:21 AM

Vergleich der Vor- und Nachteile von C++-Funktionsstandardparametern und variablen Parametern

Vollständige Sammlung von Excel-Funktionsformeln Vollständige Sammlung von Excel-Funktionsformeln May 07, 2024 pm 12:04 PM

Vollständige Sammlung von Excel-Funktionsformeln

Welche Vorteile haben C++-Funktionen, die Referenztypen zurückgeben? Welche Vorteile haben C++-Funktionen, die Referenztypen zurückgeben? Apr 20, 2024 pm 09:12 PM

Welche Vorteile haben C++-Funktionen, die Referenztypen zurückgeben?

Erweiterte Verwendung von Referenzparametern und Zeigerparametern in C++-Funktionen Erweiterte Verwendung von Referenzparametern und Zeigerparametern in C++-Funktionen Apr 21, 2024 am 09:39 AM

Erweiterte Verwendung von Referenzparametern und Zeigerparametern in C++-Funktionen

Was ist der Unterschied zwischen benutzerdefinierten PHP-Funktionen und vordefinierten Funktionen? Was ist der Unterschied zwischen benutzerdefinierten PHP-Funktionen und vordefinierten Funktionen? Apr 22, 2024 pm 02:21 PM

Was ist der Unterschied zwischen benutzerdefinierten PHP-Funktionen und vordefinierten Funktionen?

See all articles