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

Question 1 : Variables vs Attributs

Le code suivant sera affiché Quoi :

const object = {
  message: 'Hello, World!',

  getMessage() {
    const message = 'Hello, Earth!';
    return this.message;
  }};

console.log(object.getMessage()); // 输出什么？？

Réponse :

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

Question 2 : Nom du chat

Que produira le code suivant :

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());     // 输出什么？？

Réponse :

Sortie :

et 'Fluffy''Fluffy'

Lorsqu'une fonction est appelée en tant que constructeur (

), 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 = namename

Crée une méthode

sur l'objet construit. Et en raison de l'utilisation de fonctions fléchées, this.getName = () => this.namethisgetName dans la fonction flèche est égal à dans la portée externe, qui est le constructeur . thisPet L'appel de

et

renvoie l'expression cat.getName(), qui est évaluée à getName(). this.name'Fluffy'

Question 3 : Sortie retardée

Que produit le code suivant :

const object = {
  message: 'Hello, World!',

  logMessage() {
    console.log(this.message); // 输出什么？？
  }
};

setTimeout(object.logMessage, 1000);

Réponse :

Après un délai de 1 seconde, sortie :

undefinedBien que la fonction

utilise

comme rappel, setTimeout() est toujours appelée comme une fonction normale plutôt que comme une méthode . object.logMessageobject.logMessageLors d'un appel de fonction régulier,

this

est égal à l'objet global, qui est dans le contexte du navigateur. windowC'est pourquoi le

à l'intérieur de la méthode

génère logMessage , qui est console.log(this.message). window.messageundefined

Question 4 : Compléter le code

Comment appeler la fonction logMessage et la laisser sortir

.

const object = {
  message: 'Hello, World!'
};

function logMessage() {
  console.log(this.message); // => "Hello, World!"
}

// 把你的代码写在这里.....

"Hello，World!"Réponse :

Il y a au moins 3 façons de le faire :

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

Que produira le code suivant :

const object = {
  who: 'World',

  greet() {
    return `Hello, ${this.who}!`;
  },

  farewell: () => {
    return `Goodbye, ${this.who}!`;
  }
};

console.log(object.greet());    // 输出什么？？
console.log(object.farewell()); // 输出什么？？

Réponse :

Sortie :

et

'Hello, World!''Goodbye, undefined!' lorsque appelé Lorsque

, à l'intérieur de la méthode

, 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

est une fonction flèche, et la valeur

dans la fonction flèche est toujours égale à la valeur farewell() dans la portée extérieure. La portée externe de thisthis

est la portée globale, où

est l'objet global. Donc farewell() renvoie en fait this, ce qui donne object.farewell(). 'Goodbye, ${window.who}!''Goodbye, undefined!'

Question 6 : Longueur délicate

Que produira le code suivant :

var length = 4;
function callback() {
  console.log(this.length); // 输出什么？？
}

const object = {
  length: 5,
  method(callback) {
    callback();
  }
};

object.method(callback, 1, 2);

Réponse :

Sortie :

4

est appelé à l'aide d'un appel de fonction régulier à l'intérieur de

. 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。

问题7：调用参数

以下代码会输出什么：

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!