前端JS面試題彙總 Part 3 (宿主物件與原生物件/函式呼叫方式/call與apply/bind/document.write)

大魔王薩格拉斯發表於2018-03-05
前端JS面試題物件函式APP

原文：https://github.com/yangshun/front-end-interview-handbook/blob/master/questions/javascript-questions.md

最近將持續翻譯JavaScript面試題，希望對各位有所幫助。　　

（文章中斜體字部分為譯者新增）

目錄：

Part 1（事件委託/this關鍵字/原型鏈/AMD與CommonJS/自執行函式）

Part 2 (null與undefined/閉包/foreach與map/匿名函式/程式碼組織)

Part 3 (宿主物件與原生物件/函式呼叫方式/call與apply/bind/document.write)

 

 

　　1、宿主物件與原生物件有何區別？

　　原生物件是指JavaScript中按照ECMAScript規範進行定義的物件，比如：String，Math，RegExp，Object，Function等等。

　　宿主物件是指由JavaScript的執行環境（瀏覽器或者是node）提供的物件，比如window，XMLHTTPRequest等等。

　　引用文件：

　　https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects

 

　　2、以下函式呼叫方式有何不同：function Person(){}，var person = Person()，以及var person = new Person()　　

　　這個問題讓人相當困惑。我猜測這道題主要是要考JavaScript中的建構函式。從技術上講，function Person(){} 只是一個普通的函式宣告。通常我們使用帕斯卡命名法來給建構函式命名。

　　var person = Person() 這種只是把Person作為一個函式來呼叫，而不是一個構造器。想用這種方式來將函式作為構造器呼叫是一種非常常見的錯誤。一般來說，構造器沒有任何返回值。因此，如果把一個構造器當成一個普通函式來呼叫，並且把返回值賦值給一個變數，那麼值會是undefined。

　　var person = new Person() 通過new操作符來建立一個Person物件的例項，並且繼承了Person.prototype屬性。也可以通過Object.create來建立例項，比如 Obejct.create(Person.prototype).　

 1 function Person(name) {
 2   this.name = name;
 3 }
 4 
 5 var person = Person('John');
 6 console.log(person); // undefined
 7 console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
 8 
 9 var person = new Person('John');
10 console.log(person); // Person { name: "John" }
11 console.log(person.name); // "john"

　　引用文件：

　　https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new

　　

　　3、call與apply有什麼區別？

　　call與apply都可以用來呼叫一個函式，第一個傳入的引數是函式內部this物件。call方法的後面的引數是使用逗號進行分隔區分，apply是用的陣列。速記方法：C 是call方法逗號（comma）分隔，A是apply陣列（array）分隔。

　　

1 function add(a, b) {
2   return a + b;
3 }
4 
5 console.log(add.call(null, 1, 2)); // 3
6 console.log(add.apply(null, [1, 2])); // 3

 

　　4、Function.prototype.bind 有何作用

　　引用MDN的原文解釋：

　　bind()方法建立一個新的函式, 當被呼叫時，將其this關鍵字設定為提供的值，在呼叫新函式時，在任何提供之前提供一個給定的引數序列。

　　以我的經驗來看，它最大的作用就是當需要傳遞一個函式作為其他函式的入參是，它可以繫結方法中的this值。最常用的就是React中的元件。

　　引用文件：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

　　

　　5、何時使用document.write()

　　document.write()會向document.open()開啟的文件流中寫入一段字串文字。如果document.write()呼叫時文件已經載入了，那麼他會呼叫document.open方法來清除怎麼文件（<head>與<body>標籤內的內容都將被移除），然後用傳入的字串替換整個內容區。因此在使用的時候要慎重考慮，以免出錯。

　　網上也有一些關於document.write的其他用法，比如用在程式碼分析，或者在一個只能使用JavaScript的環境中引入樣式。它也被經常用到HTML5模板檔案中來並行載入指令碼檔案，保持程式碼執行順序。不過對於這些觀點我仍然不太贊同，因為在現代化的今天，我們有更多更好的方法來替換document.write()。

　　引用文件：

　　https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html

　　https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag

 

相關文章