前端JS面試題彙總 Part 3 (宿主對象與原生對象/函數調用方式/call與apply/bind/document.write)

時間 2019-12-04

標籤前端面試彙總宿主對象原生函數調用方式 apply bind document.write document write 欄目 JavaScript 简体版

原文原文鏈接

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

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

（文章中斜體字部分爲譯者添加）html5

目錄：

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

Part 2 (null與undefined/閉包/foreach與map/匿名函數/代碼組織)node

Part 3 (宿主對象與原生對象/函數調用方式/call與apply/bind/document.write)git

　　一、宿主對象與原生對象有何區別？

　　原生對象是指JavaScript中按照ECMAScript規範進行定義的對象，好比：String，Math，RegExp，Object，Function等等。github

　　宿主對象是指由JavaScript的運行環境（瀏覽器或者是node）提供的對象，好比window，XMLHTTPRequest等等。面試

　　引用文檔：數組

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

　　二、如下函數調用方式有何不一樣：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

　　三、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

　　四、Function.prototype.bind 有何做用

　　引用MDN的原文解釋：

　　bind()方法建立一個新的函數, 當被調用時，將其this關鍵字設置爲提供的值，在調用新函數時，在任何提供以前提供一個給定的參數序列。

　　以個人經驗來看，它最大的做用就是當須要傳遞一個函數做爲其餘函數的入參是，它能夠綁定方法中的this值。最經常使用的就是React中的組件。

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

　　五、什麼時候使用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