前端JS面试题汇总 Part 3 (宿主对象与原生对象/函数调用方式/call与apply/bind/document.write)
2018-03-05 17:26
801 查看
原文: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:Function对象(apply、call、bind)详解
- js中函数对象的方法,原型方法apply、call、bind、toString、toLocaleString、valueOf
- 详解JS中的this、apply、call、bind(经典面试题)
- 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数
- javascript 函数的三种调用方式 call / apply / bind
- js函数的间接调用call()、apply()和bind()
- #笔记#圣思园 JavaWeb 第57讲——JS继承:对象冒充、call方法、apply方法、原型链方式、混合方式
- [JS]JS中call/apply/bind方法总结
- js手动实现call,apply,bind
- js中call,apply和bind方法的区别和使用场景
- 使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题
- 浅谈js中的call,apply,bind方法中的this指针
- JS 中 call、apply、bind 那些事
- JS中的call()和apply()方法和bind()
- 【js基础】javascript中的apply() call() bind() 方法是javascript专业人员的基础[译]
- js 函数调用其他函数和方法 call,apply关键字
- js中this的改变指向的方法:call和apply、bind
- 深入理解js中的apply、call、bind
- js apply/call/caller/callee/bind使用方法与区别分析