JavaScript의 'this'에 관한 7가지 흥미로운 인터뷰 질문에 모두 올바르게 답할 수 있습니까?

관련 추천: 2021 빅 프론트엔드 면접 질문 요약(모음)

JavaScript에서 this는 함수 호출 컨텍스트입니다. this의 동작이 복잡하기 때문에 JavaScript 인터뷰에서는 항상 this에 대한 질문을 받습니다. this 是函数调用上下文。正是由于 this 的行为很复杂，所以在 JavaScript 面试中，总是会问到有关  this 的问题。

做好的准备面试的方法是练习，所以本文针对 this 关键字整理了 7 个有趣的面试：

注意：下面的 JavaScript 代码段以非严格模式运行。

目录：

• 问题1：变量 vs 属性

• 问题2：Cat 的名字

• 问题3：延迟输出

• 问题4：补全代码

• 问题5：问候与告别

• 问题6：棘手的 length

• 问题7：调用参数

相关教程推荐：javascript视频教程

问题1：变量 vs 属性

以下代码会输出什么：

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

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

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

答案：

输出： 'Hello, World!'

object.getMessage() 是一个方法调用，这就是为什么方法中的 this 等于 object 的原因。

方法中还有一个变量声明 const message ='Hello，Earth!'，但这个变量不会影响 this.message 的值。

问题2：Cat 的名字

以下代码会输出什么：

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

答案：

输出：'Fluffy' 和  'Fluffy'

当一个函数被当作构造函数调用时（ new Pet('Fluffy') ），构造函数内部的 this 等于构造的对象。

Pet 构造函数中的 this.name = name  表达式在构造的对象上创建 name 属性。

this.getName = () => this.name  在构造的对象上创建方法 getName。而且由于使用了箭头函数，箭头函数中的 this 等于外部作用域中的 this ，也就是构造函数 Pet。

调用 cat.getName() 和 getName() 会返回表达式 this.name，其计算结果为 'Fluffy'。

问题3：延迟输出

以下代码输出什么：

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

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

setTimeout(object.logMessage, 1000);

答案：

延迟1秒钟后，输出：undefined

尽管  setTimeout() 函数使用 object.logMessage 作为回调，但仍把 object.logMessage 作为常规函数而非方法调用。

在常规函数调用期间， this 等于全局对象，即浏览器环境中是 window。

这就是为什么 logMessage 方法内的 console.log(this.message) 输出 window.message ，即 undefined。

问题4：补全代码

如何调用logMessage函数，让它输出 "Hello，World!" 。

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

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

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

答案：

至少有 3 种方式，可以做到：

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();

问题5：问候与告别

以下代码会输出什么：

const object = {
  who: 'World',

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

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

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

答案：

输出： 'Hello, World!' 和 'Goodbye, undefined!'

当调用object.greet()时，在greet()方法内部，this值等于 object，因为greet是一个常规函数。因此object.greet()返回'Hello, World!'。

但是farewell()是一个箭头函数，箭头函数中的this值总是等于外部作用域中的this值。

farewell() 的外部作用域是全局作用域，其中 this 是全局对象。因此 object.farewell() 实际上会返回 'Goodbye, ${window.who}!' ，它的结果为 'Goodbye, undefined!'。

问题6：棘手的 length

以下代码会输出什么：

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

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

object.method(callback, 1, 2);

答案：

输出：4

callback()是在method()内部使用常规函数调用来调用的。由于在常规函数调用期间的 this 值等于全局对象，所以在 callback()  函数中 this.length 结果为 window.length

면접을 준비하는 가장 좋은 방법은 연습하는 것입니다. 따라서 이 기사에서는 this 키워드를 기반으로 7개의 흥미로운 인터뷰를 편집했습니다. 🎜🎜참고: 다음 JavaScript 코드 조각은 비엄격 모드에서 실행됩니다. . 🎜🎜🎜디렉터리: 🎜🎜

• 🎜질문 1: 변수와 ​​속성 🎜
• 🎜질문 2 ：고양이 이름🎜
• 🎜질문 3: 지연된 출력🎜
• 🎜질문 4: 전체 코드🎜
• 🎜질문 5: 인사 및 작별 인사🎜
• 🎜질문 6: 까다로운 길이🎜
• 🎜질문 7: 매개변수 호출🎜

🎜🎜관련 튜토리얼 권장 사항: javascript 비디오 튜토리얼🎜🎜

질문 1: 변수와 ​​속성🎜다음 코드는 무엇을 출력할까요?🎜

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

const object = {
  length: 5,
  method() {
    arguments[0]();
  }
};

object.method(callback, 1, 2);

답변:

🎜출력: 'Hello, World!'🎜🎜object . getMessage()는 메소드 호출이므로 메소드의 this가 object와 같습니다. 🎜🎜메서드에 const message ='Hello, Earth!' 변수 선언도 있지만 이 변수는 this.message 값에 영향을 미치지 않습니다. 🎜

질문 2: 고양이 이름🎜

🎜다음 코드는 무엇을 출력합니까? 🎜

{
  0: callback,
  1: 1, 
  2: 2, 
  length: 3 
}

답변:

🎜출력: 'Fluffy' 및 'Fluffy'🎜🎜함수가 생성자로 호출되는 경우( new Pet('Fluffy') ), this 생성자 내부는 생성된 객체와 동일합니다. 🎜🎜 Pet 생성자의 this.name = name 표현식은 생성된 객체에 name 속성을 ​​생성합니다. 🎜🎜this.getName = () => this.name 생성된 개체에 getName 메서드를 만듭니다. 그리고 화살표 함수를 사용하기 때문에 화살표 함수의 this는 생성자 Pet인 외부 범위의 this와 동일합니다. 🎜🎜cat.getName() 및 getName()을 호출하면 'Fluffy'로 평가되는 <code>this.name 표현식이 반환됩니다. . 🎜

질문 3: 지연된 출력🎜

🎜다음 코드는 무엇을 출력합니까? 🎜rrreee

답변:

🎜1초 지연 이후 출력: undefine🎜🎜setTimeout() 함수는 object.logMessage를 콜백으로 사용하지만 여전히 객체를 사용합니다. .logMessage는 메소드가 아닌 일반 함수로 호출됩니다. 🎜🎜일반 함수 호출 중에 <em>this</em>는 브라우저 환경에서 <code>window인 전역 개체와 동일합니다. 🎜🎜이것이 logMessage 메소드의 console.log(this.message)가 window.message, 즉 unjust를 출력하는 이유입니다. 코드 코드>. 🎜<h2 id="strong-질문-코드-완성-strong"><strong>질문 4: 코드 완성</strong></h2>🎜 <code>"Hello, World!"를 출력하도록 logMessage 함수를 호출하는 방법. 🎜rrreee

답변:

🎜 적어도 3가지 방법이 있습니다: 🎜rrreee

질문 5: 인사와 작별 인사

🎜다음 코드는 무엇을 출력할까요?🎜rrreee

답변:

🎜출력: 'Hello, World!' 및 'Goodbye, 정의되지 않음 !'🎜🎜 greet() 메서드 내부에서 object.greet()를 호출할 때 this 값은 같습니다. 이의를 제기하려면 인사가 일반 함수이기 때문입니다. 따라서 object.greet()는 'Hello, World!'를 반환합니다. 🎜🎜하지만 farewell()은 화살표 함수이고 화살표 함수의 this 값은 항상 외부의 this 값과 같습니다. 범위. 🎜🎜 farewell()의 외부 범위는 전역 범위이며, 여기서 this는 전역 개체입니다. 따라서 object.farewell()은 실제로 'Goodbye, ${window.who}!'를 반환하고 결과적으로 'Goodbye, undefine!'이 됩니다. . 🎜<h2 id="strong-질문-까다로운-길이-strong"><strong>질문 6: 까다로운 길이</strong></h2>🎜다음 코드는 무엇을 출력합니까? 🎜rrreee<h4 id="strong-답변-strong"><strong>답변: </strong></h4>🎜출력: 4🎜🎜callback()은 method() 내부의 일반 함수 호출을 사용하여 호출됩니다. 일반 함수 호출 중 this 값이 전역 개체와 동일하므로 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/

更多编程相关知识，请访问：编程视频！！

위 내용은 JavaScript의 'this'에 관한 7가지 흥미로운 인터뷰 질문에 모두 올바르게 답할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!