閱讀(1.9k) 書簽贊(0) 我要糾錯

前端面試代碼輸出篇

2023-02-17 10:50 更新

前言：

代碼輸出結果也是面試中?？嫉念}目，一段代碼中可能涉及到很多的知識點，這就考察到了應聘者的基礎能力。在前端面試中，?？嫉拇a輸出問題主要涉及到以下知識點：異步編程、事件循環(huán)、this指向、作用域、變量提升、閉包、原型、繼承等，這些知識點往往不是單獨出現的，而是在同一段代碼中包含多個知識點。所以，筆者將這些問題大致分為四類進行討論。這里不會系統(tǒng)的闡述基礎知識，而是通過面試例題的形式，來講述每個題目的知識點以及代碼的執(zhí)行過程。如果會了這些例題，在前端面試中多數代碼輸出問題就可以輕而易舉的解決了。

一、異步&事件循環(huán)

1. 代碼輸出結果

const promise = new Promise((resolve, reject) => {
  console.log(1);
  console.log(2);
});
promise.then(() => {
  console.log(3);
});
console.log(4);

輸出結果如下：

1 
2 
4

promise.then 是微任務，它會在所有的宏任務執(zhí)行完之后才會執(zhí)行，同時需要promise內部的狀態(tài)發(fā)生變化，因為這里內部沒有發(fā)生變化，一直處于pending狀態(tài)，所以不輸出3。

2. 代碼輸出結果

const promise1 = new Promise((resolve, reject) => {
  console.log('promise1')
  resolve('resolve1')
})
const promise2 = promise1.then(res => {
  console.log(res)
})
console.log('1', promise1);
console.log('2', promise2);

輸出結果如下：

promise1
1 Promise{<resolved>: resolve1}
2 Promise{<pending>}
resolve1

需要注意的是，直接打印promise1，會打印出它的狀態(tài)值和參數。

代碼執(zhí)行過程如下：

script是一個宏任務，按照順序執(zhí)行這些代碼；
首先進入Promise，執(zhí)行該構造函數中的代碼，打印 ?promise1?；
碰到 ?resolve?函數, 將 ?promise1?的狀態(tài)改變?yōu)?nbsp;?resolved?, 并將結果保存下來；
碰到 ?promise1.then?這個微任務，將它放入微任務隊列；
?promise2?是一個新的狀態(tài)為 ?pending?的 ?Promise?；
執(zhí)行同步代碼1，同時打印出 ?promise1?的狀態(tài)是 ?resolved?；
執(zhí)行同步代碼2，同時打印出 ?promise2?的狀態(tài)是 ?pending?；
宏任務執(zhí)行完畢，查找微任務隊列，發(fā)現 ?promise1.then?這個微任務且狀態(tài)為 ?resolved?，執(zhí)行它。

3. 代碼輸出結果

const promise = new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log("timerStart");
    resolve("success");
    console.log("timerEnd");
  }, 0);
  console.log(2);
});
promise.then((res) => {
  console.log(res);
});
console.log(4);

輸出結果如下：

1
2
4
timerStart
timerEnd
success

代碼執(zhí)行過程如下：

首先遇到Promise構造函數，會先執(zhí)行里面的內容，打印 1；
遇到定時器 ?steTimeout?，它是一個宏任務，放入宏任務隊列；
繼續(xù)向下執(zhí)行，打印出2；
由于 ?Promise?的狀態(tài)此時還是 ?pending?，所以 ?promise.then?先不執(zhí)行；
繼續(xù)執(zhí)行下面的同步任務，打印出4；
此時微任務隊列沒有任務，繼續(xù)執(zhí)行下一輪宏任務，執(zhí)行 ?steTimeout?；
首先執(zhí)行 ?timerStart?，然后遇到了 ?resolve?，將 ?promise?的狀態(tài)改為 ?resolved?且保存結果并將之前的 ?promise.then?推入微任務隊列，再執(zhí)行 ?timerEnd?；
執(zhí)行完這個宏任務，就去執(zhí)行微任務 ?promise.then?，打印出 ?resolve?的結果。

4. 代碼輸出結果

Promise.resolve().then(() => {
  console.log('promise1');
  const timer2 = setTimeout(() => {
    console.log('timer2')
  }, 0)
});
const timer1 = setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(() => {
    console.log('promise2')
  })
}, 0)
console.log('start');

輸出結果如下：

start
promise1
timer1
promise2
timer2

代碼執(zhí)行過程如下：

首先，?Promise.resolve().then?是一個微任務，加入微任務隊列
執(zhí)行timer1，它是一個宏任務，加入宏任務隊列
繼續(xù)執(zhí)行下面的同步代碼，打印出 ?start?
這樣第一輪宏任務就執(zhí)行完了，開始執(zhí)行微任務 ?Promise.resolve().then?，打印出 ?promise1?
遇到 ?timer2?，它是一個宏任務，將其加入宏任務隊列，此時宏任務隊列有兩個任務，分別是 ?timer1?、?timer2?；
這樣第一輪微任務就執(zhí)行完了，開始執(zhí)行第二輪宏任務，首先執(zhí)行定時器 ?timer1?，打印 ?timer1?；
遇到 ?Promise.resolve().then?，它是一個微任務，加入微任務隊列
開始執(zhí)行微任務隊列中的任務，打印 ?promise2?；
最后執(zhí)行宏任務 ?timer2?定時器，打印出 ?timer2?；

5. 代碼輸出結果

const promise = new Promise((resolve, reject) => {
    resolve('success1');
    reject('error');
    resolve('success2');
});
promise.then((res) => {
    console.log('then:', res);
}).catch((err) => {
    console.log('catch:', err);
})

輸出結果如下：

then：success1

這個題目考察的就是Promise的狀態(tài)在發(fā)生變化之后，就不會再發(fā)生變化。開始狀態(tài)由 pending變?yōu)?nbsp;resolve，說明已經變?yōu)橐淹瓿蔂顟B(tài)，下面的兩個狀態(tài)的就不會再執(zhí)行，同時下面的catch也不會捕獲到錯誤。

6. 代碼輸出結果

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

輸出結果如下：

1
Promise {<fulfilled>: undefined}

Promise.resolve方法的參數如果是一個原始值，或者是一個不具有then方法的對象，則Promise.resolve方法返回一個新的Promise對象，狀態(tài)為resolved，Promise.resolve方法的參數，會同時傳給回調函數。

then方法接受的參數是函數，而如果傳遞的并非是一個函數，它實際上會將其解釋為then(null)，這就會導致前一個Promise的結果會傳遞下面。

7. 代碼輸出結果

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 1000)
})
const promise2 = promise1.then(() => {
  throw new Error('error!!!')
})
console.log('promise1', promise1)
console.log('promise2', promise2)
setTimeout(() => {
  console.log('promise1', promise1)
  console.log('promise2', promise2)
}, 2000)

輸出結果如下：

promise1 Promise {<pending>}
promise2 Promise {<pending>}

Uncaught (in promise) Error: error!!!
promise1 Promise {<fulfilled>: "success"}
promise2 Promise {<rejected>: Error: error!!}

8. 代碼輸出結果

Promise.resolve(1)
  .then(res => {
    console.log(res);
    return 2;
  })
  .catch(err => {
    return 3;
  })
  .then(res => {
    console.log(res);
  });

輸出結果如下：

1   
2

Promise是可以鏈式調用的，由于每次調用 .then 或者 .catch 都會返回一個新的 promise，從而實現了鏈式調用, 它并不像一般任務的鏈式調用一樣return this。

上面的輸出結果之所以依次打印出1和2，是因為 resolve(1)之后走的是第一個then方法，并沒有進catch里，所以第二個then中的res得到的實際上是第一個then的返回值。并且return 2會被包裝成 resolve(2)，被最后的then打印輸出2。

9. 代碼輸出結果

Promise.resolve().then(() => {
  return new Error('error!!!')
}).then(res => {
  console.log("then: ", res)
}).catch(err => {
  console.log("catch: ", err)
})

輸出結果如下：

"then: " "Error: error!!!"

返回任意一個非 promise 的值都會被包裹成 promise 對象，因此這里的 return new Error('error!!!')也被包裹成了 return Promise.resolve(new Error('error!!!'))，因此它會被then捕獲而不是catch。

10. 代碼輸出結果

const promise = Promise.resolve().then(() => {
  return promise;
})
promise.catch(console.err)

輸出結果如下：

Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

這里其實是一個坑，.then 或 .catch 返回的值不能是 promise 本身，否則會造成死循環(huán)。

11. 代碼輸出結果

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

輸出結果如下：

看到這個題目，好多的then，實際上只需要記住一個原則：.then 或 .catch 的參數期望是函數，傳入非函數則會發(fā)生值透傳。

第一個then和第二個then中傳入的都不是函數，一個是數字，一個是對象，因此發(fā)生了透傳，將 resolve(1) 的值直接傳到最后一個then里，直接打印出1。

12. 代碼輸出結果

Promise.reject('err!!!')
  .then((res) => {
    console.log('success', res)
  }, (err) => {
    console.log('error', err)
  }).catch(err => {
    console.log('catch', err)
  })

輸出結果如下：

error err!!!

我們知道，.then函數中的兩個參數：

第一個參數是用來處理Promise成功的函數
第二個則是處理失敗的函數

也就是說 Promise.resolve('1')的值會進入成功的函數，Promise.reject('2')的值會進入失敗的函數。

在這道題中，錯誤直接被 then的第二個參數捕獲了，所以就不會被 catch捕獲了，輸出結果為：error err!!!'

但是，如果是像下面這樣：

Promise.resolve()
  .then(function success (res) {
    throw new Error('error!!!')
  }, function fail1 (err) {
    console.log('fail1', err)
  }).catch(function fail2 (err) {
    console.log('fail2', err)
  })

在 then的第一參數中拋出了錯誤，那么他就不會被第二個參數不活了，而是被后面的 catch捕獲到。

13. 代碼輸出結果

Promise.resolve('1')
  .then(res => {
    console.log(res)
  })
  .finally(() => {
    console.log('finally')
  })
Promise.resolve('2')
  .finally(() => {
    console.log('finally2')
    return '我是finally2返回的值'
  })
  .then(res => {
    console.log('finally2后面的then函數', res)
  })

輸出結果如下：

1
finally2
finally
finally2后面的then函數 2

.finally()一般用的很少，只要記住以下幾點就可以了：

?.finally()?方法不管Promise對象最后的狀態(tài)如何都會執(zhí)行
?.finally()?方法的回調函數不接受任何的參數，也就是說你在 ?.finally()?函數中是無法知道Promise最終的狀態(tài)是 ?resolved?還是 ?rejected?的
它最終返回的默認會是一個上一次的Promise對象值，不過如果拋出的是一個異常則返回異常的Promise對象。
finally本質上是then方法的特例

.finally()的錯誤捕獲：

Promise.resolve('1')
  .finally(() => {
    console.log('finally1')
    throw new Error('我是finally中拋出的異常')
  })
  .then(res => {
    console.log('finally后面的then函數', res)
  })
  .catch(err => {
    console.log('捕獲錯誤', err)
  })

輸出結果為：

'finally1'
'捕獲錯誤' Error: 我是finally中拋出的異常

14. 代碼輸出結果

function runAsync (x) {
    const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))
    return p
}

Promise.all([runAsync(1), runAsync(2), runAsync(3)]).then(res => console.log(res))

輸出結果如下：

1
2
3
[1, 2, 3]

首先，定義了一個Promise，來異步執(zhí)行函數runAsync，該函數傳入一個值x，然后間隔一秒后打印出這個x。

之后再使用 Promise.all來執(zhí)行這個函數，執(zhí)行的時候，看到一秒之后輸出了1，2，3，同時輸出了數組[1, 2, 3]，三個函數是同步執(zhí)行的，并且在一個回調函數中返回了所有的結果。并且結果和函數的執(zhí)行順序是一致的。

15. 代碼輸出結果

function runAsync (x) {
  const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))
  return p
}
function runReject (x) {
  const p = new Promise((res, rej) => setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x))
  return p
}
Promise.all([runAsync(1), runReject(4), runAsync(3), runReject(2)])
       .then(res => console.log(res))
       .catch(err => console.log(err))

輸出結果如下：

// 1s后輸出
1
3
// 2s后輸出
2
Error: 2
// 4s后輸出
4

可以看到。catch捕獲到了第一個錯誤，在這道題目中最先的錯誤就是 runReject(2)的結果。如果一組異步操作中有一個異常都不會進入 .then()的第一個回調函數參數中。會被 .then()的第二個回調函數捕獲。

16. 代碼輸出結果

function runAsync (x) {
  const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))
  return p
}
Promise.race([runAsync(1), runAsync(2), runAsync(3)])
  .then(res => console.log('result: ', res))
  .catch(err => console.log(err))

輸出結果如下：

1
'result: ' 1
2
3

then只會捕獲第一個成功的方法，其他的函數雖然還會繼續(xù)執(zhí)行，但是不是被then捕獲了。

17. 代碼輸出結果

function runAsync(x) {
  const p = new Promise(r =>
    setTimeout(() => r(x, console.log(x)), 1000)
  );
  return p;
}
function runReject(x) {
  const p = new Promise((res, rej) =>
    setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x)
  );
  return p;
}
Promise.race([runReject(0), runAsync(1), runAsync(2), runAsync(3)])
  .then(res => console.log("result: ", res))
  .catch(err => console.log(err));

輸出結果如下：

0
Error: 0
1
2
3

可以看到在catch捕獲到第一個錯誤之后，后面的代碼還不執(zhí)行，不過不會再被捕獲了。

注意：all和 race傳入的數組中如果有會拋出異常的異步任務，那么只有最先拋出的錯誤會被捕獲，并且是被then的第二個參數或者后面的catch捕獲；但并不會影響數組中其它的異步任務的執(zhí)行。

18. 代碼輸出結果

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
async1();
console.log('start')

輸出結果如下：

async1 start
async2
start
async1 end

代碼的執(zhí)行過程如下：

首先執(zhí)行函數中的同步代碼 ?async1 start?，之后遇到了 ?await?，它會阻塞 ?async1?后面代碼的執(zhí)行，因此會先去執(zhí)行 ?async2?中的同步代碼 ?async2?，然后跳出 ?async1?；
跳出 ?async1?函數后，執(zhí)行同步代碼 ?start?；
在一輪宏任務全部執(zhí)行完之后，再來執(zhí)行 ?await?后面的內容 ?async1 end?。

這里可以理解為await后面的語句相當于放到了new Promise中，下一行及之后的語句相當于放在Promise.then中。

19. 代碼輸出結果

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
  setTimeout(() => {
    console.log('timer1')
  }, 0)
}
async function async2() {
  setTimeout(() => {
    console.log('timer2')
  }, 0)
  console.log("async2");
}
async1();
setTimeout(() => {
  console.log('timer3')
}, 0)
console.log("start")

輸出結果如下：

async1 start
async2
start
async1 end
timer2
timer3
timer1

代碼的執(zhí)行過程如下：

首先進入 ?async1?，打印出 ?async1 start?；
之后遇到 ?async2?，進入 ?async2?，遇到定時器 ?timer2?，加入宏任務隊列，之后打印 ?async2?；
由于 ?async2?阻塞了后面代碼的執(zhí)行，所以執(zhí)行后面的定時器 ?timer3?，將其加入宏任務隊列，之后打印 ?start?；
然后執(zhí)行?async2?后面的代碼，打印出 ?async1 end?，遇到定時器?timer1?，將其加入宏任務隊列；
最后，宏任務隊列有三個任務，先后順序為 ?timer2?，?timer3?，?timer1?，沒有微任務，所以直接所有的宏任務按照先進先出的原則執(zhí)行。

20. 代碼輸出結果

async function async1 () {
  console.log('async1 start');
  await new Promise(resolve => {
    console.log('promise1')
  })
  console.log('async1 success');
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

輸出結果如下：

script start
async1 start
promise1
script end

這里需要注意的是在 async1中 await后面的Promise是沒有返回值的，也就是它的狀態(tài)始終是 pending狀態(tài)，所以在 await之后的內容是不會執(zhí)行的，包括 async1后面的 .then。

21. 代碼輸出結果

async function async1 () {
  console.log('async1 start');
  await new Promise(resolve => {
    console.log('promise1')
    resolve('promise1 resolve')
  }).then(res => console.log(res))
  console.log('async1 success');
  return 'async1 end'
}
console.log('srcipt start')
async1().then(res => console.log(res))
console.log('srcipt end')

這里是對上面一題進行了改造，加上了resolve。

輸出結果如下：

script start
async1 start
promise1
script end
promise1 resolve
async1 success
async1 end

22. 代碼輸出結果

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}

async function async2() {
  console.log("async2");
}

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

async1();

new Promise(resolve => {
  console.log("promise1");
  resolve();
}).then(function() {
  console.log("promise2");
});
console.log('script end')

輸出結果如下：

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

代碼執(zhí)行過程如下：

開頭定義了async1和async2兩個函數，但是并未執(zhí)行，執(zhí)行script中的代碼，所以打印出script start；
遇到定時器Settimeout，它是一個宏任務，將其加入到宏任務隊列；
之后執(zhí)行函數async1，首先打印出async1 start；
遇到await，執(zhí)行async2，打印出async2，并阻斷后面代碼的執(zhí)行，將后面的代碼加入到微任務隊列；
然后跳出async1和async2，遇到Promise，打印出promise1；
遇到resolve，將其加入到微任務隊列，然后執(zhí)行后面的script代碼，打印出script end；
之后就該執(zhí)行微任務隊列了，首先打印出async1 end，然后打印出promise2；
執(zhí)行完微任務隊列，就開始執(zhí)行宏任務隊列中的定時器，打印出setTimeout。

23. 代碼輸出結果

async function async1 () {
  await async2();
  console.log('async1');
  return 'async1 success'
}
async function async2 () {
  return new Promise((resolve, reject) => {
    console.log('async2')
    reject('error')
  })
}
async1().then(res => console.log(res))

輸出結果如下：

async2
Uncaught (in promise) error

可以看到，如果async函數中拋出了錯誤，就會終止錯誤結果，不會繼續(xù)向下執(zhí)行。

如果想要讓錯誤不足之處后面的代碼執(zhí)行，可以使用catch來捕獲：

async function async1 () {
  await Promise.reject('error!!!').catch(e => console.log(e))
  console.log('async1');
  return Promise.resolve('async1 success')
}
async1().then(res => console.log(res))
console.log('script start')

這樣的輸出結果就是：

script start
error!!!
async1
async1 success

24. 代碼輸出結果

const first = () => (new Promise((resolve, reject) => {
    console.log(3);
    let p = new Promise((resolve, reject) => {
        console.log(7);
        setTimeout(() => {
            console.log(5);
            resolve(6);
            console.log(p)
        }, 0)
        resolve(1);
    });
    resolve(2);
    p.then((arg) => {
        console.log(arg);
    });
}));
first().then((arg) => {
    console.log(arg);
});
console.log(4);

輸出結果如下：

3
7
4
1
2
5
Promise{<resolved>: 1}

代碼的執(zhí)行過程如下：

首先會進入Promise，打印出3，之后進入下面的Promise，打印出7；
遇到了定時器，將其加入宏任務隊列；
執(zhí)行Promise p中的resolve，狀態(tài)變?yōu)閞esolved，返回值為1；
執(zhí)行Promise first中的resolve，狀態(tài)變?yōu)閞esolved，返回值為2；
遇到p.then，將其加入微任務隊列，遇到first().then，將其加入任務隊列；
執(zhí)行外面的代碼，打印出4；
這樣第一輪宏任務就執(zhí)行完了，開始執(zhí)行微任務隊列中的任務，先后打印出1和2；
這樣微任務就執(zhí)行完了，開始執(zhí)行下一輪宏任務，宏任務隊列中有一個定時器，執(zhí)行它，打印出5，由于執(zhí)行已經變?yōu)閞esolved狀態(tài)，所以 ?resolve(6)?不會再執(zhí)行；
最后 ?console.log(p)?打印出 ?Promise{<resolved>: 1}?；

25. 代碼輸出結果

const async1 = async () => {
  console.log('async1');
  setTimeout(() => {
    console.log('timer1')
  }, 2000)
  await new Promise(resolve => {
    console.log('promise1')
  })
  console.log('async1 end')
  return 'async1 success'
} 
console.log('script start');
async1().then(res => console.log(res));
console.log('script end');
Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .catch(4)
  .then(res => console.log(res))
setTimeout(() => {
  console.log('timer2')
}, 1000)

輸出結果如下：

script start
async1
promise1
script end
1
timer2
timer1

代碼的執(zhí)行過程如下：

首先執(zhí)行同步帶嗎，打印出script start；
遇到定時器timer1將其加入宏任務隊列；
之后是執(zhí)行Promise，打印出promise1，由于Promise沒有返回值，所以后面的代碼不會執(zhí)行；
然后執(zhí)行同步代碼，打印出script end；
繼續(xù)執(zhí)行下面的Promise，.then和.catch期望參數是一個函數，這里傳入的是一個數字，因此就會發(fā)生值滲透，將resolve(1)的值傳到最后一個then，直接打印出1；
遇到第二個定時器，將其加入到微任務隊列，執(zhí)行微任務隊列，按順序依次執(zhí)行兩個定時器，但是由于定時器時間的原因，會在兩秒后先打印出timer2，在四秒后打印出timer1。

26. 代碼輸出結果

const p1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve('resolve3');
    console.log('timer1')
  }, 0)
  resolve('resovle1');
  resolve('resolve2');
}).then(res => {
  console.log(res)  // resolve1
  setTimeout(() => {
    console.log(p1)
  }, 1000)
}).finally(res => {
  console.log('finally', res)
})

執(zhí)行結果為如下：

resolve1
finally  undefined
timer1
Promise{<resolved>: undefined}

27. 代碼輸出結果

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

輸出結果如下：

（1）第一輪事件循環(huán)流程分析如下：

整體script作為第一個宏任務進入主線程，遇到 ?console.log?，輸出1。
遇到 ?setTimeout?，其回調函數被分發(fā)到宏任務Event Queue中。暫且記為 ?setTimeout1?。
遇到 ?process.nextTick()?，其回調函數被分發(fā)到微任務Event Queue中。記為 ?process1?。
遇到 ?Promise?，?new Promise?直接執(zhí)行，輸出7。?then?被分發(fā)到微任務Event Queue中。記為 ?then1?。
又遇到了 ?setTimeout?，其回調函數被分發(fā)到宏任務Event Queue中，記為 ?setTimeout2?。

宏任務Event Queue	微任務Event Queue
setTimeout1	process1
setTimeout2	then1

上表是第一輪事件循環(huán)宏任務結束時各Event Queue的情況，此時已經輸出了1和7。發(fā)現了 process1和 then1兩個微任務：

執(zhí)行 ?process1?，輸出6。
執(zhí)行 ?then1?，輸出8。

第一輪事件循環(huán)正式結束，這一輪的結果是輸出1，7，6，8。

（2）第二輪時間循環(huán)從 setTimeout1宏任務開始：

首先輸出2。接下來遇到了 ?process.nextTick()?，同樣將其分發(fā)到微任務Event Queue中，記為 ?process2?。
?new Promise?立即執(zhí)行輸出4，?then?也分發(fā)到微任務Event Queue中，記為 ?then2?。

宏任務Event Queue	微任務Event Queue
setTimeout2	process2
	then2

第二輪事件循環(huán)宏任務結束，發(fā)現有 process2和 then2兩個微任務可以執(zhí)行：

輸出3。
輸出5。

第二輪事件循環(huán)結束，第二輪輸出2，4，3，5。

（3）第三輪事件循環(huán)開始，此時只剩setTimeout2了，執(zhí)行。

直接輸出9。
將 ?process.nextTick()?分發(fā)到微任務Event Queue中。記為 ?process3?。
直接執(zhí)行 ?new Promise?，輸出11。
將 ?then?分發(fā)到微任務Event Queue中，記為 ?then3?。

宏任務Event Queue	微任務Event Queue
	process3
	then3

第三輪事件循環(huán)宏任務執(zhí)行結束，執(zhí)行兩個微任務 process3和 then3：

輸出10。
輸出12。

第三輪事件循環(huán)結束，第三輪輸出9，11，10，12。

整段代碼，共進行了三次事件循環(huán)，完整的輸出為1，7，6，8，2，4，3，5，9，11，10，12。

28. 代碼輸出結果

console.log(1)

setTimeout(() => {
  console.log(2)
})

new Promise(resolve =>  {
  console.log(3)
  resolve(4)
}).then(d => console.log(d))

setTimeout(() => {
  console.log(5)
  new Promise(resolve =>  {
    resolve(6)
  }).then(d => console.log(d))
})

setTimeout(() => {
  console.log(7)
})

console.log(8)

輸出結果如下：

代碼執(zhí)行過程如下：

首先執(zhí)行script代碼，打印出1；
遇到第一個定時器，加入到宏任務隊列；
遇到Promise，執(zhí)行代碼，打印出3，遇到resolve，將其加入到微任務隊列；
遇到第二個定時器，加入到宏任務隊列；
遇到第三個定時器，加入到宏任務隊列；
繼續(xù)執(zhí)行script代碼，打印出8，第一輪執(zhí)行結束；
執(zhí)行微任務隊列，打印出第一個Promise的resolve結果：4；
開始執(zhí)行宏任務隊列，執(zhí)行第一個定時器，打印出2；
此時沒有微任務，繼續(xù)執(zhí)行宏任務中的第二個定時器，首先打印出5，遇到Promise，首選打印出6，遇到resolve，將其加入到微任務隊列；
執(zhí)行微任務隊列，打印出6；
執(zhí)行宏任務隊列中的最后一個定時器，打印出7。

29. 代碼輸出結果

console.log(1);
  
setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});

new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
})

setTimeout(() => {
  console.log(6);
})

console.log(7);

代碼輸出結果如下：

代碼執(zhí)行過程如下：

首先執(zhí)行scrip代碼，打印出1；
遇到第一個定時器setTimeout，將其加入到宏任務隊列；
遇到Promise，執(zhí)行里面的同步代碼，打印出4，遇到resolve，將其加入到微任務隊列；
遇到第二個定時器setTimeout，將其加入到紅任務隊列；
執(zhí)行script代碼，打印出7，至此第一輪執(zhí)行完成；
指定微任務隊列中的代碼，打印出resolve的結果：5；
執(zhí)行宏任務中的第一個定時器setTimeout，首先打印出2，然后遇到 Promise.resolve().then()，將其加入到微任務隊列；
執(zhí)行完這個宏任務，就開始執(zhí)行微任務隊列，打印出3；
繼續(xù)執(zhí)行宏任務隊列中的第二個定時器，打印出6。

30. 代碼輸出結果

Promise.resolve().then(() => {
    console.log('1');
    throw 'Error';
}).then(() => {
    console.log('2');
}).catch(() => {
    console.log('3');
    throw 'Error';
}).then(() => {
    console.log('4');
}).catch(() => {
    console.log('5');
}).then(() => {
    console.log('6');
});

執(zhí)行結果如下：

在這道題目中，我們需要知道，無論是thne還是catch中，只要throw 拋出了錯誤，就會被catch捕獲，如果沒有throw出錯誤，就被繼續(xù)執(zhí)行后面的then。

31. 代碼輸出結果

setTimeout(function () {
  console.log(1);
}, 100);

new Promise(function (resolve) {
  console.log(2);
  resolve();
  console.log(3);
}).then(function () {
  console.log(4);
  new Promise((resove, reject) => {
    console.log(5);
    setTimeout(() =>  {
      console.log(6);
    }, 10);
  })
});
console.log(7);
console.log(8);

輸出結果為：

代碼執(zhí)行過程如下：

首先遇到定時器，將其加入到宏任務隊列；
遇到Promise，首先執(zhí)行里面的同步代碼，打印出2，遇到resolve，將其加入到微任務隊列，執(zhí)行后面同步代碼，打印出3；
繼續(xù)執(zhí)行script中的代碼，打印出7和8，至此第一輪代碼執(zhí)行完成；
執(zhí)行微任務隊列中的代碼，首先打印出4，如遇到Promise，執(zhí)行其中的同步代碼，打印出5，遇到定時器，將其加入到宏任務隊列中，此時宏任務隊列中有兩個定時器；
執(zhí)行宏任務隊列中的代碼，這里我們需要注意是的第一個定時器的時間為100ms，第二個定時器的時間為10ms，所以先執(zhí)行第二個定時器，打印出6；
此時微任務隊列為空，繼續(xù)執(zhí)行宏任務隊列，打印出1。

做完這道題目，我們就需要格外注意，每個定時器的時間，并不是所有定時器的時間都為0哦。

二、this

1. 代碼輸出結果

function foo() {
  console.log( this.a );
}

function doFoo() {
  foo();
}

var obj = {
  a: 1,
  doFoo: doFoo
};

var a = 2; 
obj.doFoo()

輸出結果：2

在Javascript中，this指向函數執(zhí)行時的當前對象。在執(zhí)行foo的時候，執(zhí)行環(huán)境就是doFoo函數，執(zhí)行環(huán)境為全局。所以，foo中的this是指向window的，所以會打印出2。

2. 代碼輸出結果

var a = 10
var obj = {
  a: 20,
  say: () => {
    console.log(this.a)
  }
}
obj.say() 

var anotherObj = { a: 30 } 
obj.say.apply(anotherObj)

輸出結果：10 10

我么知道，箭頭函數時不綁定this的，它的this來自原其父級所處的上下文，所以首先會打印全局中的 a 的值10。后面雖然讓say方法指向了另外一個對象，但是仍不能改變箭頭函數的特性，它的this仍然是指向全局的，所以依舊會輸出10。

但是，如果是普通函數，那么就會有完全不一樣的結果：

var a = 10  
var obj = {  
  a: 20,  
  say(){
    console.log(this.a)  
  }  
}  
obj.say()   
var anotherObj={a:30}   
obj.say.apply(anotherObj)

輸出結果：20 30

這時，say方法中的this就會指向他所在的對象，輸出其中的a的值。

3. 代碼輸出結果

function a() {
  console.log(this);
}
a.call(null);

打印結果：window對象

根據ECMAScript262規(guī)范規(guī)定：如果第一個參數傳入的對象調用者是null或者undefined，call方法將把全局對象（瀏覽器上是window對象）作為this的值。所以，不管傳入null 還是 undefined，其this都是全局對象window。所以，在瀏覽器上答案是輸出 window 對象。

要注意的是，在嚴格模式中，null 就是 null，undefined 就是 undefined：

'use strict';

function a() {
    console.log(this);
}
a.call(null); // null
a.call(undefined); // undefined

4. 代碼輸出結果

var obj = { 
  name: 'cuggz', 
  fun: function(){ 
     console.log(this.name); 
  } 
} 
obj.fun()     // cuggz
new obj.fun() // undefined

6. 代碼輸出結果

var obj = {
   say: function() {
     var f1 = () =>  {
       console.log("1111", this);
     }
     f1();
   },
   pro: {
     getPro:() =>  {
        console.log(this);
     }
   }
}
var o = obj.say;
o();
obj.say();
obj.pro.getPro();

輸出結果：

1111 window對象
1111 obj對象
window對象

解析：

o()，o是在全局執(zhí)行的，而f1是箭頭函數，它是沒有綁定this的，它的this指向其父級的this，其父級say方法的this指向的是全局作用域，所以會打印出window；
obj.say()，誰調用say，say 的this就指向誰，所以此時this指向的是obj對象；
obj.pro.getPro()，我們知道，箭頭函數時不綁定this的，getPro處于pro中，而對象不構成單獨的作用域，所以箭頭的函數的this就指向了全局作用域window。

7. 代碼輸出結果

var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log(this.foo);  
        console.log(self.foo);  
        (function() {
            console.log(this.foo);  
            console.log(self.foo);  
        }());
    }
};
myObject.func();

輸出結果：bar bar undefined bar

解析：

首先func是由myObject調用的，this指向myObject。又因為var self = this;所以self指向myObject。
這個立即執(zhí)行匿名函數表達式是由window調用的，this指向window 。立即執(zhí)行匿名函數的作用域處于myObject.func的作用域中，在這個作用域找不到self變量，沿著作用域鏈向上查找self變量，找到了指向 myObject對象的self。

8. 代碼輸出問題

window.number = 2;
var obj = {
 number: 3,
 db1: (function(){
   console.log(this);
   this.number *= 4;
   return function(){
     console.log(this);
     this.number *= 5;
   }
 })()
}
var db1 = obj.db1;
db1();
obj.db1();
console.log(obj.number);     // 15
console.log(window.number);  // 40

這道題目看清起來有點亂，但是實際上是考察this指向的:

執(zhí)行db1()時，this指向全局作用域，所以window.number * 4 = 8，然后執(zhí)行匿名函數，所以window.number * 5 = 40；
執(zhí)行obj.db1();時，this指向obj對象，執(zhí)行匿名函數，所以obj.numer * 5 = 15。

9. 代碼輸出結果

var length = 10;
function fn() {
    console.log(this.length);
}
 
var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};
 
obj.method(fn, 1);

輸出結果： 10 2

解析：

第一次執(zhí)行fn()，this指向window對象，輸出10。
第二次執(zhí)行arguments0，相當于arguments調用方法，this指向arguments，而這里傳了兩個參數，故輸出arguments長度為2。

10. 代碼輸出結果

var a = 1;
function printA(){
  console.log(this.a);
}
var obj={
  a:2,
  foo:printA,
  bar:function(){
    printA();
  }
}

obj.foo(); // 2
obj.bar(); // 1
var foo = obj.foo;
foo(); // 1

輸出結果： 2 1 1

解析：

obj.foo()，foo 的this指向obj對象，所以a會輸出2；
obj.bar()，printA在bar方法中執(zhí)行，所以此時printA的this指向的是window，所以會輸出1；
foo()，foo是在全局對象中執(zhí)行的，所以其this指向的是window，所以會輸出1；

11. 代碼輸出結果

var x = 3;
var y = 4;
var obj = {
    x: 1,
    y: 6,
    getX: function() {
        var x = 5;
        return function() {
            return this.x;
        }();
    },
    getY: function() {
        var y = 7;
        return this.y;
    }
}
console.log(obj.getX()) // 3
console.log(obj.getY()) // 6

輸出結果：3 6

解析：

我們知道，匿名函數的this是指向全局對象的，所以this指向window，會打印出3；
getY是由obj調用的，所以其this指向的是obj對象，會打印出6。

12. 代碼輸出結果

 var a = 10; 
 var obt = { 
   a: 20, 
   fn: function(){ 
     var a = 30; 
     console.log(this.a)
   } 
 }
 obt.fn();  // 20
 obt.fn.call(); // 10
 (obt.fn)(); // 20

輸出結果： 20 10 20

解析：

obt.fn()，fn是由obt調用的，所以其this指向obt對象，會打印出20；
obt.fn.call()，這里call的參數啥都沒寫，就表示null，我們知道如果call的參數為undefined或null，那么this就會指向全局對象this，所以會打印出 10；
(obt.fn)()，這里給表達式加了括號，而括號的作用是改變表達式的運算順序，而在這里加與不加括號并無影響；相當于 obt.fn()，所以會打印出 20；

13. 代碼輸出結果

function a(xx){
  this.x = xx;
  return this
};
var x = a(5);
var y = a(6);

console.log(x.x)  // undefined
console.log(y.x)  // 6

輸出結果： undefined 6

解析：

最關鍵的就是var x = a(5)，函數a是在全局作用域調用，所以函數內部的this指向window對象。所以 this.x = 5 就相當于：window.x = 5。之后 return this，也就是說 var x = a(5) 中的x變量的值是window，這里的x將函數內部的x的值覆蓋了。然后執(zhí)行console.log(x.x)，也就是console.log(window.x)，而window對象中沒有x屬性，所以會輸出undefined。
當指向y.x時，會給全局變量中的x賦值為6，所以會打印出6。

14. 代碼輸出結果

function foo(something){
    this.a = something
}

var obj1 = {
    foo: foo
}

var obj2 = {}

obj1.foo(2); 
console.log(obj1.a); // 2

obj1.foo.call(obj2, 3);
console.log(obj2.a); // 3

var bar = new obj1.foo(4)
console.log(obj1.a); // 2
console.log(bar.a); // 4

輸出結果： 2 3 2 4

解析：

首先執(zhí)行obj1.foo(2); 會在obj中添加a屬性，其值為2。之后執(zhí)行obj1.a，a是右obj1調用的，所以this指向obj，打印出2；
執(zhí)行 obj1.foo.call(obj2, 3) 時，會將foo的this指向obj2，后面就和上面一樣了，所以會打印出3；
obj1.a會打印出2；
最后就是考察this綁定的優(yōu)先級了，new 綁定是比隱式綁定優(yōu)先級高，所以會輸出4。

15. 代碼輸出結果

function foo(something){
    this.a = something
}

var obj1 = {}

var bar = foo.bind(obj1);
bar(2);
console.log(obj1.a); // 2

var baz = new bar(3);
console.log(obj1.a); // 2
console.log(baz.a); // 3

輸出結果： 2 2 3

這道題目和上面題目差不多，主要都是考察this綁定的優(yōu)先級。記住以下結論即可：**this綁定的優(yōu)先級：**new綁定 > 顯式綁定 > 隱式綁定 > 默認綁定。

三、作用域&變量提升&閉包

1. 代碼輸出結果

(function(){
   var x = y = 1;
})();
var z;

console.log(y); // 1
console.log(z); // undefined
console.log(x); // Uncaught ReferenceError: x is not defined

這段代碼的關鍵在于：var x = y = 1; 實際上這里是從右往左執(zhí)行的，首先執(zhí)行y = 1, 因為y沒有使用var聲明，所以它是一個全局變量，然后第二步是將y賦值給x，講一個全局變量賦值給了一個局部變量，最終，x是一個局部變量，y是一個全局變量，所以打印x是報錯。

2. 代碼輸出結果

var a, b
(function () {
   console.log(a);
   console.log(b);
   var a = (b = 3);
   console.log(a);
   console.log(b);   
})()
console.log(a);
console.log(b);

輸出結果：

undefined 
undefined 
3 
3 
undefined 
3

這個題目和上面題目考察的知識點類似，b賦值為3，b此時是一個全局變量，而將3賦值給a，a是一個局部變量，所以最后打印的時候，a仍舊是undefined。

3. 代碼輸出結果

var friendName = 'World';
(function() {
  if (typeof friendName === 'undefined') {
    var friendName = 'Jack';
    console.log('Goodbye ' + friendName);
  } else {
    console.log('Hello ' + friendName);
  }
})();

輸出結果：Goodbye Jack

我們知道，在 JavaScript中， Function 和 var 都會被提升（變量提升），所以上面的代碼就相當于：

var name = 'World!';
(function () {
    var name;
    if (typeof name === 'undefined') {
        name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

這樣，答案就一目了然了。

4. 代碼輸出結果

function fn1(){
  console.log('fn1')
}
var fn2
 
fn1()
fn2()
 
fn2 = function() {
  console.log('fn2')
}
 
fn2()

輸出結果：

fn1
Uncaught TypeError: fn2 is not a function
fn2

這里也是在考察變量提升，關鍵在于第一個fn2()，這時fn2仍是一個undefined的變量，所以會報錯fn2不是一個函數。

5. 代碼輸出結果

function a() {
    var temp = 10;
    function b() {
        console.log(temp); // 10
    }
    b();
}
a();

function a() {
    var temp = 10;
    b();
}
function b() {
    console.log(temp); // 報錯 Uncaught ReferenceError: temp is not defined
}
a();

在上面的兩段代碼中，第一段是可以正常輸出，這個應該沒啥問題，關鍵在于第二段代碼，它會報錯Uncaught ReferenceError: temp is not defined。這時因為在b方法執(zhí)行時，temp 的值為undefined。

6. 代碼輸出結果

 var a=3;
 function c(){
    alert(a);
 }
 (function(){
  var a=4;
  c();
 })();

js中變量的作用域鏈與定義時的環(huán)境有關，與執(zhí)行時無關。執(zhí)行環(huán)境只會改變this、傳遞的參數、全局變量等

7. 代碼輸出問題

function fun(n, o) {
  console.log(o)
  return {
    fun: function(m){
      return fun(m, n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

輸出結果：

undefined  0  0  0
undefined  0  1  2
undefined  0  1  1

這是一道關于閉包的題目，對于fun方法，調用之后返回的是一個對象。我們知道，當調用函數的時候傳入的實參比函數聲明時指定的形參個數要少，剩下的形參都將設置為undefined值。所以 console.log(o); 會輸出undefined。而a就是是fun(0)返回的那個對象。也就是說，函數fun中參數 n 的值是0，而返回的那個對象中，需要一個參數n，而這個對象的作用域中沒有n，它就繼續(xù)沿著作用域向上一級的作用域中尋找n，最后在函數fun中找到了n，n的值是0。了解了這一點，其他運算就很簡單了，以此類推。

8. 代碼輸出結果

f = function() {return true;};   
g = function() {return false;};   
(function() {   
   if (g() && [] == ![]) {   
      f = function f() {return false;};   
      function g() {return true;}  //在匿名函數內部發(fā)生函數提升 因此if判斷中的g()返回true  
   }   
})();   
console.log(f());

輸出結果： false

這里首先定義了兩個變量f和g，我們知道變量是可以重新賦值的。后面是一個匿名自執(zhí)行函數，在 if 條件中調用了函數 g()，由于在匿名函數中，又重新定義了函數g，就覆蓋了外部定義的變量g，所以，這里調用的是內部函數 g 方法，返回為 true。第一個條件通過，進入第二個條件。

第二個條件是[] == ![]，先看 ![] ，在 JavaScript 中，當用于布爾運算時，比如在這里，對象的非空引用被視為 true，空引用 null 則被視為 false。由于這里不是一個 null, 而是一個沒有元素的數組，所以 [] 被視為 true, 而 ![] 的結果就是 false 了。當一個布爾值參與到條件運算的時候，true 會被看作 1, 而 false 會被看作 0?，F在條件變成了 [] == 0 的問題了，當一個對象參與條件比較的時候，它會被求值，求值的結果是數組成為一個字符串，[] 的結果就是 '' ，而 '' 會被當作 0 ，所以，條件成立。

兩個條件都成立，所以會執(zhí)行條件中的代碼， f 在定義是沒有使用var，所以他是一個全局變量。因此，這里會通過閉包訪問到外部的變量 f, 重新賦值，現在執(zhí)行 f 函數返回值已經成為 false 了。而 g 則不會有這個問題，這里是一個函數內定義的 g，不會影響到外部的 g 函數。所以最后的結果就是 false。

四、原型&繼承

1. 代碼輸出結果

function Person(name) {
    this.name = name
}
var p2 = new Person('king');
console.log(p2.__proto__) //Person.prototype
console.log(p2.__proto__.__proto__) //Object.prototype
console.log(p2.__proto__.__proto__.__proto__) // null
console.log(p2.__proto__.__proto__.__proto__.__proto__)//null后面沒有了，報錯
console.log(p2.__proto__.__proto__.__proto__.__proto__.__proto__)//null后面沒有了，報錯
console.log(p2.constructor)//Person
console.log(p2.prototype)//undefined p2是實例，沒有prototype屬性
console.log(Person.constructor)//Function 一個空函數
console.log(Person.prototype)//打印出Person.prototype這個對象里所有的方法和屬性
console.log(Person.prototype.constructor)//Person
console.log(Person.prototype.__proto__)// Object.prototype
console.log(Person.__proto__) //Function.prototype
console.log(Function.prototype.__proto__)//Object.prototype
console.log(Function.__proto__)//Function.prototype
console.log(Object.__proto__)//Function.prototype
console.log(Object.prototype.__proto__)//null

這道義題目考察原型、原型鏈的基礎，記住就可以了。

2. 代碼輸出結果

// a
function Foo () {
 getName = function () {
   console.log(1);
 }
 return this;
}
// b
Foo.getName = function () {
 console.log(2);
}
// c
Foo.prototype.getName = function () {
 console.log(3);
}
// d
var getName = function () {
 console.log(4);
}
// e
function getName () {
 console.log(5);
}

Foo.getName();           // 2
getName();               // 4
Foo().getName();         // 1
getName();               // 1 
new Foo.getName();       // 2
new Foo().getName();     // 3
new new Foo().getName(); // 3

輸出結果：2 4 1 1 2 3 3

解析：

Foo.getName()，Foo為一個函數對象，對象都可以有屬性，b 處定義Foo的getName屬性為函數，輸出2；
getName()，這里看d、e處，d為函數表達式，e為函數聲明，兩者區(qū)別在于變量提升，函數聲明的 5 會被后邊函數表達式的 4 覆蓋；
Foo().getName()，這里要看a處，在Foo內部將全局的getName重新賦值為 console.log(1) 的函數，執(zhí)行Foo()返回 this，這個this指向window，Foo().getName() 即為window.getName()，輸出 1；
getName()，上面3中，全局的getName已經被重新賦值，所以這里依然輸出 1；
new Foo.getName()，這里等價于 new (Foo.getName())，先執(zhí)行 Foo.getName()，輸出 2，然后new一個實例；
new Foo().getName()，這里等價于 (new Foo()).getName(), 先new一個Foo的實例，再執(zhí)行這個實例的getName方法，但是這個實例本身沒有這個方法，所以去原型鏈__protot__上邊找，實例.protot === Foo.prototype，所以輸出 3；
new new Foo().getName()，這里等價于new (new Foo().getName())，如上述6，先輸出 3，然后new 一個 new Foo().getName() 的實例。

3. 代碼輸出結果

var F = function() {};
Object.prototype.a = function() {
  console.log('a');
};
Function.prototype.b = function() {
  console.log('b');
}
var f = new F();
f.a();
f.b();
F.a();
F.b()

輸出結果：

a
Uncaught TypeError: f.b is not a function
a
b

解析：

f 并不是 Function 的實例，因為它本來就不是構造函數，調用的是 Function 原型鏈上的相關屬性和方法，只能訪問到 Object 原型鏈。所以 f.a() 輸出 a ，而 f.b() 就報錯了。
F 是個構造函數，而 F 是構造函數 Function 的一個實例。因為 F instanceof Object === true，F instanceof Function === true，由此可以得出結論：F 是 Object 和 Function 兩個的實例，即 F 能訪問到 a，也能訪問到 b。所以 F.a() 輸出 a ，F.b() 輸出 b。

4. 代碼輸出結果

function Foo(){
    Foo.a = function(){
        console.log(1);
    }
    this.a = function(){
        console.log(2)
    }
}

Foo.prototype.a = function(){
    console.log(3);
}

Foo.a = function(){
    console.log(4);
}

Foo.a();
let obj = new Foo();
obj.a();
Foo.a();

輸出結果：4 2 1

解析：

Foo.a() 這個是調用 Foo 函數的靜態(tài)方法 a，雖然 Foo 中有優(yōu)先級更高的屬性方法 a，但 Foo 此時沒有被調用，所以此時輸出 Foo 的靜態(tài)方法 a 的結果：4
let obj = new Foo(); 使用了 new 方法調用了函數，返回了函數實例對象，此時 Foo 函數內部的屬性方法初始化，原型鏈建立。
obj.a() ; 調用 obj 實例上的方法 a，該實例上目前有兩個 a 方法：一個是內部屬性方法，另一個是原型上的方法。當這兩者都存在時，首先查找 ownProperty ，如果沒有才去原型鏈上找，所以調用實例上的 a 輸出：2
Foo.a() ; 根據第2步可知 Foo 函數內部的屬性方法已初始化，覆蓋了同名的靜態(tài)方法，所以輸出：1

5. 代碼輸出結果

function Dog() {
  this.name = 'puppy'
}
Dog.prototype.bark = () => {
  console.log('woof!woof!')
}
const dog = new Dog()
console.log(Dog.prototype.constructor === Dog && dog.constructor === Dog && dog instanceof Dog)

輸出結果：true

解析：

因為constructor是prototype上的屬性，所以dog.constructor實際上就是指向Dog.prototype.constructor；constructor屬性指向構造函數。instanceof而實際檢測的是類型是否在實例的原型鏈上。

constructor是prototype上的屬性，這一點很容易被忽略掉。constructor和instanceof 的作用是不同的，感性地來說，constructor的限制比較嚴格，它只能嚴格對比對象的構造函數是不是指定的值；而instanceof比較松散，只要檢測的類型在原型鏈上，就會返回true。

6. 代碼輸出結果

var A = {n: 4399};
var B =  function(){this.n = 9999};
var C =  function(){var n = 8888};
B.prototype = A;
C.prototype = A;
var b = new B();
var c = new C();
A.n++
console.log(b.n);
console.log(c.n);

輸出結果：9999 4400

解析：

console.log(b.n)，在查找b.n是首先查找 b 對象自身有沒有 n 屬性，如果沒有會去原型（prototype）上查找，當執(zhí)行var b = new B()時，函數內部this.n=9999(此時this指向 b) 返回b對象，b對象有自身的n屬性，所以返回 9999。
console.log(c.n)，同理，當執(zhí)行var c = new C()時，c對象沒有自身的n屬性，向上查找，找到原型（prototype）上的 n 屬性，因為 A.n++(此時對象A中的n為4400)，所以返回4400。

7. 代碼輸出問題

function A(){
}
function B(a){
　　this.a = a;
}
function C(a){
　　if(a){
this.a = a;
　　}
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
 
console.log(new A().a);
console.log(new B().a);
console.log(new C(2).a);

輸出結果：1 undefined 2

解析：

console.log(new A().a)，new A()為構造函數創(chuàng)建的對象，本身沒有a屬性，所以向它的原型去找，發(fā)現原型的a屬性的屬性值為1，故該輸出值為1；
console.log(new B().a)，ew B()為構造函數創(chuàng)建的對象，該構造函數有參數a，但該對象沒有傳參，故該輸出值為undefined;
console.log(new C(2).a)，new C()為構造函數創(chuàng)建的對象，該構造函數有參數a，且傳的實參為2，執(zhí)行函數內部，發(fā)現if為真，執(zhí)行this.a = 2,故屬性a的值為2。

8 代碼輸出問題

function Parent() {
    this.a = 1;
    this.b = [1, 2, this.a];
    this.c = { demo: 5 };
    this.show = function () {
        console.log(this.a , this.b , this.c.demo );
    }
}

function Child() {
    this.a = 2;
    this.change = function () {
        this.b.push(this.a);
        this.a = this.b.length;
        this.c.demo = this.a++;
    }
}

Child.prototype = new Parent();
var parent = new Parent();
var child1 = new Child();
var child2 = new Child();
child1.a = 11;
child2.a = 12;
parent.show();
child1.show();
child2.show();
child1.change();
child2.change();
parent.show();
child1.show();
child2.show();

輸出結果：

parent.show(); // 1  [1,2,1] 5

child1.show(); // 11 [1,2,1] 5
child2.show(); // 12 [1,2,1] 5

parent.show(); // 1 [1,2,1] 5

child1.show(); // 5 [1,2,1,11,12] 5

child2.show(); // 6 [1,2,1,11,12] 5

這道題目值得審題，他涉及到的知識點很多，例如this的指向、原型、原型鏈、類的繼承、數據類型等。

解析：

parent.show()，可以直接獲得所需的值，沒啥好說的；
child1.show()，?Child?的構造函數原本是指向 ?Child?的，題目顯式將 ?Child?類的原型對象指向了 ?Parent?類的一個實例，需要注意 ?Child.prototype?指向的是 ?Parent?的實例 ?parent?，而不是指向 ?Parent?這個類。
child2.show()，這個也沒啥好說的；
parent.show()，?parent?是一個 ?Parent?類的實例，?Child.prorotype?指向的是 ?Parent?類的另一個實例，兩者在堆內存中互不影響，所以上述操作不影響 ?parent?實例，所以輸出結果不變；
child1.show()，?child1?執(zhí)行了 ?change()?方法后，發(fā)生了怎樣的變化呢?

this.b.push(this.a)，由于this的動態(tài)指向特性，this.b會指向 ?Child.prototype?上的b數組,this.a會指向 ?child1?的a屬性,所以 ?Child.prototype.b?變成了[1,2,1,11];
this.a = this.b.length，這條語句中 ?this.a?和 ?this.b?的指向與上一句一致，故結果為 ?child1.a?變?yōu)?;
this.c.demo = this.a++，由于 ?child1?自身屬性并沒有c這個屬性，所以此處的 ?this.c?會指向 ?Child.prototype.c?，?this.a?值為4，為原始類型，故賦值操作時會直接賦值，?Child.prototype.c.demo?的結果為4，而 ?this.a?隨后自增為5(4 + 1 = 5)。

?child2?執(zhí)行了 ?change()?方法, 而 ?child2?和 ?child1?均是 ?Child?類的實例，所以他們的原型鏈指向同一個原型對象 ?Child.prototype?,也就是同一個 ?parent?實例，所以 ?child2.change()?中所有影響到原型對象的語句都會影響 ?child1?的最終輸出結果。

this.b.push(this.a)，由于this的動態(tài)指向特性，this.b會指向 ?Child.prototype?上的b數組,this.a會指向 ?child2?的a屬性,所以 ?Child.prototype.b?變成了[1,2,1,11,12];
this.a = this.b.length，這條語句中 ?this.a?和 ?this.b?的指向與上一句一致，故結果為 ?child2.a?變?yōu)?;
this.c.demo = this.a++，由于 ?child2?自身屬性并沒有c這個屬性，所以此處的 ?this.c?會指向 ?Child.prototype.c?，故執(zhí)行結果為 ?Child.prototype.c.demo?的值變?yōu)?nbsp;?child2.a?的值5，而 ?child2.a?最終自增為6(5 + 1 = 6)。

9. 代碼輸出結果

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
};

function SubType(){
    this.subproperty = false;
}

SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
    return this.subproperty;
};

var instance = new SubType();
console.log(instance.getSuperValue());

輸出結果：true

實際上，這段代碼就是在實現原型鏈繼承，SubType繼承了SuperType，本質是重寫了SubType的原型對象，代之以一個新類型的實例。SubType的原型被重寫了，所以instance.constructor指向的是SuperType。具體如下：

以上內容是否對您有幫助：

← 前端面試手寫代碼篇

前端面試 Vue篇 →

寫筆記

我要補充

前端面試 代碼輸出篇

前言：

一、異步&事件循環(huán)

1. 代碼輸出結果

2. 代碼輸出結果

3. 代碼輸出結果

4. 代碼輸出結果

5. 代碼輸出結果

6. 代碼輸出結果

7. 代碼輸出結果

8. 代碼輸出結果

9. 代碼輸出結果

10. 代碼輸出結果

11. 代碼輸出結果

12. 代碼輸出結果

13. 代碼輸出結果

14. 代碼輸出結果

15. 代碼輸出結果

16. 代碼輸出結果

17. 代碼輸出結果

18. 代碼輸出結果

19. 代碼輸出結果

20. 代碼輸出結果

21. 代碼輸出結果

22. 代碼輸出結果

23. 代碼輸出結果

24. 代碼輸出結果

25. 代碼輸出結果

26. 代碼輸出結果

27. 代碼輸出結果

28. 代碼輸出結果

29. 代碼輸出結果

30. 代碼輸出結果

31. 代碼輸出結果

二、this

1. 代碼輸出結果

2. 代碼輸出結果

3. 代碼輸出結果

4. 代碼輸出結果

6. 代碼輸出結果

7. 代碼輸出結果

8. 代碼輸出問題

9. 代碼輸出結果

10. 代碼輸出結果

11. 代碼輸出結果

12. 代碼輸出結果

13. 代碼輸出結果

14. 代碼輸出結果

15. 代碼輸出結果

三、作用域&變量提升&閉包

1. 代碼輸出結果

2. 代碼輸出結果

3. 代碼輸出結果

4. 代碼輸出結果

5. 代碼輸出結果

6. 代碼輸出結果

7. 代碼輸出問題

8. 代碼輸出結果

四、原型&繼承

1. 代碼輸出結果

2. 代碼輸出結果

3. 代碼輸出結果

4. 代碼輸出結果

5. 代碼輸出結果

6. 代碼輸出結果

7. 代碼輸出問題

8 代碼輸出問題

9. 代碼輸出結果

前端面試代碼輸出篇

二、this

三、作用域&變量提升&閉包

四、原型&繼承