Maison >interface Web >js tutoriel >7 questions d'entretien intéressantes sur « ce » en JavaScript, pouvez-vous y répondre correctement ?
Recommandations associées : Résumé des questions d'entretien Big Front-End 2021 (Collection)
En JavaScript, this
est le contexte de l'appel de fonction. Précisément en raison de la complexité du comportement de this
, des questions sur this
sont toujours posées dans les entretiens JavaScript.
La meilleure façon de préparer un entretien est de s'entraîner, c'est pourquoi cet article a compilé 7 entretiens intéressants pour le mot-clé this
:
Remarque : l'extrait de code JavaScript suivant s'exécute en non- mode strict.
Répertoire :
Question 1 : Variables vs Attributs
Question 2 : Nom du chat
Question 3 : Sortie différée
Question 4 : Code de complétion
Question 5 : Salutations et adieux
Question 6 : Longueur délicate
Question 7 : Paramètres d'appel
Tutoriels associés recommandés : Tutoriel vidéo javascript
Le code suivant sera affiché Quoi :
const object = { message: 'Hello, World!', getMessage() { const message = 'Hello, Earth!'; return this.message; }}; console.log(object.getMessage()); // 输出什么??
Sortie : 'Hello, World!'
object.getMessage()
est un appel de méthode, c'est pourquoi le est égal à this
. Il existe également une déclaration de variable object
dans la méthode
, mais cette variable n'affectera pas la valeur de const message ='Hello,Earth!'
. this.message
function Pet(name) { this.name = name; this.getName = () => this.name; } const cat = new Pet('Fluffy'); console.log(cat.getName()); // 输出什么?? const { getName } = cat; console.log(getName()); // 输出什么??
et 'Fluffy'
'Fluffy'
), new Pet('Fluffy')
ce à l'intérieur du constructeur est égal à l'objet construit. L'expression
dans le constructeur crée une propriété Pet
sur l'objet construit. this.name = name
name
sur l'objet construit. Et en raison de l'utilisation de fonctions fléchées, this.getName = () => this.name
thisgetName
dans la fonction flèche est égal à dans la portée externe, qui est le constructeur . this
Pet
L'appel de
renvoie l'expression cat.getName()
, qui est évaluée à getName()
. this.name
'Fluffy'
const object = { message: 'Hello, World!', logMessage() { console.log(this.message); // 输出什么?? } }; setTimeout(object.logMessage, 1000);Réponse :
undefined
Bien que la fonction
comme rappel, setTimeout()
est toujours appelée comme une fonction normale plutôt que comme une méthode . object.logMessage
object.logMessage
Lors d'un appel de fonction régulier,
est égal à l'objet global, qui est dans le contexte du navigateur. window
C'est pourquoi le
génère logMessage
, qui est console.log(this.message)
. window.message
undefined
const object = { message: 'Hello, World!' }; function logMessage() { console.log(this.message); // => "Hello, World!" } // 把你的代码写在这里.....
"Hello,World!"
Réponse : const object = { message: 'Hello, World!' }; function logMessage() { console.log(this.message); // => 'Hello, World!' } // 使用 func.call() 方法 logMessage.call(object); // 使用 func.apply() 方法 logMessage.apply(object); // 使用函数绑定 const boundLogMessage = logMessage.bind(object); boundLogMessage();Question 5 : Salutations et adieux
const object = { who: 'World', greet() { return `Hello, ${this.who}!`; }, farewell: () => { return `Goodbye, ${this.who}!`; } }; console.log(object.greet()); // 输出什么?? console.log(object.farewell()); // 输出什么??Réponse :
'Hello, World!'
'Goodbye, undefined!'
lorsque appelé Lorsque
, la valeur object.greet()
est égale à l'objet, car greet()
est une fonction régulière. Alors this
revient greet
. object.greet()
'Hello, World!'
Mais
dans la fonction flèche est toujours égale à la valeur farewell()
dans la portée extérieure. La portée externe de this
this
est l'objet global. Donc farewell()
renvoie en fait this
, ce qui donne object.farewell()
. 'Goodbye, ${window.who}!'
'Goodbye, undefined!'
var length = 4; function callback() { console.log(this.length); // 输出什么?? } const object = { length: 5, method(callback) { callback(); } }; object.method(callback, 1, 2);Réponse :
4
. Puisque la valeur de callback()
thismethod()
lors d'un appel de fonction régulier est égale à l'objet global, dans la fonction donne callback()
. this.length
第一个语句var length = 4
,处于最外层的作用域,在全局对象上创建了属性 length
,所以 window.length
变为 4
。
最后,在 callback()
函数内部,`this.length
的值为 window.length
,最后输出 4
。
以下代码会输出什么:
var length = 4; function callback() { console.log(this.length); // 输出什么?? } const object = { length: 5, method() { arguments[0](); } }; object.method(callback, 1, 2);
输出:3
obj.method(callback, 1, 2)
被调用时有3
个参数:callback
、1
和 2
。结果, method()
内部的arguments
特殊变量是有如下结构的数组类对象:
{ 0: callback, 1: 1, 2: 2, length: 3 }
因为 arguments[0]()
是 arguments
对象上 callback
的方法调用,所以 callback
内部的 this
等于 arguments
。所以 callback()
内部的 this.length
与 arguments.length
的结果是相同的,都是3
。
如果你答对了 5 个以上,那么你对 this
关键字掌握的情况是很不错的。否则,你就需要好好复习一下 this
关键字。
本文翻译于:https://dmitripavlutin.com/javascript-this-interview-questions/
更多编程相关知识,请访问:编程视频!!
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!