關于this的面試題有哪些

這篇文章給大家介紹關于this的面試題有哪些，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

問題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()); // What is logged?  const { getName } = cat; console.log(getName());     // What is logged?

答案：'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); // What is logged?   } };  setTimeout(object.logMessage, 1000);

答案：1秒后，打印 undefined。

盡管setTimeout()函數使用object.logMessage作為回調，但仍將object.logMessage用作常規函數，而不是方法。

在常規函數調用期間，this等于全局對象，即瀏覽器環境中的 window。

這就是為什么logMessage方法中的 this.message等于 window.message,即undefined。

問題4：人工方法

如何調用logMessage函數，讓它打印 "Hello, World!" ?

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

答案:

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

 message: 'Hello, World!' };  function logMessage() {   console.log(this.message); // logs 'Hello, World!' }  // Using func.call() method logMessage.call(object);  // Using func.apply() method logMessage.apply(object);  // Creating a bound function 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());    // What is logged? console.log(object.farewell()); // What is logged?

答案: 'Hello, World!' 和 'Goodbye, undefined!'。

當調用object.greet()時，在greet()方法內部，this值等于  object，因為greet是一個常規函數。因此object.greet()返回'Hello, World!'。

但是farewell()是一個箭頭函數，箭頭函數中的this值總是等于外部作用域中的this值。

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

問題6：棘手的 length

下面代碼打印什么：

var length = 4; function callback() {   console.log(this.length); // What is logged? }  const object = {   length: 5,   method(callback) {     callback();   } };  object.method(callback, 1, 2);

答案: 4

callback()是在method()內部使用常規函數調用來調用的。由于在常規函數調用期間的this值等于全局對象，所以this.length結果為window.length。。

第一個語句var length = 4，處于最外層的作用域，在全局對象 window 上創建一個屬性length。

問題7：調用參數

下面代碼打印什么：

var length = 4; function callback() {   console.log(this.length); // What is logged? }  const object = {   length: 5,   method() {     arguments[0]();   } };  object.method(callback, 1, 2);

答案: 3

obj.method(callback, 1, 2)被調用時有3個參數:callback,  1和2。結果，method()內部的參數特殊變量是如下結構的數組類對象:

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

因為arguments[0]()是arguments對象上的回調的方法調用，所以回調內部的參數等于arguments。所以  callback()中的this.length與arguments.length相同，即3。

關于關于this的面試題有哪些就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。