JavaScript面试中有一些常见的易错点

1.前言

在此期间，许多人接受了采访，并分享了采访问题。前段时间，我还临时做了一个面试官。为了了解面试官的水平，我还写了一个题目，采访了几位前端开发人员。在此期间，我在学习和撰写一些设计模式的知识。意想不到的设计模式知识是经常让人在面试问题上掉坑的考点。

所以，今天我们就来总结一下让人掉坑的考点。下面就不多说了。我们来看看详细的介绍。

2.面向对象编程

至于面向对象和面向过程，我认为它们不是绝对独立的，而是相辅相成的。至于什么时候用面向对象，什么时候用面向过程，具体情况，具体分析。

面向对象编程。知乎上有一个好评回答：

面向对象：狗。吃(屎)

过程导向：吃。(狗，狗屎)

但是这个例子不是很优雅，所以我改了一下。让我们举一个优雅的例子来说明面向对象和面向过程的区别。

要求：定义“等着吃火锅”

面向对象的思想是：等待，演戏(吃火锅)

以过程为导向的思想是：行动(等待，吃火锅)

代码实现：

//面向对象//定义人(名)让人=函数(名){this。name=name}//action people . prototype={ eat : function(某物){ console . log(` $ { this . name } eat $ { SiNgle } `)；} }//等待是一个个体，所以要创造一个人(新的曾经的People)让守侯=新的People(‘等待’，‘男’，24)；吃(火锅)；//面向流程的let eat=function (who，someThing){ console . log(`$ { who } eat $ { SeeM } `)；}吃(‘等待’，‘火锅’)；结果都一样，他们都输出‘等着吃火锅’。但是万一我现在已经满了，我就准备好写代码了。如何实现这一点？看看代码

//面向对象shou Hou . coding=function(){ console . log(this . name ' write code ')；} shou Hou . coding()；//面向流程的let coding=function(who){ console . log(谁‘写代码’)；}编码(“等待”)；结果是一样的：‘等待写代码’

但不难发现，面向对象更加灵活、可重用、可扩展。因为面向对象是对对象执行某些操作(例如“等待”)。这些操作可以自定义和扩展。

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

这就是面向对象的简要描述。至于面向对象的三个特点：继承性、封装性和多态性，你可以自己在网上找资料。

3 .这个

用JavaScript开发的时候，很多开发人员或多或少都被这个的指向包围着，但其实记住关于这个指向的核心一句话：哪个对象调用函数，函数中这个指向哪个对象。

让我们在几种情况下谈论它

3-1.普通函数调用

这种情况并不是特别出乎意料，也就是说，它指向全局对象-窗口。

让username=' wait '函数fn () {alert(这。用户名)；//undefined } fn()；可能大家都会疑惑，为什么不输出等待，但是仔细一看，我声明的方式是让，不是窗口对象

如果输出正在等待，请这样写

Var username=' wait '函数fn () {alert(这。用户名)；//wait } fn()；//- window.username=' waiting '函数fn(){ alert(this . username)；//wait } fn()；3-2.对象函数调用

相信这也不难理解，那就是函数调用，这指向哪里呢

window.b=2222let obj={ a:111，fn : function(){ alert(this . a)；//111 alert(this . b)；//undefined } } obj . fn()；显然，第一次是输出obj.a，也就是111。第二次，obj没有b属性，所以输出undefined，因为这指向obj。

但是应该注意以下情况

让obj 1={ a :222 }；让obj2={ a:111，fn : function(){ alert(this . a)；} } obj 1 . fn=obj 2 . fn；obj 1 . fn()；//222我相信不难理解。虽然obj1.fn是从obj2.fn分配的，但是obj1是调用函数的那个，所以这指向obj1。

3-3.构造函数调用

让TestClass=function(){ this . name=' 111 '；}让子类=new TestClass()；SubClass.name='正在等待'；console . log(SubCe . name)；//等待let subclass 1=new test class()；控制台。日志(子类1。名字)//111不难理解。回忆(新的四个步骤)。

不过有个坑，一般不会出现，但有必要提一下。

如果在构造函数中返回一个对象，将直接返回该对象，而不是执行构造函数后创建的对象

3-4 .申请和拨打电话

应用和调用就是改变传入函数的简单方法。

让obj 1={ a :222 }；让obj2={ a:111，fn : function(){ alert(this . a)；} } obj 2 . fn . call(obj 1)；此时，虽然obj2调用方法，但调用用于动态地将其指向obj1。相当于这个obj2.fn，这个执行环境就是obj1。申请和致电的细节如下。

3-5.箭头函数调用

首先ES6提供了箭头功能，增加了我们的开发效率。但是，箭头函数中没有这个，箭头函数中的这个继承了外部环境。

一个例子

let obj={ a:222，fn : function(){ setTimeout(function(){ console . log(this . a)})}；obj . fn()；//undefined不难发现，虽然这个in fn()指向的是obj，但是它是传递给setTimeout的常用函数，这个指向的是window，下面没有window，所以这里输出的是undefined。

替换为箭头功能

let obj={ a:222，fn : function(){ setTimeout(()={ console . log(this . a)})；}};obj . fn()；//222这次输出222是因为箭头函数传递给了setTimeout，然后箭头函数中就没有这个了，所以要查上范围。在这个例子中，setTimeout的上限是fn。fn中的这个指向obj，所以setTimeout中的这个箭头函数指向obj。输出222。

4 .打电话申请

call和apply的功能完全相同，但唯一的区别在于参数。

调用接收的参数不是固定的。第一个参数是这个在函数体中的点，下面的参数是顺序传入的。

Apply接收两个参数，第一个参数也是函数体中的点。第二个参数是集合对象(数组或类数组)

让fn=function(a，b，c){console.log(a，b，c)；}让arr=[1，2，3]；

如上例所示

让obj 1={ a :222 }；让obj2={ a:111，fn : function(){ alert(this . a)；} } obj 2 . fn . call(obj 1)；call和apply的两个主要用途是

1.改变方向(从obj2指向obj1)

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

5.关闭

封闭是一个每个人都可能困惑，但必须征服的概念！让我们用下面的一个例子简单地说一下

let add=(function(){ let now=0；立即返回{ DoAdd : FuncTion(){ now；console.log(现在)；}}})()然后执行几次！

从上图可以看出，现在的变量在函数执行后不会被回收，而是继续存储在内存中。

具体原因如下：我一开始就进来了，因为是自动执行功能，一开始就会自动执行，这一块，

然后分配这个对象进行添加。add中的函数现在依赖于变量。因此，现在不会被销毁和回收。这是闭包的目的之一(延长可变周期)。由于现在不能在外部访问，这是闭包的另一个目的(创建局部变量并保护局部变量不被访问和修改)。

有些人可能会怀疑闭包会导致内存泄漏。但是仔细想想，在上面的例子中，如果不使用闭包，就必须使用全局变量。将变量放入闭包和全局变量具有相同的效果。使用闭包可以减少全局变量，所以上面的例子闭包更好！

6.摘要

学习设计模式的时候，这些是我遇到的知识点。这些知识点也是人们在群聊、社群中掉坑的考点。这方面的知识可以说是面试中常用、常考的知识，或者建议你深入学习。只是一个简单的传球。不深。如果你对文章有什么建议，欢迎指点。

好了，这就是本文的全部内容。希望本文的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。