总结面试题——Javascript

文章目录

1.闭包
2.作用域链
3.JavaScript的原型原型链有什么特点
4.事件代理
5.Javascript如何实现继承
6.this对象
7.事件模型
8.new操作符
9.ajax原理
10.解决跨域问题
11.模块化开发怎么做
12.异步加载js的方式有哪些
13.会造成内存泄漏的操作
14.XML和JSON的区别
15.webpack
16.AMD和Commonjs
17.常见web安全及护理原理
18 用过哪些设计模式？
19 为什么要有同源限制？
20 offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
21.Javascript有哪些方法定义对象
22.常见的兼容性问题
23.promise
24.Jquery有哪些写得好的地方
25.vue react angular
26.Node的应用场景
27.web开发中会话跟踪的方法
28.js的基本数据类型
29.Js中的内置对象
30.写Javascript的规范
31.Javascript有几种类型的值
32.null和undefined的区别

1.闭包

闭包就是在函数中嵌套函数作用是可以读取其他函数中的变量突破作用域并且在函数中涉及到的变量会永远保存于内存中

2.作用域链

作用域链就是在执行环境中有序的限制和控制变量以及函数的可访问范围在作用域链中变量只能向上访问不能向下

3.JavaScript的原型原型链有什么特点

每个对象都会在其内部初始化一个属性就是原型 prototype

当我们访问一个对象中不存在的属性时他会去他的prototype 中寻找未找到再向prototype中寻找以此类推就形成了原型链

关系：instance.constructor.prototype = instance.proto
构造函数的原型对象=实例化对象的对象原型

特点：当我们更改构造函数的原型时相应的构造函数中也可以继承到该属性当我们需要一个对象中的属性时 Javascript引擎会帮我们寻找当前对象中是否有如果没有则向上prototype中去寻找一直检索到 Object 内建对象

4.事件代理

事件代理又称为事件委托就是根据DOM的事件冒泡原理将应该注册的事件委托给父元素让其担当事件的监听职务从而大量的节省内存的占用减少事件的注册尤其是动态添加的子元素无需为其注册事件

5.Javascript如何实现继承

可以使用原型对象和构造函数的混合方式实现继承

6.this对象

在函数中的this指向函数的直接调用者
如果有new关键字则this指向new实例的对象
在事件中this指向出发这个事件的对象 IE中的attchEvent（绑定事件）函数的默认this指向为window 要解决问题可以通过call改变方法的指向

7.事件模型

W3c中定义事件的发生经历三个阶段捕获阶段目标阶段冒泡阶段
冒泡型事件当使用冒泡事件时子级元素先触发父级元素后触发
捕获型事件当使用捕获事件时父级元素先触发子级元素后出发
DOM事件流同时支持捕获和冒泡事件
阻止冒泡 W3c中使用stoppropagation（）方法在IE下设置cancelBubble=true
阻止捕获阻止事件的默认行为在W3c中使用preventDefault（）方法在IE下设置window.event.returnValue = false

8.new操作符

创建一个空白对象并且this变量引用该对象同时继承该对象的原型
属性和方法都被加入到this引用的对象中
新创建的对象由this所引用并且最后隐式的返回this

9.ajax原理

Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎) 通过XmlHttpRequest对象来向服务器发异步请求从服务器获得数据然后用javascript来操作DOM而更新页面使用户操作与服务器响应异步化这其中最关键的一步就是从服务器获得请求数据
Ajax的过程只涉及JavaScript XMLHttpRequest和DOM XMLHttpRequest是ajax的核心机制
ajax优点
通过异步模式提升了用户体验
优化了浏览器和服务器之间的传输减少不必要的数据往返减少带宽的占用
Ajax在客户端运行承担了一部分本来由服务器承担的工作减少了大用户量下的服务器负载
Ajax可以实现动态不刷新（局部刷新）
ajax缺点
安全问题 AJAX暴露了与服务器交互的细节
对搜索引擎的支持比较弱
不容易调试

10.解决跨域问题

首先了解下浏览器的同源策略同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源
解决跨域：
通过jsonp跨域
document.domain + iframe跨域
nginx代理跨域
nodejs中间件代理跨域
后端在头部信息里面设置安全域名

11.模块化开发怎么做

一个功能就是一个模块多个模块可以组成完整应用抽离一个模块不会影响其他模块的运行

立即执行函数不暴露私有成员

12.异步加载js的方式有哪些

defer 只支持IE
asyec
创建script 插入DOM中加载完毕后callBack

13.会造成内存泄漏的操作

内存泄露指任何对象在您不再拥有和需要他之后仍然存在
setTimeout的第一个参数使用字符串而非函数的话会发生内存泄漏
闭包使用不恰当控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

14.XML和JSON的区别

数据体积方面
JSON相对于XML来说数据体积更小传递的速度更快些
数据交互方面
JSON和script的之间的交互更加方便更容易解析处理更好的数据交互
数据描述方面
JSON对数据的描述比XML较差
传输速度方面
JSON的速度要远快于XML

15.webpack

WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源

16.AMD和Commonjs

Commonjs是后端服务器模块的规范 node.js采用这个规范 Common规范加载模块是同步的也就是说只有加载完成后才能进行后面的操作
AMD规范则是非同步加载模块允许指定回调函数 AMD推荐的风格通过返回一个对象作为模块对象
Commonjs的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的
es6模块 CommonJS、AMD、CMD
CommonJS 的规范中，每个 JavaScript 文件就是一个独立的模块上下文（module context），在这个上下文中默认创建的属性都是私有的。也就是说，在一个文件定义的变量（还包括函数和类），都是私有的，对其他文件是不可见的。
CommonJS是同步加载模块,在浏览器中会出现堵塞情况，所以不适用
AMD 异步，需要定义回调define方式
es6 一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量 es6还可以导出类、方法，自动适用严格模式

17.常见web安全及护理原理

sql注入原理
就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令
总结以下几点：
永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等
永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取
永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接
不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息
XSS原理及防范
Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点
XSS防范方法
首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击
XSS与CSRF有什么区别吗？
XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。要完成一次CSRF攻击，受害者必须依次完成两个步骤

登录受信任网站A，并在本地生成Cookie
在不登出A的情况下，访问危险网站B

CSRF的防御
服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数
通过验证码的方法

18 用过哪些设计模式？

工厂模式：
工厂模式解决了重复实例化的问题，但还有一个问题,那就是识别问题，因为根本无法
主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字
构造函数模式
使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不同之处在于
直接将属性和方法赋值给 this对象;

19 为什么要有同源限制？

同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议
举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

20 offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同
clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条
scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

21.Javascript有哪些方法定义对象

对象字面量：var obj={}
构造函数：var obj=new object（）
Object.create（）：var obj=Object.create（Object.prototype）

22.常见的兼容性问题

png24位的图片在IE浏览器上出现背景解决方案是做成png8
浏览器默认的margin和padding不同可通过全局添加margin：0；padding：0；来统一
IE下evevnt对象有x，y属性但是没有pagex，pagey属性
Firefox下event对象有pagex pagey属性没有x y 属性

23.promise

依照promise/A+的定义 promise有四种状态
pending ：初始状态非 fulfilled（成功的操作）或 rejected（失败的操作）
fulfilled和rejected合称settled
promise对象用于延迟（deferred）和异步（asynchronous）计算
promise的构造函数
基本用法如下：

var p1=new promise（（resolve，reject）=>{
if（---）{resolve（data）
}else{reject（err）
}
}）

promise实例拥有then方法（具有then方法的对象通常被称为thenable）使用方法如下
p1.then（（aa，bb）
接收两个函数做为参数aa就是在fulfilled的时候被调用 bb在rejected的被调用接收的参数就是future aa对应resolve bb对应reject

24.Jquery有哪些写得好的地方

1>jquery源码封装在一个匿名函数的自执行环境中有助于防止变量的全局污染然后通过传入window对象参数可以使windown对象作为局部变量使用好处是当jquery 访问windown对象的时候就不用将作用域链退回访顶级作用域了从而可以更快的访问windown对象了同样传递undefined参数可以缩短查找undefined时的作用域链
2>jquery将一些原型属性和方法封装在了jquery.prototype中为了缩短名称又赋值给了jquery.fn 这是很形象的写法
3>有一些数组和对象的方法经常能使用到 jquery将其保存为局部变量以提高访问速度
4>jquery实现的链式调用可以节约代码所有返回的都是同一对象可以提高代码效率

25.vue react angular

vue.js一个用于创建web交互页面的库是一个精简的MVVM 他通过双向数据绑定把view层和model层连接起来实际的DOM封装和输出格式都被抽象为了Directives和Filtes
AngularJs是一个比较完善的前端MVVM框架包含模板数据双向绑定路由模块化服务依赖注入等所有功能模板功能强大丰富自带丰富的Angular指令
react React仅仅是VIEW层facebook公司推出的用于构建ui的一个库能都是先服务器端的渲染使用virtual dom 所以性能很好

26.Node的应用场景

特点
他是一个Javascript运行环境
依赖于chrome V8引擎进行代码解释
事件驱动
非堵塞I/O
单进程单线程
优点
高并发（最重要的优点）
缺点
只支持单核cpu 不能充分利用cpu
可靠性能低一旦代码某个环节崩溃整个代码崩溃

27.web开发中会话跟踪的方法

cookie
session
url重写
隐藏input
ip地址

28.js的基本数据类型

未定义undefined
空 null
布尔 boolean
数字 number
字符串 string

29.Js中的内置对象

object是Javascript中的所有对象的父对象
数据封装类对象有：
object Array Boolean Number String
其他对象：
Function Arguments Math Data RegExp Error

30.写Javascript的规范

不要再同一行声明多个变量
尽量使用=== / !== 来比较true/false 或者数值
适用对象字面量替代new Array这个形式
不要使用全局函数
Switch语句必须带有的default分支
if语句必须有大括号
for-in循环中的变量应该使用var关键字明确限定作用域从而避免作用域污染

31.Javascript有几种类型的值

栈：原始数据类型（Undefined，Null，Boolean，Number、String）
堆：引用数据类型（对象、数组和函数）
两种类型的区别是：存储位置不同；
原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其
在栈中的地址，取得地址后从堆中获得实体

32.null和undefined的区别

null 表示不存在这个值
表示一个对象被定义了值为空值可以理解为一个空对象里面没有属性跟方法
undefined 表示表示缺少值或者说是应该有这个值而并没有定义
变量被声明了但是没有赋值返回就是undefined
如果作为函数的参数表示该函数的参数不是对象在验证null时一定要用 === 因为 == 无法分别null和undefined