91资源网

首页>面试题库>web前端面试题

web前端面试题及答案总会(三)

2018-11-28 08:28:00 | 查看次数 284 | 分类: 面试题库>web前端面试题 文章来源:来源:http://www.ifx666.cn

摘要内容:web前端面试题及答案总会(三)

41.解释下JavaScript中this是如何工作的。

this永远指向函数运行时所在的对象,而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向window 。

1.如果是call,apply,with,指定的this是谁,就是谁。

2.普通的函数调用,函数被谁调用,this就是谁。

42.解释下原型继承的原理。

以下代码展示了JS引擎如何查找属性:

1 function getProperty(obj,prop) {
2     if (obj.hasOwnProperty(prop)) {
3         return obj[prop];
4     } else if (obj.__proto__!==null) {
5         return getProperty(obj.__proto__,prop);
6     } else {
7         return undefined;
8     }
9 }
复制代码
复制代码

下图展示的原(prototype)的关联:

43.你是如何测试JavaScript代码的?

结合自己的项目经验进行讲述。(chrome使用技巧

44.AMD vs.CommonJS?

请看文章JavaScript之模块化编程

45.什么是哈希表?

散列表(也叫哈希表),是根据关键码值直接进行访问的数据结构。也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度。这个映射函数叫做散列函数,存放记录的数组叫做散列表。

46.解释下为什么接下来这段代码不是IIFE(立即调用的函数表达式):function foo(){}();.

  • 要做哪些改动使它变成IIFE?

因为在解析器解析全局的function或者function内部function关键字的时候,默认是认为function声明,而不是function表达式,如果你不显示告诉编译器,它默认会声明成一个缺少名字的function,并且抛出一个语法错误信息,因为function声明需要一个名字。

1 var foo = function() {
2     // doSomeThing.
3 };
4 
5 foo();

47.描述以下变量的区别:null,undefined或undeclared?

JavaScript的最初版本是这样区分的:null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。

但是,上面这样的区分,在实践中很快就被证明不可行。目前,null和undefined基本是同义的,只有一些细微的差别。

null表示"没有对象",即该处不应该有值。典型用法是:

  • 用来初始化一个变量,这个变量可能被赋值为一个对象。
  • 用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象。
  • 当函数的参数期望是对象时,被用作参数传入。
  • 当函数的返回值期望是对象时,被用作返回值传出。
  • 作为对象原型链的终点。

undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:

  • 变量被声明了,但没有赋值时,就等于undefined。
  • 调用函数时,应该提供的参数没有提供,该参数等于undefined。
  • 对象没有赋值的属性,该属性的值为undefined。
  • 函数没有返回值时,默认返回undefined。

该如何检测它们?

null:表示无值;undefined:表示一个未声明的变量,或已声明但没有赋值的变量,或一个并不存在的对象属性。

==运算符将两者看作相等。如果要区分两者,要使用===或typeof运算符。

以下是不正确的用法:

1 var exp = undefined;
2 
3 if (exp == undefined) {
4     alert("undefined");
5 }

exp为null时,也会得到与undefined相同的结果,虽然null和undefined不一样。注意:要同时判断undefined和null时可使用本法。

typeof返回的是字符串,有六种可能:"number"、"string"、"boolean"、"object"、"function"、"undefined"。

以下是正确的用法:

1 var exp = undefined;
2 
3 if(typeof(exp) == undefined) {
4     alert("undefined");
5 }

JS中如何判断null?

以下是不正确的用法:

1 var exp = null;
2 
3 if(exp == null) {
4     alert("is null");
5 }

exp为undefined时,也会得到与null相同的结果,虽然null和undefined不一样。注意:要同时判断null和undefined时可使用本法。

1 var exp=null;
2 
3 if(!exp) {
4     alert("is null");
5 }

如果exp为undefined或者数字零,也会得到与null相同的结果,虽然null和二者不一样。注意:要同时判断null、undefined和数字零时可使用本法。

1 var exp = null;
2 
3 if(typeof(exp) == "null") {
4     alert("is null");
5 }

为了向下兼容,exp为null时,typeof总返回object。这种方式也不太好。

以下是正确的用法:

1 var exp = null;
2 
3 if(!exp&&typeof(exp) != "undefined" && exp != 0) {
4     alert("is null");
5 }

48.什么是闭包,如何使用它,为什么要使用它?

包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点:

  • 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
  • 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

(关于闭包,详细了解请看JavaScript之作用域与闭包详解

49.请举出一个匿名函数的典型用例?

自执行函数,用闭包模拟私有变量、特权函数等。

50.解释“JavaScript模块模式”以及你在何时使用它。

     如果有提到无污染的命名空间,可以考虑加分。

  • 如果你的模块没有自己的命名空间会怎么样?

请看文章-JavaScript之模块化编程 和JavaScript之命名空间模式 浅析

51.你是如何组织自己的代码?是使用模块模式,还是使用经典继承的方法?

请看文章-JavaScript之模块化编程Javascript之对象的继承

52.请指出JavaScript宿主对象和原生对象的区别?

原生对象

ECMA-262 把本地对象(native object)定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。

“本地对象”包含哪些内容:Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

由此可以看出,简单来说,本地对象就是 ECMA-262 定义的类(引用类型)。

内置对象

ECMA-262 把内置对象(built-in object)定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象,在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象,它已被实例化了。

同样是“独立于宿主环境”。根据定义我们似乎很难分清“内置对象”与“本地对象”的区别。而ECMA-262 只定义了两个内置对象,即 Global 和 Math (它们也是本地对象,根据定义,每个内置对象都是本地对象)。如此就可以理解了。内置对象是本地对象的一种。

宿主对象

何为“宿主对象”?主要在这个“宿主”的概念上,ECMAScript中的“宿主”当然就是我们网页的运行环境,即“操作系统”和“浏览器”。

所有非本地对象都是宿主对象(host object),即由 ECMAScript 实现的宿主环境提供的对象。所有的BOM和DOM都是宿主对象。因为其对于不同的“宿主”环境所展示的内容不同。其实说白了就是,ECMAScript官方未定义的对象都属于宿主对象,因为其未定义的对象大多数是自己通过ECMAScript程序创建的对象。

53.call和.apply的区别是什么?

call方法
语法:call(thisObj,Object)
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。 
apply方法: 
语法:apply(thisObj,[argArray])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。 
说明:如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

对于apply和call两者在作用上是相同的,但两者在参数上有以下区别
对于第一个参数意义都一样,但对第二个参数:apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。

54.请解释Function.prototype.bind的作用?

55.你何时优化自己的代码?

请看文章JavaScript之高效编程 及JavaScript编码风格指南

56.你能解释一下JavaScript中的继承是如何工作的吗?

原型链等。

57.在什么时候你会使用document.write()?

大多数生成的广告代码依旧使用document.write(),虽然这种用法会让人很不爽。

58.请指出浏览器特性检测,特性推断和浏览器UA字符串嗅探的区别?

特性检测:为特定浏览器的特性进行测试,并仅当特性存在时即可应用特性。

User-Agent检测:最早的浏览器嗅探即用户代理检测,服务端(以及后来的客户端)根据UA字符串屏蔽某些特定的浏览器查看网站内容。

特性推断:尝试使用多个特性但仅验证了其中之一。根据一个特性的存在推断另一个特性是否存在。问题是,推断是假设并非事实,而且可能导致可维护性的问题。

59.请尽可能详尽的解释AJAX的工作原理。

请参考文章AJAX工作原理

60.请解释JSONP的工作原理,以及它为什么不是真正的AJAX。

JSONP (JSON with Padding)是一个简单高效的跨域方式,HTML中的script标签可以加载并执行其他域的javascript,于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据,然后在 pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数,pageB加载完之后会执行pageA中定义的函数,所需要的数据会以参数的形式传递给该函数。JSONP易于实现,但是也会存在一些安全隐患,如果第三方的脚本随意地执行,那么它就可以篡改页面内容,截获敏感数据。但是在受信任的双方传递数据,JSONP是非常合适的选择。

AJAX是不跨域的,而JSONP是一个是跨域的,还有就是二者接收参数形式不一样!

上一篇: Android 面试题大全

下一篇: web前端面试题 本文是在GitHub上看到一个大牛总结的前端常见面试题

验证码:
评论列表
  • 文章推荐

    09-19 | 查看次数 1089

    《深入理解Spring Cloud与微服务构建》PDF下载

    09-14 | 查看次数 295

    bootstrap tooltip 提示框的样式、提示字体颜...

    09-01 | 查看次数 279

    json字符串与java对象互转,json字符串转化为map...

    08-04 | 查看次数 462

    java面试题及答案---2018核心Java面试问题与解答...

    08-03 | 查看次数 1155

    java面试题及答案---2018核心Java面试问题与解答...

    最新评论
    文章标题:管理和发布文章java cms

    评论内容:能下载吗

    评论时间:2018-12-12 01:30:02

  • 返回顶部
    欢迎投稿
    返回底部