每日3題

34 以下代碼執(zhí)行后，控制臺(tái)中的輸出內(nèi)容為？

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

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

35 以下代碼執(zhí)行后，控制臺(tái)中的輸出內(nèi)容為？

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

console.log(x);

36 以下代碼執(zhí)行后，控制臺(tái)中的輸出內(nèi)容為？

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

• 公眾號(hào)【今天也要寫(xiě)bug】更多前端面試題

答案及解析

34

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

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

35

// 答案：1undefined
// 考察類(lèi)型轉(zhuǎn)換、typeof、加法賦值

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

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

36

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

function f() {
  return f;
}
console.log(new f() instanceof f);
// new 運(yùn)算符：如果構(gòu)造函數(shù)顯式返回一個(gè)對(duì)象，則該對(duì)象會(huì)覆蓋 new 創(chuàng)建的對(duì)象
// new f() 得到的對(duì)象是 f

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