码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-03-05 18:11:03      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:end   native   rip   帕斯卡   operator   传递   组织   inter   oba   

原文: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

 

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

标签:end   native   rip   帕斯卡   operator   传递   组织   inter   oba   

原文地址:https://www.cnblogs.com/souvenir/p/8507623.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!