前端JS面试题汇总 Part 3 (宿主对象与原生对象/函数调用方式/call与apply/bind/document.write)

原文：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).　

 function Person(name) {

   this.name = name;

 }

 var person = Person('John');

 console.log(person); // undefined

 console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined

 var person = new Person('John');

 console.log(person); // Person { name: "John" }

 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）分隔。

 function add(a, b) {

   return a + b;

 }

 console.log(add.call(null, 1, 2)); //

 console.log(add.apply(null, [1, 2])); //

　　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