JS面试题（二）

一、什么是JS的同源策略和如何解决跨域？

1.1同源策略

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下行为：

1. cookie、LocalStorage和IndexDB无法读取
2. DOM和JS对象我发获得
3. AJAX请求不能发送

1.2什么是跨域？

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里的跨域是广义的

广义的跨域：

1. 资源跳转：a链接，重定向，表单提交
2. 资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face
3. 脚本请求：js发起的ajax请求、dom和js对象的跨域操作等

1.3跨域解决方案

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

详情查看此链接

 一、JavaScript的typeof返回那些数据类型

数据类型	结果
Undefined	“undefined”
Null	“object”
布尔值	“boolean”
数值	“number”
字符串	“string”
Symbol (ECMAScript 6 新增)	“symbol”
宿主对象(JS环境提供的，比如浏览器)	Implementation-dependent
函数对象	“function”
任何其他对象	“object”

// Numbers

typeof 37 === 'number';

typeof 3.14 === 'number';

typeof Math.LN2 === 'number';

typeof Infinity === 'number';

typeof NaN === 'number'; // 尽管NaN是"Not-A-Number"的缩写,意思是"不是一个数字"

typeof Number(1) === 'number'; // 不要这样使用!

 

// Strings

typeof "" === 'string';

typeof "bla" === 'string';

typeof (typeof 1) === 'string'; // typeof返回的肯定是一个字符串

typeof String("abc") === 'string'; // 不要这样使用!

 

// Booleans

typeof true === 'boolean';

typeof false === 'boolean';

typeof Boolean(true) === 'boolean'; // 不要这样使用!

 

// Symbols

typeof Symbol() === 'symbol';

typeof Symbol('foo') === 'symbol';

typeof Symbol.iterator === 'symbol';

 

// Undefined

typeof undefined === 'undefined';

typeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量

 

// Objects

typeof {a:1} === 'object';

 

// 使用Array.isArray或者Object.prototype.toString.call方法可以从基本的对象中区分出数组类型

typeof [1, 2, 4] === 'object';

 

typeof new Date() === 'object';

 

// 下面的容易令人迷惑，不要这样使用！

typeof new Boolean(true) === 'object';

typeof new Number(1) ==== 'object';

typeof new String("abc") === 'object';

 

// 函数

typeof function(){} === 'function';

typeof Math.sin === 'function';

 二、JavaScript的事件流模型都有什么？

冒泡事件流：

当触发一个节点的事件时，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点 。

捕获事件流：

当触发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，

知道当前节点自身 。

DOM事件流：

dom同时支持两种事件模型，但捕获性事件先开始，从document开始也结束于document，dom模型的独特之处在于文本也可以触发事件。

什么时候是事件冒泡？事件捕获？

当使用addEventListener绑定事件，第三个参数设为true时表示事件捕获，除此之外的所有事件均为事件冒泡。

阻止事件冒泡
①IE10之前，使用e.cancelBubble = true;

②IE10之后，使用 e.stopPropagation();

function myParagraphEventHandler(e) {
     e = e || window.event;     
     if (e.stopPropagation) {
               e.stopPropagation(); //IE10之后 
                   } else {         
                    e.cancelBubble = true; //IE10之前     } }

阻止默认事件
①IE10之前：e.returnValue = false;

②IE10之后：e.stopPropagation();

function eventHandler(e) {
   e = e || window.event;
      // 防止默认行为   
      if (e.preventDefault) {  
            e.preventDefault(); //IE10之外   
             }else {       e.returnValue = false; //IE10之前    } }

三、BOM对象有哪些，列举window对象

1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；

2、document对象，文档对象；

3、location对象，浏览器当前URL信息；

4、navigator对象，浏览器本身信息；

5、screen对象，客户端屏幕信息；

6、history对象，浏览器访问历史信息；

 四、什么是AJAX以及基本步骤

• Ajax = 异步 JavaScript 和XML。
• Ajax是一种用于创建快速动态网页的技术。
• 通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
• 传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面。

(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新

五、HTTP状态消息 200 302 304 403 500分别表示什么？

200成功

302临时移动

304请求的数据没有修改可以读取缓存

403服务器拒绝请求

500 服务器遇到错误无法完成请求

六、GET和POST的区别，什么时候用POST

1. get用来获取数据，post用来提交数据
2. get参数有长度限制（最长2048字节，受限于url长度），post无限制
3. get请求的数据会附加在url之上，多个参数用&连接；post请求会把请求的数据放在http请求体中
4. get是明文传输，post是放在请求体中，post比get请求相对安全
5. get请求会保存在浏览器历史记录中，还可能保存在web服务器的日志中

• 请求的结果有持续性的副作用，例如，数据库内添加新的数据行。
• 若使用GET方法，则表单上收集的数据可能让URL过长。
• 要传送的数据不是采用7位的ASCII编码。