Ausführliche Erläuterung der Verwendung und Unterschiede dieses Aufrufs und der Anwendung in JavaScript

Bei meinem früheren JavaScript-Lernen haben mich diese Aufrufe und Anwenden immer verwirrt, aber sie werden häufig verwendet. Also habe ich einen ganzen Tag damit verbracht, JavaScript zu verstehen, aufzurufen und anzuwenden.

Es gibt auch viele Bücher, auf die ich unterwegs verwiesen habe, hauptsächlich „JavaScript Design Patterns and Development Practices“, ergänzt durch „JavaScript Advanced Programming“ und „JavaScript You Don't Know“. Diese drei Bücher haben mir sehr geholfen, dies zu verstehen, anzurufen und mich zu bewerben.

Lassen Sie uns zunächst darüber sprechen.

In der Beschreibung dazu in „JavaScript Design Patterns and Development Practices“ gibt es meiner Meinung nach einen Satz, der den Kernpunkt trifft. Das heißt:

Dies zeigt in JavaScript immer auf ein Objekt
In praktischen Anwendungen kann das Zeigen davon in die folgenden vier Typen unterteilt werden:

1. As Objektmethodenaufrufe

2. als gewöhnliche Funktionsaufrufe

3. Konstruktoraufrufe

4. Anwenden und Aufrufen aufrufen

Als Nächstes analysieren wir die ersten drei Punkte. Die Bewerbungs- und Anrufaufrufe im vierten Punkt werden im Abschnitt „Aufruf und Bewerbung“ ausführlich erläutert.

1. Aufruf der Methode als Objekt

Erklärung: Beim Aufruf der Methode als Objekt zeigt dies auf das Objekt.
Beispiel:

/**
 * 1.作为对象的方法调用
 *
 * 作为对象方法调用时，this指向该对象。
 */

var obj = {
 a: 1,
 getA: function() {
  console.log(this === obj);
  console.log(this.a);
 }
};

obj.getA(); // true , 1

2. Als gewöhnliche Funktion aufgerufen

Hinweis: Bei Aufruf als gewöhnliche Funktion immer zeigt auf ein globales Objekt (Fenster in Browsern).
Beispiel:

/**
 * 2.作为普通函数调用
 *
 * 不作为对象属性调用时,this必须指向一个对象。那就是全局对象。
 */

window.name = 'globalName';

var getName = function() {
 console.log(this.name);
};

getName(); // 'globalName'

var myObject = {
 name: "ObjectName",
 getName: function() {
  console.log(this.name)
 }
};

myObject.getName(); // 'ObjectName'

// 这里实质上是把function() {console.log(this.name)}
// 这句话赋值给了theName。thisName在全局对象中调用，自然读取的是全局对象的name值
var theName = myObject.getName;

theName(); // 'globalName'

3. Konstruktoraufruf

Erklärung: Beim Aufruf als Konstruktor zeigt dies auf den zurückgegebenen Objekt.
Beispiel:

/**
 * 3.作为构造器调用
 * 
 * 作为构造器调用时，this指向返回的这个对象。
 */

var myClass = function() {
 this.name = "Lxxyx";
};

var obj = new myClass();

console.log(obj.name); // Lxxyx
console.log(obj) // myClass {name: "Lxxyx"}

Aber wenn im Konstruktor manuell andere Rückgabeobjekte angegeben werden, funktioniert dies nicht.
Wenn der zurückgegebene Datentyp ein anderer Datentyp ist, liegt kein Problem vor.

var myClass = function() {
 this.name = "Lxxyx";
 // 加入return时，则返回的是别的对象。this不起作用。
 return {
  name:"ReturnOthers"
 }
};

var obj = new myClass();
console.log(obj.name); // ReturnOthers

4. Anrufen und Bewerben

Anrufen und Bewerben haben den gleichen Zweck. Sie werden alle verwendet, um den Zeiger davon im Funktionskörper anzugeben.

Der Unterschied zwischen Aufruf und Anwenden

Aufruf: Der erste Parameter ist der Zeiger darauf, und die an die Funktion zu übergebenden Parameter müssen einzeln eingegeben werden .
Anwenden: Der erste Parameter ist der Zeiger darauf, der zweite Parameter ist ein Array und alle Parameter werden auf einmal übergeben.

Wenn der erste Parameter null ist, verweist dies auf den Aufruf selbst.

1. Ändern Sie dies so, dass es auf

Erklärung: Dies ist die häufigste Verwendung von „Call“ und „Apply“. Wird verwendet, um den Zeiger davon im Funktionskörper zu ändern.
Beispiel:

var name = "GlobalName"

var func = function() {
 console.log(this.name)
};

func(); // "GlobalName"

var obj = {
 name: "Lxxyx",
 getName: function() {
  console.log(this.name)
 }
};

obj.getName.apply(window) // "GlobalName" 将this指向window
func.apply(obj) // "Lxxyx" 将this指向obj

2. Methoden von anderen Objekten ausleihen

Hier beginnen wir mit einer sofort ausgeführten anonymen Funktion:

(function(a, b) {
 console.log(arguments) // 1,2
 // 调用Array的原型方法
 Array.prototype.push.call(arguments, 3);
 console.log(arguments) // 1,2,3
})(1,2)

Die Funktion hat das Arguments-Attribut und Arguments ist ein Array-ähnliches Array.
Aber Argumente können die Array-Methode nicht direkt aufrufen, daher müssen wir call oder apply verwenden, um die Prototyp-Methode des Array-Objekts aufzurufen.
Das Prinzip ist auch leicht zu verstehen. Was Sie gerade aufgerufen haben, ist die Push-Methode in der v8-Engine von Google. Der Quellcode lautet wie folgt:

function ArrayPush() {
 var n = TO_UINT32(this.length); // 被push对象的长度
 var m = % _ArgumentsLength(); // push的参数个数
 for (var i = 0; i < m; i++) {
  this[i + n] = % _Arguments(i); // 复制元素
 }
 this.length = n + m; //修正length属性
 return this.length;
}

Es hängt nur damit zusammen. Solange es sich also um ein Array-ähnliches Objekt handelt, können Sie verwandte Methoden aufrufen, um es zu verarbeiten.

Dieser Teil des Inhalts ist ziemlich kompliziert und ich bin auch nicht sehr gut darin. Daher empfehle ich qualifizierten Studierenden, relevante Bücher zu kaufen oder auf meine Folgeblogartikel zu warten.

Eindrücke

Durch das Studium dieses Teils habe ich mein Verständnis von JavaScript vertieft. Die intuitivste Manifestation ist, dass Sie beim Betrachten des Quellcodes einiger hervorragender Frameworks nicht mehr verwirrt sind: Aufrufen, Anwenden und Binden. Immer noch sehr zufrieden~

In der nächsten Zeit werde ich mich eingehend mit dem CSS befassen, das ich täglich lerne und verwende. Denn nach dem Erlernen von JavaScript können HTML und CSS nicht auf der Strecke bleiben.

【Empfohlene verwandte Tutorials】

1. JavaScript-Video-Tutorial
2. JavaScript-Online-Handbuch
Bootstrap-Tutorial