前端面試題JavaScript篇——2022-09-13

每日3題

34 以下代碼執行後，控制臺中的輸出內容為？

const num = {
  a: 10,
  add() {
    return this.a + 2;
  },
  reduce: () => this.a - 2,
};

console.log(num.add());
console.log(num.reduce());

35 以下代碼執行後，控制臺中的輸出內容為？

var x = 1;
if (function f() {}) {
  x += typeof f;
}

console.log(x);

36 以下代碼執行後，控制臺中的輸出內容為？

function f() {
  return f;
}
console.log(new f() instanceof f);

• 公眾號【今天也要寫bug】更多前端面試題

答案及解析

34

// 答案：12 NaN
// 考察普通函數和箭頭函數中 this 的區別
// 普通函數中的 this 是運行時決定
// 箭頭函數中的 this 是編譯時就決定了的
const num = {
  a: 10,
  add() {
    return this.a + 2;
  },
  reduce: () => this.a - 2,
};

console.log(num.add()); // 隱式綁定：this 指向 num，因此輸出 12
console.log(num.reduce());
// 箭頭函數：this 指向 window，window 上沒有屬性 a
// 所以 this.a=undefined，最終輸出 NaN

35

// 答案：1undefined
// 考察類型轉換、typeof、加法賦值

var x = 1;
// if 條件中的 function f() {} 是 truthy 值
// 所謂 truthy（真值）指的是在布爾值上下文中，轉換後的值為 true 的值
// 所有除 false、0、-0、0n、""、null、undefined 和 NaN 以外的皆為真值
// 關於 truthy 和 falsy 的詳細說明，可查閱 MDN 文檔
if (function f() {}) {
  x += typeof f;
}
// typeof 返回的是一個字元串
// 加法賦值操作符 (+=) 將右操作數的值添加到變數，並將結果分配給該變數。
// 即先使用相加運算（+）得到結果，再賦值
// 相加運算符 (+) 用於對兩個操作數進行相加運算，如果操作數中有一方為字元串，
// 則該運算符將兩個操作數連接成一個字元串。

console.log(x); // 綜上，最終輸出 1undefined

36

// 答案：false
// 考察 new、原型鏈、instanceof

function f() {
  return f;
}
console.log(new f() instanceof f);
// new 運算符：如果構造函數顯式返回一個對象，則該對象會覆蓋 new 創建的對象
// new f() 得到的對象是 f

// instanceof 方法：判斷函數（右）的 prototype 屬性是否會出現在對象（左）的原型鏈上
// new f() instanceof f，即 f instanceof f
// 顯然 f 的 prototype 屬性不會出現在 f 的原型鏈上
// f.__proto__ => Function.prototype