奇米色99欧美一区二区,欧美伊人视频,高潮流白浆在线观看

技術(shù)頻道 - js技術(shù)

JavaScript面試題：關(guān)于this關(guān)鍵字的6個面試問題

作者:admin 時間:2022-6-8 19:55:48 瀏覽:

在這篇文章中，我整理了關(guān)于this關(guān)鍵字的6個面試問題，這些問題在JavaScript面試中常常會被問到，你能回答嗎？

注意：下面的 JavaScript 片段在非嚴(yán)格模式下運(yùn)行。

1、以下代碼片段在控制臺輸出什么？

const object = {
  message: 'Hello, World!',
  getMessage() {
    const message = 'Hello, Earth!';
    return this.message;
  }
};
console.log(object.getMessage()); // 輸出什么?

答案

Hello, World! 被記錄到控制臺。查看演示。

object.getMessage()是一個方法調(diào)用，這就是為什么this在方法內(nèi)部等于object。

方法內(nèi)部還有一個變量聲明const message = 'Hello, Earth!'。該變量無論如何都不會影響this.message的值。

2、以下代碼片段在控制臺輸出什么？

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'記錄到控制臺。查看演示。

當(dāng)函數(shù)作為構(gòu)造函數(shù)new Pet('Fluffy')調(diào)用時，構(gòu)造函數(shù)內(nèi)部的this等于構(gòu)造的對象。

Pet構(gòu)造函數(shù)中的表達(dá)式 this.name = name 在構(gòu)造對象上創(chuàng)建name屬性。

this.getName = () => this.name 在構(gòu)造對象上創(chuàng)建一個方法getName。并且由于使用了箭頭函數(shù)，箭頭函數(shù)內(nèi)部的this等于外部作用域(構(gòu)造函數(shù)Pet)的this。

調(diào)用cat.getName()以及getName()返回this.name計算結(jié)果為'Fluffy'的表達(dá)式。

3、以下代碼片段在控制臺輸出什么？

const object = {
  message: 'Hello, World!',
  logMessage() {
    console.log(this.message); // 輸出什么?
  }
};
setTimeout(object.logMessage, 1000);

答案

延遲 1 秒后，undefined記錄到控制臺。查看演示。

雖然setTimeout()函數(shù)將object.logMessage用作回調(diào)，但object.logMessage仍然是作為常規(guī)函數(shù)調(diào)用而不是方法。

在常規(guī)函數(shù)調(diào)用期間，this等于全局對象，window在瀏覽器環(huán)境中也是如此。

這就是為什么logMessage內(nèi)部的console.log(this.message)方法輸出window.message是undefined。

挑戰(zhàn)一下：如何修復(fù)此代碼以便將'Hello, World!'輸出到控制臺？查看演示

4、以下代碼片段在控制臺輸出什么？

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!'記錄到控制臺。查看演示。

調(diào)用object.greet()時，greet()方法內(nèi)部的this值等于object因為greet是一個常規(guī)函數(shù)。從而object.greet()返回'Hello, World!'。

但是farewell()是一個箭頭函數(shù)，箭頭函數(shù)內(nèi)部的this值總是等于外部范圍的this。

farewell()的外部作用域是全局作用域，這里this是全局對象。因此object.farewell()實際上返回'Goodbye, ${window.who}!'，其計算結(jié)果為'Goodbye, undefined!'。

5、以下代碼片段在控制臺輸出什么？

var length = 4;
function callback() {
  console.log(this.length); // 輸出什么?
}
const object = {
  length: 5,
  method(callback) {
    callback();
  }
};
object.method(callback, 1, 2);

答案

4被記錄到控制臺。查看演示。

callback()使用method()內(nèi)部的常規(guī)函數(shù)??調(diào)用來調(diào)用，由于在常規(guī)函數(shù)調(diào)用期間this值等于全局對象，因此callback()函數(shù)內(nèi)部的this.length被評估為window.length。

第一條語句var length = 4位于最外層范圍內(nèi)，在全局對象上創(chuàng)建一個length屬性：window.length 等于 4。

最后，在callback()函數(shù)內(nèi)部，this.length評估為window.length——4被記錄到控制臺。

6、以下代碼片段在控制臺輸出什么？

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個參數(shù)調(diào)用：callback、1和2，結(jié)果，method()內(nèi)部的arguments特殊變量是如下結(jié)構(gòu)的類似數(shù)組對象：

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

因為arguments[0]()是callback對參數(shù)對象的方法調(diào)用，callback內(nèi)部的this，等于arguments。結(jié)果callback()內(nèi)部的this.length與arguments.length相同，等于3。

總結(jié)

本文通過6個關(guān)于this關(guān)鍵字的面試問題，介紹了this的一些基礎(chǔ)知識，通過本文的介紹，你應(yīng)該對this關(guān)鍵字的認(rèn)識有了進(jìn)一步的了解。

相關(guān)文章