最近将持续翻译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等等。
引用文档:
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