Ausführliche Erklärung von Javascript hier (grafisches Tutorial)

In diesem Artikel werden hauptsächlich relevante Informationen zu Javascript im Detail vorgestellt.

Der Wert davon wird zur Laufzeit bestimmt

Was Genau das, was in JS dargestellt wird, hängt vom Kontext ab, in dem das Programm ausgeführt wird, und kann in die folgenden Situationen unterteilt werden.

1. Dies im globalen Bereich

Im globalen Bereich zeigt dies auf das Fensterobjekt.

console.log(this);//指向window对象

this.x = 5//在全局作用域内创建一个x
//与this.x = 5的等价情况：
//var x = 5;
//x = 5;

Das Ausführen von var x=5 im globalen Bereich erstellt tatsächlich ein Attribut x für das Fensterobjekt und macht es gleich 5.

Wenn Sie beim Definieren einer Variablen keine Variable hinzufügen, betrachtet JS die Variable als globale Variable und behandelt sie als Eigenschaft des Fensterobjekts.

2. Dies in der Funktion

Es gibt zwei Arten von Funktionen in JS. Die direkt aufgerufene Funktion wird als normale Funktion bezeichnet und die Funktion, die ein Objekt erstellt durch new wird als Konstruktor bezeichnet.

2.1 Dies im Konstruktor

Dies im Konstruktor zeigt auf das Objekt, das es erstellt, wie zum Beispiel:

function Person(name){
  this.name = name;//this指向该函数创建的对象person
}
var person = new Person("chaimm");

2.2 Dies in der gewöhnlichen Funktion

Diese gewöhnliche Funktion zeigt auf das Fensterobjekt.
Wenn im obigen Beispiel die Perosn-Funktion direkt ausgeführt wird, stellt dies das Fensterobjekt dar, sodass nach Ausführung der Funktion ein globaler Name erstellt wird.

function Person(name){
  this.name = name;//this指向window
}
Person("chai");//当作普通函数执行，this指向window对象

3. Dies im Objekt

Dies im Objekt zeigt auf das aktuelle Objekt, wie zum Beispiel:

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

Im obigen Code Dies zeigt auf das Funktionsobjekt getName.

Wenn jedoch eine Funktion in der Funktion eines Objekts verschachtelt ist, zeigt das This dieser Funktion auf das Fenster und nicht auf sein äußeres Objekt.

var person = {
  name : "chaimm",
  setName : function(name){
    (function(name){
      this.name = name; //此时this并不代表person对象，而是代表window对象
    })(name);
  }
}

Im obigen Beispiel gibt es eine getName-Funktion im Personenobjekt, und es gibt eine Funktion innerhalb der getName-Funktion. Diese zeigt auf das Fensterobjekt, nicht auf das Personenobjekt Fehler in JS! Im Allgemeinen wird Folgendes getan, um diesen Fehler zu vermeiden:

var person = {
  name : "chaimm",
  setName : function(name){
    var thar = this;//将this赋给that
    (function(name){
      that.name = name;//此时that指向person对象
    })(name);
  }
}

In der Funktion der ersten Ebene des Personenobjekts weisen wir dies der lokalen Variablen that zu und verwenden diese dann in der Funktion der zweiten Ebene Dieses Mal verweist das auf das Personenobjekt, das auf die Attribute der Person einwirken kann.

Hinweis: Wenn Sie einer Variablen eine Funktion in einem Objekt zuweisen und dann die Funktion über die Variable aufrufen, zeigt diese in der Funktion auf das Fenster statt auf das Objekt, wie unten gezeigt:

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

//将getName函数赋给一个新的变量
var newGetName = person.getName;
//通过新的变量调用这个函数，这个函数中的this将指向window
newGetName();//若全局作用域中没有name，则将返回undefined

4. Verwenden Sie die Funktionen „Aufruf“ und „Anwenden“, um dies zu umgehen.

Beide Funktionen können manuell angeben, auf welches Objekt dies innerhalb der aufgerufenen Funktion zeigt.

//定义一个构造函数
var Person = function(name){
  this.name = "";
  this.setName = function(name){
    this.name = name;
  }
}

//创建两个对象
var personA = new Person("A");
var personB = new Person("B");

//使用personA的setName函数去修改personB的name属性
personA.setName.apply(personB,["C"]);

Apply-Nutzung

Object A.Function name.apply(Object B, Parameter List);
Wenn Objekt B als erster Parameter von Apply übergeben wird Bei der Anwendung zeigt dies in der Funktion von Objekt A auf Objekt B. Zu diesem Zeitpunkt wird die Operation dieser Funktion auf Objekt A auf Objekt B angewendet, wodurch realisiert wird, dass Objekt A zum Aufrufen der Funktion von Objekt B verwendet wird.

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Einige Lernzusammenfassung von Javascript this

Sechs Hürden von JavaScript this

Stellen Sie im Detail vor, worauf JavaScript hier hinweist. (Bilder und Text)

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung von Javascript hier (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!