Six obstacles à JavaScript

Compte tenu de la manière dont fonctionne cette coquette, la compréhension de ce sujet est un sujet intemporel, et cet article tente de le résoudre en le divisant en six morceaux. Restez avec ce monstre ennuyeux.

Tout d'abord

tout est une question de contexte.

Pour parler franchement, c'est trouver le patron, trouver l'objet (objet contextuel) qui possède le contexte actuel (contexte).

Les grands patrons peuvent être divisés en six niveaux. Plus le niveau est élevé, plus le pouvoir est grand. Celui-ci ne reconnaîtra que le plus grand.

Le premier niveau : la fin du monde

Le patron le moins puissant est le pneu de secours Dans des circonstances normales, c'est la situation globale, et dans le navigateur, c'est le. window ; dans le cas d'une utilisation stricte, elle n'est pas définie.

function showThis () {
console.log(this)
}
 
function showStrictThis () {
'use strict'
console.log(this)
}
 
showThis() // window
showStrictThis() // undefined

Deuxième niveau : transformer la pierre en or

Le patron du deuxième niveau le dit sans détour pour trouver le point devant cette fonction.

Si la fonction qui utilise ceci appartient à un objet contextuel, alors cet objet contextuel est lié à celui-ci.

Par exemple, dans l'exemple suivant, boss est l'objet contextuel de returnThis, ou returnThis appartient à boss.

var boss = {
name: 'boss',
returnThis () {
return this
}
}
 
boss.returnThis() === boss // true

Soyez prudent dans l'exemple suivant. Pouvez-vous trouver la réponse ?

var boss1 = {
name: 'boss1',
returnThis () {
return this
}
}
 
var boss2 = {
name: 'boss2',
returnThis () {
return boss1.returnThis()
}
}
 
var boss3 = {
name: 'boss3',
returnThis () {
var returnThis = boss1.returnThis
return returnThis()
}
}
 
boss1.returnThis() // boss1
boss2.returnThis() // ?
boss3.returnThis() // ?

La réponse est boss1 et fenêtre Oh, vous avez bien deviné ?

Regardez simplement la fonction qui utilise cela.

Dans boss2.returnThis, la fonction qui utilise this est boss1.returnThis, donc ceci est lié à boss1

Dans boss3.returnThis, la fonction qui utilise this est returnThis, donc ceci est obligé de commander une roue de secours.

Comment lier cela à boss2 ?

var boss1 = {
name: 'boss1',
returnThis () {
return this
}
}
 
var boss2 = {
name: 'boss2',
returnThis: boss1.returnThis
}
 
boss2.returnThis() //boss2

Oui, tant que la fonction utilisant ceci appartient à boss2.

Troisième niveau : le bout des doigts pour le mariage

Les patrons du troisième niveau sont Object.prototype.call et Object.prototype.apply, qui peuvent le spécifier via des paramètres. (Notez que cela ne peut pas être directement attribué, this = 2 signalera une ReferenceError.)

function returnThis () {
return this
}
 
var boss1 = { name: 'boss1' }
 
returnThis() // window
returnThis.call(boss1) // boss1
returnThis.apply(boss1) // boss1

Quatrième niveau : les uns les autres

Le patron du quatrième niveau est Object.prototype.bind , il fournit non seulement une liaison permanente grâce à une nouvelle fonction, mais remplace également les commandes du boss de troisième niveau.

function returnThis () {
return this
}
 
var boss1 = { name: 'boss1'}
 
var boss1returnThis = returnThis.bind(boss1)
 
boss1returnThis() // boss1
 
var boss2 = { name: 'boss2' }
boss1returnThis.call(boss2) // still boss1

Cinquième niveau : Il y a quelque chose à l'intérieur

Un endroit qui est plus facile à ignorer et à lier, c'est nouveau. Lorsque nous créons une nouvelle fonction, celle-ci sera automatiquement liée au nouvel objet, puis la fonction sera appelée. Il remplace la liaison de bind .

function showThis () {
console.log(this)
}
 
showThis() // window
new showThis() // showThis
 
var boss1 = { name: 'boss1' }
showThis.call(boss1) // boss1
new showThis.call(boss1) // TypeError
 
var boss1showThis = showThis.bind(boss1)
boss1showThis() // boss1
new boss1showThis() // showThis

Niveau 6 : Montagnes d'ordres militaires

Le dernier boss puissant est la fonction flèche d'ES2015. Ceci dans les fonctions fléchées n'est plus glamour et est définitivement scellé dans la portée lexicale actuelle, appelée Lexical this, qui peut être déterminée avant l'exécution du code. Aucun autre grand joueur ne peut le couvrir.

L'avantage de ceci est qu'il est pratique d'utiliser la portée actuelle de la fonction de rappel sans craindre de semer la confusion.

Donc, pour les fonctions fléchées, il suffit de regarder où elles sont créées.

Si vous êtes intéressé par la portée lexicale implémentée par V8, vous pouvez jeter un œil ici .

function callback (cb) {
cb()
}
 
callback(() => { console.log(this) }) // window
 
var boss1 = {
name: 'boss1',
callback: callback,
callback2 () {
callback(() => { console.log(this) })
}
}
 
boss1.callback(() => { console.log(this) }) // still window
boss1.callback2(() => { console.log(this) }) // boss1

Vous devez faire attention à l'utilisation étrange suivante :

var returnThis = () => this
 
returnThis() // window
new returnThis() // TypeError
 
var boss1 = {
name: 'boss1',
returnThis () {
var func = () => this
return func()
}
}
 
returnThis.call(boss1) // still window
 
var boss1returnThis = returnThis.bind(boss1)
boss1returnThis() // still window
 
boss1.returnThis() // boss1
 
var boss2 = {
name: 'boss2',
returnThis: boss1.returnThis
}
 
boss2.returnThis() // boss2

Si vous ne savez pas pourquoi c'est boss2 à la fin, continuez à comprendre "Pour les fonctions fléchées , il suffit de le regarder dans Où la phrase a-t-elle été créée ?

Ce qui précède est le contenu des six obstacles de JavaScript This. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !