javascript中關于”this”的面試題，你知道幾個？

在JavaScript中，this?表示函數調用上下文。this難點在于它有一個復雜的行為，這也是面試中經常被考的點。

本文列舉7個關于this有趣的面試問題:

• 問題1：變量 vs 屬性
• 問題2：Cat 的名字
• 問題3：延遲打招呼
• 問題4：人工方法
• 問題5：問候和告別
• 問題6：棘手的 length
• 問題7：調用參數

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!"??

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); // 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。