JS前端开发面试常见问题解答

前端开发面试常见问题|前端开发者

概念类

1. 谈一谈JavaScript作用域链,标识符解析过程?

回顾:
js中的执行环境定义了变量或函数有权访问的其他数据。每个执行环境都有个与之关联的变量对象,环境中定义的所有变量和函数都保存在其中,某个执行环境中的所有代码执行完后,该环境被销毁,保存在其中的所有变量和函数定义也随之销毁。
全局执行环境是最外围的一个执行环境,在web浏览器中,全局执行环境被认为是window对象,每个函数也都有自己的执行环境。

答:
当代码在一个环境中执行时,会创建变量对象的一个作用域链。作用域链用于保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端,始终是当前执行代码所在环境的变量对象。如果这个环境是个函数,则将其活动对象作为变量对象。活动对象在最开始只包含一个变量,即arguments对象(该对象在全局环境中是不存在的)。作用域链的下一个变量对象来自包含(外部)环境,再下一个来自下一个包含环境。这样一直延续到全局执行环境。
标识符解析是沿着作用域链一级一级的搜索标识符的过程。搜索过程始终从作用域链的前端开始,然后逐级的向后回溯,直到找到标识符为止(如果找不到标识符,通常会导致错误发生)。

2. js中创建对象的常用模式

答:
工厂模式,构造函数模式,原型模式,组合使用构造函数模式和原型模式(最常用),还有不太常用的动态原型模式,寄生构造函数模式,稳妥构造函数模式。
组合使用构造函数模式和原型模式:是创建自定义类型最常见方式,构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度节省内存。
例:
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
}
Person.prototype = {
constructor : Person, //重写原型后constructor=Object,如果需要可以设回Person
sayName : function(){
alert(this.name);
}
}
var person1 = new Person(“egg”, 23, “engineer”);

3. 如何理解JavaScript原型链

答:
每个对象(构造函数)都有一个prototype属性,称之为原型,而原型的值也是一个对象,因此它也有自己的原型,这样就串联起来了一条原型链,原型链的终端是object,它的prototype比较特殊,值为null。
原型链主要用于实现继承,假如我们让子对象的原型对象等于另一个类型(父对象)的实例(SubType.prototype = new SuperType()),此时子对象的原型将包含一个指向父对象的原型的指针,假如父对象的原型又是另一个类型的实例,层层递进,就构成了原型链。
当访问子对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到终端)。只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到,若整个原型链未找到则返回undefined。

4. JavaScript如何实现继承?

答:

原型链(单独使用原型链会有2个问题: 1.所有子类实例共享父类属性;2.创建子类型实例时,不能向父类的构造函数传参)
构造继承(方法都在构造函数中定义,方法不能复用)
组合继承(原型链+构造,解决上述问题,从而最常用)
不常用的:原型式继承,寄生式继承,寄生组合式继承

组合继承将原型链和借用构造函数的技术组合到一块,发挥二者之长,是最常用的继承模式。

例:
function SuperType(name){
this.name = name;
this.colors = [“red”, “blue”, “green”];
}
SuperType.prototype.sayName = function(){
alert(this.name);
}

    function SubType(name, age){
        //继承属性
        SuperType.call(this, name);
        this.age = age;
    }
    //继承方法
    SubType.prototype = new SuperType();
    SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function(){
        alert(this.age);
    };

    //测试
    var instance1 = new SubType("Bob", 23);
    instance1.colors.push("black");
    alert(instance1.colors);    //"red,blue,green,black"
    instance1.sayName();        //"Bob"
    instance1.sayAge();         //"23"

    var instance2 = new SubType("Greg", 25);
    alert(instance2.colors);    //"red,blue,green"
    instance2.sayName();        //"Greg"
    instance2.sayAge();         //"25"

5. 闭包是什么,有什么特性,对页面有什么影响?简要介绍你理解的闭包

答:
闭包是指有权访问另一个函数作用域中变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。
由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存,过度使用会导致内存占用过多。

    想多了解点的,推荐我的另一个文章:[深入理解闭包](//notes/36539/9acaf0f6ce4ac803e26626538ba4f80c.html),对里面作用域链,活动对象等概念有点忘记的,参考下本文前面第一题的解答。

6. js的数据类型有哪些,typeof返回哪些数据类型?

答:
ECMAScript有5中基本数据类型:Undefined, Null, Boolean, Number, String
还有一种复杂数据类型:Object,Object本质上是由一组无序的键值对组成的。

typeof操作符用来检测给定变量的数据类型,可能返回下列某个字符串:
undefined — 如果这个值未定义;
boolean — 如果这个值是布尔值;
string — 如果这个值是字符串;
number — 如果这个值是数值;
object — 如果这个值是对象或null
function — 如果这个值是函数

7. js关键字与保留字的意义,随意举几个区分:parent,class,void, main。

答:
关键字用于表示控制语句开始或结束,或用于特定操作,不能用作标识符。
保留字尽管在这门语言中还没有任何特定用途,但它们将来可能被用作关键字,同样不能用作标识符。

如本题中void为关键字,class为保留字,parent和main则不属于前两者。  

8. JSON与XML的区别?优缺点?

答:推荐: JSON与XML的区别比较

9. eval()是啥?谈谈对它的理解

答:
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语句,eval()将执行 Javascript 语句。

10. 事件,IE与火狐的事件机制有什么区别?

答:

  1. 我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被JavaScript侦测到的行为
  2. 事件处理机制:
    目前除IE浏览器外,其它主流的Firefox, Opera, Safari都支持标准的DOM事件处理模型。
    IE仍然使用自己专有的事件模型,即冒泡型,它事件模型的一部份被DOM标准采用,这点对于开发者来说也是有好处的,只有使用DOM标准,IE都共有的事件处理方式才能有效的跨浏览器。

推荐: JavaScript 事件模型 事件处理机制

11. IE和DOM事件流的区别?

答:
IE是冒泡:div -> body -> document
DOM标准事件流:document -> body -> div -> (click) -> div -> body -> document

同推荐10题文章

12. IE和标准下有哪些兼容性的写法?

答:推荐: Javascript下IE与Firefox下的差异兼容写法总结

13. 事件委托是什么?

答:利用事件冒泡的原理,把自己的所触发的事件给父元素代替执行。

推荐: js中的事件委托

14. 如何阻止事件冒泡和默认事件

答:
1.阻止事件冒泡,使成为捕获型事件触发机制.
function stopBubble() {
var e=arguments.callee.caller.arguments[0]||event;
//如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation )
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
PS: 一般在IE环境下可以省略掉(var e=arguments.callee.caller.arguments[0]||event;)直接运行即可,但是在FF下不行了,它会报e.stopPropagation没有定义,所以要事先定义,才能兼容。

2.当按键后,不希望按键继续传递给如html文本框对象时,可以取消返回值.即停止默认事件默认行为.
//阻止浏览器的默认行为
function stopDefault( e ) {
//阻止默认浏览器动作(W3C)
if ( e && e.preventDefault )
e.preventDefault();
//IE中阻止函数器默认动作的方式
else
window.event.returnValue = false;
return false;
}

15. 谈谈This对象的理解。

答:简单来说~
有对象就指向调用对象;
没调用对象就指向全局对象;
用new构造就指向新对象;
通过 apply 或 call 或 bind 来改变 this 的所指。

16. 了解node么?node的使用场景都有哪些?

答:高并发、聊天、实时消息推送

17. 对于前端自动化构建工具有了解吗?简单介绍一下

答:结合自己考虑下吧~

18. 介绍下你最常用的一款框架

答:同上~

19. 说一下什么是JavaScript的同源策略?

答:
一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同源指的是:同协议,同域名和同端口。
同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。

20. 函数中的arguments是什么?是数组吗?若不是,如何将它转化为真正的数组?

答:
arguments不是真正的数组,因为没有数组的方法。

转化为数组:
(1) arguments虽然没有数组的方法,但是有length属性,只要有length属性就可以调用slice方法,利用这一点:
javascript 代码

(2) ES6 Array.from,from 方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
javascript 代码

21. 如何判断一个变量为空{} 和空 []?

答:
javascript 代码

如何确定一个空对象是{} 还是[] : js中typeof和instanceof用法区别

22. es6主要都有哪些语法特性?stage-0/1/2/3又是什么?

答:
以下是ES6排名前十的最佳特性列表(排名不分先后):
Default Parameters(默认参数) in ES6
Template Literals (模板文本)in ES6
Multi-line Strings (多行字符串)in ES6
Destructuring Assignment (解构赋值)in ES6
Enhanced Object Literals (增强的对象文本)in ES6
Arrow Functions (箭头函数)in ES6
Promises in ES6
Block-Scoped Constructs Let and Const(块作用域构造Let and Const)
Classes(类) in ES6
Modules(模块) in ES6

推荐: 前端开发者不得不知的ES6十大特性

23. 前端常见的性能优化方式?

答:
推荐:【译】提高网站访问速度的34条军规

细节类

1. setTimeout与setInterval区别

答:
setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。

2. ==与===的区别

答:如果待比较的对象类型相同,两者没区别;如果不同,==会先将两个对象强制转型后进行比较,===则不会

3. null与undefined的区别

答:
undefined指未定义,在使用var声明变量但未对其初始化时,该变量的值就是undefined;
null指空值,表示一个空对象指针(因此typeof操作符检测null值返回Object);

null==undefined会返回true, 但他们用途完全不同,通常没必要显式的初始化变量为undefined,但如果定义的变量意在保存对象,那最好初始化为null,这样做既有利于区分两者,也在在我们检测变量类型时得到以下信息:1.若返回undefined说明变量尚未初始化;2.若返回null,说明这是一个空对象指针。

4. 数组方法pop() push() unshift() shift()

答:
push()尾部添加 pop()尾部删除
unshift()头部添加 shift()头部删除

5. 数组的增删查找

答:
push(), pop(), unshift(), shift(): 不赘述
slice():2个参数,返回起始至结束位置的项,不包括结束位置,该方法不会影响原数组。
splice(): 方法向/从数组中添加/删除项目,然后返回被删除的项目, arrayObject.splice(index,howmany,item1,…..,itemX)
indexOf(), lastIndexOf(): 都是2个参数–要查找的项,查找起点索引;返回待查找项索引,未找到返回-1。

6. split()和join()的区别

答:前者是切割成数组的形式,后者是将数组转换成字符串。

7. DOM节点操作。

答:推荐:JavaScript DOM节点操作方法总结

8. 定义变量时加不加var的几种情况

答:
使用var定义的变量将成为定义该变量的作用域中的局部变量。
如:在函数中使用var定义一个变量,这个变量在函数退出后就会被销毁;而如果省略var,则会创建一个全局变量。但不建议这样做,在局部作用域定义全局变量很难维护,给未经声明的变量赋值在严格模式下会报错。

9. call()、apply()、bind()的异同?

答:推荐:图解call、apply、bind的异同及各种实战应用演示

10. 例举3种强制类型转换和2种隐式类型转换?

答:
强制:Boolean(), String(), Number()
隐式:

  1. ==
  2. var str = ‘012.34’;
    var x = str – 0;
    x = x * 2;
    推荐:JS 数据类型转换

11. 使用jquery,找到id为father的select标签中有用data-target属性为son的option的值?

答:
javascript 代码

12. stopImmediatePropagation&stopPropagation 区别?

答:
stopImmediatePropagation 防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理。此方法会立即生效,并且会影响当前节点中的事件侦听器。

stopPropagation 防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。此方法不会影响当前节点 (currentTarget) 中的任何事件侦听器。

ajax相关类

1. ajax的跨域问题和缓存原理?

答:
推荐:ajax处理跨域有几种方式?实现原理是什么?

推荐:ajax缓存原理

2. 同步与异步的区别?

答:

  1. 同步请求:顺序处理,即当我们向服务器发出一个请求时,在服务器没返回结果给客户端之前,我们要一直处于等待状态直至服务器将结果返回到客户端,我们才能执行下一步操作。
  2. 异步请求:并行处理,当我们向服务器发出一个请求时,在服务器没返回结果之前,我们还是可以执行其他操作。

3. ajax属于javascript?

答:javascript是一种在浏览器端执行的脚本语言,ajax是一种创建交互式网页应用的开发技术,它利用的一系列相关技术中就包括javascript。

4. ajax请求get和post方式的区别

答:

  1. 使用get请求时,参数在URL中显示,而使用post方式,则不会显示出来
  2. 使用get请求发送数据量小,post请求发送数据量大
  3. get请求需注意缓存问题,post请求不需担心这个问题(浏览器永远不会缓存POST,PUT等操作)
  4. get更快更简单,适合给服务器些参数获取列表;post没有数据量限制而且更安全,适合给服务器发送大量数据或用于修改密码相关。

5. ajax请求时,如何解析json数据

答:
eval(); //此方法不推荐,因为不安全
JSON.parse(); //推荐方法

推荐:Ajax中解析Json的两种方法详解

6. application/x-www-form-urlencoded,multipart/formdata区别

答: 推荐:四种常见的 POST 提交数据方式

前端开发面试常见问题|网站前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《JS前端开发面试常见问题解答》
» 本文链接地址:https://www.rokub.com/2974.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!