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


Posted in Javascript onMarch 29, 2018

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的四个步骤)就差不多了!

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

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

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

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];

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

如上面这个例子

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);
}
}
})()

然后执行几次!

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

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

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

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

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

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

6.小结

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

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

Javascript 相关文章推荐
怎么用javascript进行拖拽
Jul 20 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 #jQuery
详解Javascript中new()到底做了些什么?
Mar 29 #Javascript
Koa2 之文件上传下载的示例代码
Mar 29 #Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 #Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 #Javascript
利用js实现前后台传送Json的示例代码
Mar 29 #Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 #Javascript
You might like
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
vue实现信息管理系统
2020/05/30 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
django中related_name的用法说明
2020/05/20 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
预备党员综合考察材料
2014/05/31 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
MySQL基于索引的压力测试的实现
2021/11/07 MySQL