JavaScript:面试频繁出现的几个易错点
发布网友
发布时间：2022-04-24 00:57
共1个回答
热心网友
时间：2022-04-22 14:00
这段时间，金三银四，很多人面试，很多人分享面试题。在前段时间，我也临时担任面试官，为了大概了解面试者的水平，我也写了一份题目，面试了几个前端开发者。在这段时间里面，我在学，在写设计模式的一些知识，想不到的设计模式的这些知识，就是面试题里面，频繁让人掉坑的考点。所以，今天就总结一下，那些让人掉坑的考点。
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);//underfind } fu();
可能大家会困惑，为什么不是输出守候，但是在细看一看，我声明的方式是let，不会是window对象
如果输出守候，要这样写
var username='守候' function fn(){ alert(this.username);//守候 } fu(); //--------------- window.username='守候' function fn(){ alert(this.username);//守候 } fu();
3-2.对象函数调用
这个相信不难理解，就是那个函数调用，this指向哪里
window.b=2222 let obj={ a:111, fn:function(){ alert(this.a);//111 alert(this.b);//underfind } } obj.fn();
很明显，第一次就是输出obj.a，就是111。而第二次，obj没有b这个属性，所以输出underfind，因为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的四个步骤）就差不多了！
但是有一个坑，虽然一般不会出现，但是有必要提一下。
在构造函数里面返回一个对象，会直接返回这个对象，而不是执行构造函数后创建的对象
