Utilisation de ceci en Javascript

Dans l'étude quotidienne, nous rencontrons souvent son utilisation. Cet article l'expliquera en détail.

Vous avez peut-être rencontré cette question d'entretien JS :

var obj = {  foo: function(){    console.log(this)
  }
}var bar = obj.foo
obj.foo() // 打印出的 this 是 objbar() // 打印出的 this 是 window

Veuillez expliquer pourquoi les valeurs des fonctions dans les deux dernières lignes sont différentes.

——-

La compréhension de cela par les débutants a toujours été vague. L’article d’aujourd’hui vous expliquera tout une fois pour toutes.

Et vous ne pouvez voir cette explication nulle part ailleurs. Comprenez cet article, toutes les questions d'entretien à ce sujet ne sont que des plats d'accompagnement.

Appel de fonction

Nous devons d'abord commencer par l'appel de fonction.

Il existe trois formulaires d'appel de fonction dans JS (ES5) :

func(p1, p2)
obj.child.method(p1, p2)
func.call(context, p1, p2) // 先不讲 apply

Généralement, les débutants connaissent les deux premières formes et pensent que les deux premières formes sont "meilleures" que la troisième formulaire.

À partir du moment où vous lisez cet article, vous devez vous rappeler que le troisième formulaire d'appel est le formulaire d'appel normal :

func.call(context, p1, p2)

Les deux autres sont du sucre de syntaxe et peuvent être modifiés de manière équivalente en forme d'appel :

func(p1, p2) est équivalent à func.call(undefined, p1, p2)obj .child.method(p1 , p2) équivaut à obj.child.method.call(obj.child, p1, p2)

Veuillez le noter. (Nous appelons ce code "code de conversion" pour faciliter la référence ci-dessous)

Jusqu'à présent, notre appel de fonction n'a qu'une seule forme :

func.call(context, p1, p2)

De cette façon, cela peut expliquer

c'est le contexte dans le code ci-dessus. C'est aussi simple que cela.

C'est le contexte transmis lorsque vous appelez une fonction. Puisque vous n'utilisez jamais la forme d'appel de fonction, vous ne le savez jamais.

Regardez d'abord comment déterminer cela dans func(p1, p2) :

Lorsque vous écrivez le code suivant

function func(){ console.log(this)}func()
等价于
function func(){ console.log(this)}func.call(undefined) // 可以简写为 func.call()

Il va de soi que l'imprimé ceci devrait être indéfini Ok, mais il y a une règle dans le navigateur :

Si le contexte que vous transmettez est nul ou indéfini, alors l'objet window est le contexte par défaut (le contexte par défaut en mode strict est indéfini)
Par conséquent l'impression ci-dessus Le résultat est une fenêtre.

Si vous espérez que ce n'est pas une fenêtre, c'est très simple :

func.call(obj) // Alors ceci à l'intérieur se trouve l'objet obj

Regardez obj encore. Comment déterminer cela de child.method(p1, p2)

var obj = { foo: function(){   console.log(this)
 }
}
obj.foo()

Selon le "Conversion Code", nous convertissons obj.foo() en

obj.foo. call(obj)

D'accord, c'est obj. Fait.

Retour au sujet :

var obj = { foo: function(){   console.log(this)
 }
}var bar = obj.foo

obj.foo() // Convertir en obj.foo.call(obj), c'est objbar() // Convertir en bar.call ( )// Puisqu'aucun contexte n'est passé// donc ceci n'est pas défini// Enfin, le navigateur vous donne un objet this - window par défaut

[ ] syntaxe

function fn (){ console.log(this) }
var arr = [fn, fn2]
arr0 // 这里面的 this 又是什么呢？

us Vous pouvez considérer arr0 comme arr.0(). Bien que la syntaxe de ce dernier soit erronée, la forme correspond à obj.child.method(p1, p2) dans le code de conversion, vous pouvez donc convertir joyeusement :

arr0
Imaginez-le comme arr.0()
puis convertissez-le en arr.0.call(arr)
Ensuite, cet intérieur est arr :)

Résumé

Il s'agit du contexte transmis lorsque vous appelez une fonction.
Si votre formulaire d'appel de fonction n'est pas un formulaire d'appel, veuillez suivre le "Code de conversion" pour le convertir en formulaire d'appel.

À l'avenir, vous n'aurez aucun doute sur toutes les questions de test écrit liées à ce sujet.

Cet article fournit une explication connexe à ce sujet. Pour plus de contenu connexe, veuillez faire attention au site Web php chinois.

Recommandations associées :

À propos des mathématiques, des tableaux, des données

Explication des connaissances liées au HTML5/CSS3e

Résumé des API courantes utilisées par Javascript pour faire fonctionner le DOM

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!