自己总结web前端面试题之javascript

向右看齐 2022-06-07 13:48 226阅读 0赞

**1.js的几种数据类型？**

字符串、数字、布尔、对象、Null、Undefined

**2.typeof下的类型都有什么？**

string、number、boolean、function、object、Undefined

**3.js的常见内置对象类？**

Date,Array,Math、Number、Boolean、String、Array、RegExp、Function...

**4.创建一个对象**

function Person(name, age) \{

this.name = name;

this.age = age;

this.sing = function() \{ alert(this.name) \}

**5.谈谈This对象的理解。**

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。

但是总有一个原则，那就是this指的是调用函数的那个对象。

this一般情况下是全局对象Global。 作为方法调用，那么this就是指这个对象

**6.十六进制与RGB值转化？**

十六进制转化成RGB

\# A9 D3 5E

R:A9=9\*16^0+10\*16^1=169

G:D3=3\*16^0+13\*16^1=211

B:5E=14\*16^0+5\*16^1=94

rgb(169,211,94)

RGB转化成十六进制

169/16=10余9 A9

211/16=13余3 D3

94/16=5余14 5E

\#A9D35E

**7.null和undefined的区别？**

null和undefined都表示没有内容，是空值，null是数值类型当中最小的，可以和其他数值进行转化，它的类型属于object，而undefined不可以进行转化，一般用作语义提示，表示控制，属于undefined类型

**8.前++和后++的区别？**

\++表示本身变量自行加1，前++是先自身加1，再执行其他运算；后++是先执行其他运算，后自身加1

**9.while和do-while的区别**

while是先判断条件是否满足，在执行循环语句；do-while是先执行语句，再判断条件；条件不满足情况下，do-while比while多走一次

**10.结束语句的区别**

break:结束所有循环，当多层循环时，可以指定跳出某层循环

continue：结束当前循环

return 跳出函数体，如果函数里有多层循环，会跳出所有循环，并且返回值给调用者

**11.什么是变量的作用域**

全局变量:是定义在方法体外面，可以再任何表达式或函数里使用，在顶层代码中我们使用this关键字和window对象都可以访问到它

局部变量:是定义在方法体里，只能在当前函数里使用，函数执行完毕时局部变量即刻销毁

JS变量没有块级作用域，函数中的变量在整个函数都中有效

基本数据类型:定义简单的数据字段

引用数据类型:可以定义多个值，或者包含属性和方法

**12.js的垃圾回收机制？**

js具有自动回收垃圾的机制，不用程序员手动调用，而c或c++需要自己回收，js的垃圾回收机制有固定的时间间隔和周期。引用数据类型没有固定大小，例如，定义数组时，当程序知道已知大小时，才在内存中分配空间，如果初始没给大小，则定义值时才分配空间。局部变量只在函数运行过程中存在，但是全局变量在页面加载时就已经存在了，并且全局变量会在页面关闭时才回收。

手动回收,例如：var x=new Number();

x=null;//清空内存

**13.函数声明和匿名函数的区别？**

函数声明：又叫做函数表达式，函数声明要定义函数名称，并且通过标签里的事件进行调用，函数声明被调用时才会存在，用过之后会在内存中清空

匿名函数：属于闭包的一种，不用定义函数名称，更体现了页面的表现与结构相分离，匿名函数在页面加载时就存在，在页面关闭时进行清空。用匿名函数可以更好的封装js

**14.解释一下闭包?**

是指有权访问另一个函数的作用域中的变量的函数

优点：在页面加载时在内存中存在，调用速度快，并闭包的变量也会始终保存在内存中

缺点：造成内存消耗过大，页面性能降低，需要手动清空才能释放内存

闭包的表现形式:函数的嵌套，递归，匿名函数等。

**15.new操作符具体干了什么呢?**

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

2、属性和方法被加入到 this 引用的对象中。

3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

**16.如何判断一个对象是否属于某个类？**

使用instanceof （待完善）

if(a instanceof Person)\{

alert('yes');

**17.模块化怎么做？**

[立即执行函数][Link 1],不暴露私有成员

var module1 = (function()\{

var \_count = 0;

var m1 = function()\{

//...

\};

var m2 = function()\{

//...

\};

return \{

m1 : m1,

m2 : m2

\};

\})();

**18.继承有几种方法？**

1、原型链继承

function Cat()\{

Cat.prototype = new Animal();

Cat.prototype.name = 'cat';

2、构造继承

function Cat(name)\{

Animal.call(this);

this.name = name ;

3.组合继承

function SuperType(name) \{

this.name = name;

this.colors = \["red","blue","green"\];

SuperType.prototype.sayName = function() \{

console.log(this.name); \}

function SubType(name, age) \{

SuperType.call(this,name);//继承属性

this.age = age;

4.原型式继承

function object(o) \{

function F()\{\}

F.prototype = o;

return new F();

5.寄生式继承

function createAnother(original) \{

var clone = object(original);

clone.sayHi = function () \{ alert("hi"); \};

return clone;

var person = \{

name:"EvanChen";

\};

var anotherPerson = createAnother(person);

anotherPerson.sayHi();

6.寄生组合式继承

function inheritProperty(subType, superType) \{

var prototype = object(superType.prototype);//创建对象

prototype.constructor = subType;//增强对象

subType.prototype = prototype;//指定对象

**19.什么是原型链？**

原型链：作为继承的主要方法，用一个引用类型的原型，调用原型里的属性和方法，实现子类继承父类进行调用，每一个原型对象包含一个指向构造器的指针，通过指针孩子可以找到父类里属性和方法，那么prototype就是这个指针，当指向父类，在内存中就构成了一个原型链。

**20.怎么提高节点操作性能？**

文档碎片相当于一个口袋，用来提高DOM的操作性能，使操作节点的速度更快。

var frag=document.createDocumentFragment();//创建口袋

frag.appendChild(l);//往口袋放对象

对象.appendChild(frag);//把口袋执行

**21事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？**

1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。

2. 事件处理机制：IE是事件冒泡、火狐是事件捕获；

3.  第一种：event.stopPropagation();

第二种：return false;

第三种：event.preventDefault();

第四种：event.cancelable=true; 只支持IE8以下浏览器

**22.事件绑定用什么？**

1.addEventListenter("事件名称",调用函数,true/false)

true表示捕获事件false在冒泡阶段调用（支持高版本）

2.attachEvent()绑定事件(IE8以下) IE低版本下只支持冒泡事件

**23.js是单线程还是多线程**

JS是单线程，同理js所有写的框架也都是单线程。

js里有异步函数和延迟函数，会在其他函数调用完成后执行，所以这两种函数在队列末尾处加载

**24.js的运行机制**

简单来说js有2种机制，一个是事件机制，一个是io机制。

事件机制是通过网页标签所操作的事件流程，用来调用DOM和BOM对象的；io机制简单来说是处理文件的，例如：上传下载，读写文件，操作数据库等

**25.浏览器存储都有哪些？**

cookie ：cookie值是存在用户电脑里，用来存储文本框的值，窗体图标等一些小图片，存在电脑磁盘下，所以刷新页面不会被清空，它所存在浏览器相应的文件夹里，由你访问的页面设置信息的保存周期，但是在页面上显示cookie值需要在服务器上设置js，一个cookie值最多只能存储4kB，如果网络连接不通，cookie也不会进行显示

sessionStorage：存储数据在页面关闭之后，数据会被删除，信息存储在本地磁盘下

localStorage：没有时间限制，除非手动删除，一个本地存储可多达5MB以上

**26.告诉我答案是多少？**

(function(x)\{

delete x;

alert(x);

\})(1+5);

函数参数无法delete删除，delete只能删除通过for in访问的属性。

当然，删除失败也不会报错，所以代码运行会弹出“1”。

**27.JS中的call()和apply()方法的区别？**

**call方法:**

语法：call(\[thisObj\[,arg1\[, arg2\[,   \[,.argN\]\]\]\]\])

定义：调用一个对象的一个方法，以另一个对象替换当前对象。

说明： call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

**apply方法：**

语法：apply(\[thisObj\[,argArray\]\])

定义：应用某一对象的一个方法，用另一个对象替换当前对象。

说明： 如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。 如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

**28.JSON 的了解**

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小

\{'age':'12', 'name':'back'\}

**29.如何解决跨域问题?**

1.通过动态加载script标签

2.通过动态生成iframe

document.domain + iframe

location.hash + iframe

window.name + iframe

3.postMessage html5 跨域技术

var ifr = document.getElementById('ifr');

var targetOrigin = 'http://b.com';

ifr.contentWindow.postMessage('I was there!', targetOrigin);

4.CORS 自定义http头

var xdr = new XDomainRequest();

console.log(xdr.responseText);

5.JSONP 回调函数和json数据

script.src = 'http://www.baidu.com/json/?callback=handleResponse';

6. web sockets html5 web通信技术

var socket = new WebSockt('ws://www.baidu.com');

**30.http状态码有那些？分别代表是什么意思？**

100-199 用于指定客户端应相应的某些动作。

200-299 用于表示请求成功。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

400-499 用于指出客户端的错误。400    1、语义有误，当前请求无法被服务器理解。401   当前请求需要用户验证 403  服务器已经理解请求，但是拒绝执行它。

500-599 用于支持服务器错误。 503 – 服务不可用

**31.那些操作会造成内存泄漏？**

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

**32.对Node的优点和缺点提出了自己的看法：**

\*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，

因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。

此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，

因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

\*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，

而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

**33.异步加载的方式**

(1) defer，只支持IE

alert(document.getElementById("p1").firstChild.nodeValue);

</script>

(2) async

var scriptEle = document.createElement("script");

scriptEle.async = true;

(3) XHR Injection(XHR 注入)：通过XMLHttpRequest来获取javascript，然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。

**34.ajax的缺点**

1、ajax不支持浏览器back按钮。

2、安全问题 AJAX暴露了与服务器交互的细节。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、不容易调试。

**35.ajax 是什么?ajax 的交互模型?同步和异步的区别?**

1. 通过异步模式，提升了用户体验

2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

3. Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

4.同步是一个进程正在运行，其他进程必须等待该进程执行完之后才执行，异步是线程并行加载互不影响。

**36. Ajax的最大的特点是什么。**

Ajax可以实现动态不刷新（局部刷新）

readyState属性 状态 有5个可取值： 0=未初始化 ，1=正在加载 2=以加载，3=交互中，4=完成

**37.****怎样避免全局变量污染**

javaScript 可以随意定义保存所有应用资源的全局变量。但全局变量可以削弱程序灵活性，增大了模块之间的耦合性。在多人协作时，如果定义过多的全局变量 有可能造成全局变量冲突，也就是全局变量污染问题,以下是两种解决办法

只创建一个全局变量，并定义该变量为当前应用容器，把其他全局变量追加在该命名空间下

var MY=\{\};

my.name=\{

big\_name:"zhangsan",

small\_name:"lisi"

\};

利用匿名函数将脚本包裹起来

(function()\{

var exp=\{\};

var name="aa";

exp.method=function()\{

return name;

\};

window.ex=exp;

\})();

**36.****JS设计模式**

**工厂模式**

function newObj(name,age)\{

var o = new Object();

o.name = name;

o.age = age;

return o;

var obj = newObj();

**单例模式：只允许存在一个实例的模式**

var Instance = (function()\{

var obj;

return function()\{

if(obj === undefined) obj = new Date();

return obj;

\})();

var ibs = Instance();

**观察者模式**

// 定义一个主体对象

class Subject \{

constructor() \{

this.Observers = \[\];

add(observer) \{ //添加

this.Observers.push(observer)

remove(observer) \{//移除

this.Observers.filter(item => item === observer);

notify() \{

this.Observers.forEach(item => \{

item.update();

\})

//定义观察着对象

class Observer \{

constructor(name) \{

this.name = name;

update() \{

console.log(\`my name is:$\{this.name\}\`);

**发布订阅模式**

let pubSub = \{

subs: \[\],

subscribe(key, fn) \{ //订阅

if (!this.subs\[key\]) \{

this.subs\[key\] = \[\];

this.subs\[key\].push(fn);

\},

publish(...arg) \{//发布

let args = arg;

let key = args.shift();

let fns = this.subs\[key\];

if (!fns || fns.length <= 0) return;

for (let i = 0, len = fns.length; i < len; i++) \{

fns\[i\](args);

\},

unSubscribe(key) \{

delete this.subs\[key\]

**代理模式**

//用户委托快捷方式打开exe

//为了不暴露执行对象的部分代码

//男孩委托快递小哥给女孩送礼物

var girl = function(name)\{

this.name = name;

//隐藏复杂，不愿意修改的的方法

var boy = function(girl)\{

this.girl = girl;

this.send = function(gift)\{

alert("你好："+this.girl.name+",给你一个"+gift);

var proxyBro = function(girl)\{

this.send = function(gift)\{

new boy(girl).send(gift);

var pro = new proxyBro(new girl("Lisa"));

pro.send("么么哒");

pro.send("玫瑰花");

**38.js性能优化**

**http:超文本协议**

它的最上层是应用层 传输层 网络层 物理层

请求信息：请求行 请求头 空行 消息体

响应信息：状态行和状态码

**使用值类型的ToString方法**：

在连接字符串时，经常使用"+"号直接将数字添加到字符串中。这种方法虽然简单，也可以得到正确结果，但是由于涉及到不同的数据类型，数字需要通过装箱操作转化为引用类型才可以添加到字符串中。但是装箱操作对性能影响较大，因为在进行这类处理时，将在托管堆中分配一个新的对象，原有的值复制到新创建的对象中。使用值类型的ToString方法可以避免装箱操作，从而提高应用程序性能。

**尽量选择html控件**：

能在客户端实现的功能就在客户端实现(熟练掌握JavaScript)，减少服务器的压力。数据控件选择顺序：Repeater、DataList、DataGrid。

在建立数据库连接后只有在真正需要操作时才打开连接，使用完毕后马上关闭，从而尽量减少数据库连接打开的时间，避免出现超出连接限制的情况。

**字符串操作性能优化**

**(1) 使用值类型的ToString方法。**

在连接字符串时，经常使用"+"号直接将数字添加到字符串中。这种方法虽然简单，也可以得到正确结果，但是由于涉及到不同的数据类型，数字需要通过装箱操作 ，转化为引用类型才可以添加到字符串中。但是装箱操作对性能影响较大，因为在进行这类处理时，将在托管堆中分配一个新的对象，原有的值复制到新创建的对象中。使用值类型的ToString方法可以避免装箱操作，从而提高应用程序性能。

**(2) 运用StringBuilder类**

String类对象是不可改变的，对于String对象的重新赋值在本质上是重新创建了一个String对象并将新值赋予该对象，其方法ToString对性能的提高并非很显著。在处理字符串时，最好使用StringBuilder类，其.NET 命名空间是System.Text。该类并非创建新的对象，而是通过Append，Remove，Insert等方法直接对字符串进行操作，通过 ToString方法返回操作结果。

避免到服务器的不必要的往返过程

使用Page.IsPostBack避免对往返过程执行不必要的处理。

虽然您很可能希望尽量多地使用Web窗体页框架的那些节省时间和代码的功能，但在某些情况下却不宜使用 ASP.NET 服务器控件和回发事件处理。通常，只有在检索或存储数据时，您才需要启动到服务器的往返过程。多数数据操作可在这些往返过程间的客户端上进行。

**压缩js**

js在页面中调用的大小写要保持一致，免得缓存了不同的文件，页面的js可以的话，写成单位的文件进行调用 。图片少用jpeg，使用gzip对网页进行压缩. 加快页面展示速度。

把调用js，尽量写在页面底部， 还有viewstate 状态也可以重写到页面低部，也可以把viewstate进行压缩。条件是viewstate必要要用的情况之下。

**39.js浅拷贝、深拷贝之间的区别**

深拷贝和浅拷贝的使用场景是在复杂对象里，即对象的属性还是对象，

浅拷贝是指只复制一层对象，当对象的属性是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化

**浅拷贝的方法**

// 只复制第一层的浅拷贝

function simpleCopy(obj1) \{