Explication détaillée de l'utilisation et des différences de ceci, appelez et postulez en JavaScript

Dans mon apprentissage précédent de JavaScript, ceci, appeler et appliquer m'a toujours dérouté, mais ils sont largement utilisés. J'ai donc passé une journée entière à comprendre le fonctionnement de JavaScript, à appeler et à postuler.

Il existe également de nombreux livres que j'ai référencés en cours de route, principalement "JavaScript Design Patterns and Development Practices", complétés par "JavaScript Advanced Programming" et "JavaScript You Don't Know". Ces trois livres m'ont été d'une grande aide pour comprendre cela, appeler et postuler.

Tout d’abord, parlons-en.

Dans la description de ceci dans "Modèles de conception JavaScript et pratiques de développement", je pense qu'il y a une phrase qui touche le point central de ceci. C'est-à-dire :

Ceci en JavaScript pointe toujours vers un objet
Dans les applications pratiques, le pointage de ceci peut être divisé en quatre types suivants :

1. Comme Appels de méthode objet

2. comme appels de fonction ordinaires

3. Appels de constructeur

4. apply et appel Calling

Nous analyserons ensuite les trois premiers points Quant aux appels de candidature et d'appel du quatrième point, ils seront expliqués en détail dans la section appel et candidature.

1. Appel de la méthode en tant qu'objet

Explication : Lors de l'appel de la méthode en tant qu'objet, cela pointe vers l'objet.
Exemple :

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

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

obj.getA(); // true , 1

2. Appelée comme une fonction ordinaire

Remarque : Lorsqu'elle est appelée comme une fonction ordinaire, cela est toujours pointe vers l'objet Global (fenêtre dans les navigateurs).
Exemple :

/**
 * 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. Appel du constructeur

Explication : Lorsqu'il est appelé en tant que constructeur, cela pointe vers celui renvoyé. objet.
Exemple :

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

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

var obj = new myClass();

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

Mais si return d'autres objets sont spécifiés manuellement dans le constructeur, alors cela ne fonctionnera pas.
Si le type de données renvoyé est un autre type de données, il n'y a pas de problème.

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

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

4. Appeler et postuler

Appeler et postuler ont le même objectif. Ils sont tous utilisés pour spécifier le pointeur de this dans le corps de la fonction.

La différence entre Call et Apply

Call : Le premier paramètre est le pointeur vers celui-ci, et les paramètres à transmettre à la fonction doivent être saisis un par un .
Appliquer : le premier paramètre est le pointeur vers ceci, le deuxième paramètre est un tableau et tous les paramètres sont transmis en même temps.

Si le premier paramètre est nul, cela pointe vers l'appel lui-même.

1. Modifiez ceci pour pointer vers

Explication : Il s'agit de l'utilisation la plus courante d'appeler et de postuler. Utilisé pour changer le pointeur de this dans le corps de la fonction.
Exemple :

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. Emprunter des méthodes à d'autres objets

Ici, nous commençons par une fonction anonyme immédiatement exécutée :

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

La fonction a l'attribut arguments, et arguments est un tableau de type tableau.
Mais les arguments ne peuvent pas appeler directement la méthode tableau, nous devons donc utiliser call ou apply pour appeler la méthode prototype de l'objet Array.
Le principe est également facile à comprendre. Par exemple, ce que vous venez d'appeler est la méthode push, et la méthode push est dans le moteur v8 de Google. Le code source est comme ceci :

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

<.>

C'est seulement Cela est lié à cela, donc tant qu'il s'agit d'un objet de type tableau, vous pouvez appeler des méthodes associées pour le traiter.

Cette partie du contenu est assez compliquée, et je ne suis pas très douée non plus. Par conséquent, je recommande aux étudiants qualifiés d’acheter des livres pertinents ou d’attendre mes articles de blog de suivi.

Impressions

En étudiant cette partie, j'ai approfondi ma compréhension de JavaScript. La manifestation la plus intuitive est que lorsque vous regardez le code source de certains excellents frameworks, vous n'êtes plus dérouté par cela, appelez, appliquez et liez. Toujours très heureux~

Dans la prochaine période, je vais explorer en profondeur le CSS que j'apprends et que j'utilise quotidiennement. Après tout, après avoir appris JavaScript, HTML et CSS ne peuvent pas être laissés pour compte.

【Tutoriels associés recommandés】

1.

Tutoriel vidéo JavaScript2
Manuel en ligne JavaScript3. tutoriel bootstrap