JavaScript面试出现频繁的一些易错点整理

 更新时间:2018年03月29日 10:40:32   作者:守候   我要评论

通过几个常见面试开始,讨论针对一个题目的分析思路,就有了下面这篇文章,本文主要给大家整理总结介绍了关于JavaScript面试中会频繁出现的一些易错点,对大家具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。

1.前言

这段时间,金三银四,很多人面试,很多人分享面试题。在前段时间,我也临时担任面试官,为了大概了解面试者的水平,我也写了一份题目,面试了几个前端开发者。在这段时间里面,我在学,在写设计模式的一些知识,想不到的设计模式的这些知识,就是面试题里面,频繁让人掉坑的考点。

所以,今天就总结一下,那些让人掉坑的考点。下面话不多说了,来一起看看详细的介绍吧。

2.面向对象编程

关于面向对象和面向过程,个人觉得这两者不是绝对独立的,而是相互相成的关系。至于什么时候用面向对象,什么时候用面向过程,具体情况,具体分析。

针对于面向对象编程的。知乎上有一个高赞回答:

面向对象: 狗.吃(屎)

面向过程: 吃.(狗,屎)

但是这个例子觉得不太优雅,我改一下了,举一个优雅些的小例子说明一下面向对象和面向过程的区别。

需求:定义‘守候吃火锅'

面向对象的思想是:守候.动作(吃火锅)

面向过程的思想是:动作(守候,吃火锅)

代码实现方面:

//面向对象
//定义人(姓名)
let People=function(name){
 this.name=name;
}
//动作
People.prototype={
 eat:function(someThing){
 console.log(`${this.name}吃${someThing}`);
 }
}
//守候是个人,所以要创建一个人(new一次People)
let shouhou=new People('守候','男',24);
shouhou.eat('火锅');

//面向过程
let eat=function(who,someThing){
 console.log(`${who}吃${someThing}`);
}
eat('守候','火锅');

结果都一样,都是输出‘守候吃火锅'。但是万一我现在吃饱了,准备写代码了。这下怎么实现呢?看代码

//面向对象
shouhou.coding=function(){
 console.log(this.name+'写代码');
}
shouhou.coding();
//面向过程
let coding=function(who){
 console.log(who+'写代码');
}
coding('守候');

结果也一样:‘守候写代码'

但是不难发现面向对象更加的灵活,复用性和扩展性更加。因为面向对象就是针对对象(例子中的:‘守候')来进行执行某些动作。这些动作可以自定义扩展。

而面向过程是定义很多的动作,来指定谁来执行这个动作。

好了,面向对象的简单说明就到这里了,至于面向对象的三大特性:继承,封装,多态这个自行上网查找资料。

3.this

使用 JavaScript 开发的时候,很多开发者多多少少会被 this 的指向搞蒙圈,但是实际上,关于 this 的指向,记住最核心的一句话:哪个对象调用函数,函数里面的this指向哪个对象。

下面分几种情况谈论下

3-1.普通函数调用

这个情况没特殊意外,就是指向全局对象-window。

let username='守候'
function fn(){
 alert(this.username);//undefined
}
fn();

可能大家会困惑,为什么不是输出守候,但是在细看一看,我声明的方式是let,不会是window对象

如果输出守候,要这样写

var username='守候'
function fn(){
 alert(this.username);//守候
}
fn();
//---------------
window.username='守候'
function fn(){
 alert(this.username);//守候
}
fn();

3-2.对象函数调用

这个相信不难理解,就是那个函数调用,this指向哪里

window.b=2222
let obj={
 a:111,
 fn:function(){
 alert(this.a);//111
 alert(this.b);//undefined
 }
}
obj.fn();

很明显,第一次就是输出obj.a,就是111。而第二次,obj没有b这个属性,所以输出undefined,因为this指向obj。

但是下面这个情况得注意

let obj1={
 a:222
};
let obj2={
 a:111,
 fn:function(){
 alert(this.a);
 }
}
obj1.fn=obj2.fn;
obj1.fn();//222

这个相信也不难理解,虽然obj1.fn是从obj2.fn赋值而来,但是调用函数的是obj1,所以this指向obj1。

3-3.构造函数调用

let TestClass=function(){
 this.name='111';
}
let subClass=new TestClass();
subClass.name='守候';
console.log(subClass.name);//守候
let subClass1=new TestClass();
console.log(subClass1.name)//111

这个也是不难理解,回忆下(new的四个步骤)就差不多了!

但是有一个坑,虽然一般不会出现,但是有必要提一下。

在构造函数里面返回一个对象,会直接返回这个对象,而不是执行构造函数后创建的对象

3-4.apply和call调用

apply和call简单来说就是会改变传入函数的this。

let obj1={
 a:222
};
let obj2={
 a:111,
 fn:function(){
  alert(this.a);
 }
}
obj2.fn.call(obj1);

此时虽然是 obj2 调用方法,但是使用 了call,动态的把 this 指向到 obj1。相当于这个 obj2.fn 这个执行环境是 obj1 。apply 和 call 详细内容在下面提及。

3-5.箭头函数调用

首先不得不说,ES6 提供了箭头函数,增加了我们的开发效率,但是在箭头函数里面,没有 this ,箭头函数里面的 this 是继承外面的环境。

一个例子

let obj={
 a:222,
 fn:function(){ 
  setTimeout(function(){console.log(this.a)})
 }
};
obj.fn();//undefined

不难发现,虽然 fn() 里面的 this 是指向 obj ,但是,传给 setTimeout 的是普通函数, this 指向是 window , window 下面没有 a ,所以这里输出 undefined 。

换成箭头函数

let obj={
 a:222,
 fn:function(){ 
  setTimeout(()=>{console.log(this.a)});
 }
};
obj.fn();//222

这次输出 222 是因为,传给 setTimeout 的是箭头函数,然后箭头函数里面没有 this ,所以要向上层作用域查找,在这个例子上, setTimeout 的上层作用域是 fn。而 fn 里面的 this 指向 obj ,所以 setTimeout 里面的箭头函数的 this ,指向 obj 。所以输出 222 。

4.call和apply

call 和 apply 的作用,完全一样,唯一的区别就是在参数上面。

call 接收的参数不固定,第一个参数是函数体内 this 的指向,第二个参数以下是依次传入的参数。

apply接收两个参数,第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象(数组或者类数组)

let fn=function(a,b,c){
console.log(a,b,c);
}
let arr=[1,2,3];


如上面这个例子

let obj1={
 a:222
};
let obj2={
 a:111,
 fn:function(){
  alert(this.a);
 }
}
obj2.fn.call(obj1);

call 和 apply 两个主要用途就是

1.改变 this 的指向(把 this 从 obj2 指向到 obj1 )

2.方法借用( obj1 没有 fn ,只是借用 obj2 方法)

5.闭包

闭包这个可能大家是迷糊,但是必须要征服的概念!下面用一个例子简单说下

let add=(function(){
let now=0;
return {
 doAdd:function(){
 now++;
 console.log(now);
}
}
})()

然后执行几次!

上图结果看到,now 这个变量,并没有随着函数的执行完毕而被回收,而是继续保存在内存里面。

具体原因说下:刚开始进来,因为是自动执行函数,一开始进来会自动执行,这一块

然后把这个对象赋值给 add 。由于 add 里面有函数是依赖于 now 这个变量。所以 now 不会被销毁,回收。这就是闭包的用途之一(延续变量周期)。由于 now 在外面访问不到,这就是闭包的另一个用途(创建局部变量,保护局部变量不会被访问和修改)。

可能有人会有疑问,闭包会造成内存泄漏。但是大家想下,上面的例子,如果不用闭包,就要用全局变量。把变量放在闭包里面和放在全局变量里面,影响是一致的。使用闭包又可以减少全局变量,所以上面的例子闭包更好!

6.小结

在学设计模式的时候,遇到的知识点就是这一些了,这些知识点,也是我在群聊,社区里面,让人掉坑比较多的考点。这些知识,可以说是开发常用,面试常考的知识,还是建议大家深入些学习。上面那里也是简单的过一下而已。不算深入。如果大家对文章有什么建议,欢迎指点。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • JavaScript创建对象的方式小结(4种方式)

    JavaScript创建对象的方式小结(4种方式)

    这篇文章主要介绍了JavaScript创建对象的方式,结合实例形式总结分析了四种创建对象的方式,并附带分析了JavaScript对象复制的技巧,需要的朋友可以参考下
    2015-12-12
  • 解决wx.onMenuShareTimeline出现的问题

    解决wx.onMenuShareTimeline出现的问题

    本文主要介绍解决wx.onMenuShareTimeline出现的问题,这里提供了示例代码作为参考,有需要的小伙伴可以参考下
    2016-08-08
  • 在网页中插入百度地图的步骤详解

    在网页中插入百度地图的步骤详解

    在企业网站中常会看到企业地址会显示在地图上,那么,如何实现这种功能呢?本篇文章就主要介绍在网页中插入百度地图的步骤,下面就随小编一起来看看吧
    2016-12-12
  • bootstrap 通过加减按钮实现输入框组功能

    bootstrap 通过加减按钮实现输入框组功能

    这篇文章主要介绍了bootstrap 输入框组 通过加减按钮来增加删除内嵌输入框组,当我点击 + 按钮时,会添加一行输入框组;当点击 - 按钮时,会删除这一行输入框组。具体实现代码大家参考下本文
    2017-11-11
  • js计算两个时间之间天数差的实例代码

    js计算两个时间之间天数差的实例代码

    这篇文章主要介绍了js计算两个时间之间天数差的实例代码,有需要的朋友可以参考一下
    2013-11-11
  • JS添加或修改控件的样式(Class)实现方法

    JS添加或修改控件的样式(Class)实现方法

    下面小编就为大家带来一篇JS添加或修改控件的样式(Class)实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 无闪烁更新网页内容JS实现

    无闪烁更新网页内容JS实现

    这篇文章主要介绍了无闪烁更新网页内容JS实现,有需要的朋友可以参考一下
    2013-12-12
  • JavaScript支持的最大递归调用次数分析

    JavaScript支持的最大递归调用次数分析

    这篇文章主要介绍了JavaScript支持的最大递归调用次数分析,也称JavaScript支持的最大堆栈数量,需要的朋友可以参考下
    2014-06-06
  • js 弹簧效果代码

    js 弹簧效果代码

    上次做图片滑动展示效果时做了减速效果,就想做一个加速效果。结合起来就想到了下面这个东西,当然只是类似弹簧,而不是真正的弹簧。
    2008-09-09
  • javascript基本数据类型和转换

    javascript基本数据类型和转换

    本文主要介绍了javascript的基本数据类型和转换,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03

最新评论