佛系前端面试题记录--第五周

1.如何中断ajax请求？
2.说一下事件代理？（事件委托）
3.target、currentTarget的区别？
4.说一下继承的几种方式及优缺点？
5.export和export default的区别？
6.常用的es6的功能
7.get、post的区别
8. e.getAttribute和 e.propName 有什么区别和联系
9.offsetWidth,clientWidth与scrollWidth的区别
10.javascript 有哪些方法定义对象
11.<,>,<=,>=的比较规则
12.javascript 跨域通信
13.javascript 有哪几种数据类型

1.如何中断ajax请求？

停止javascript的ajax请求，一种是设置超时时间让ajax自动断开，另一种为手动去停止ajax请求，其核心是调用XMLHttpRequest对象上的abort方法，这里，我们以jquery举例说明：jquery的ajax对象的abort方法

调用abort后jquery会执行error的方法，抛出abort的异常信息，这个时候就可以执行我们中断ajax后的操作了

var ajax = $.ajax({'error':function(jqXHR, textStatus, errorThrown){if(errorThrown != 'abort'){//ajax被调用abort后执行的方法alert('您的ajax方法被停止了');}}
})ajax.abort();//停止ajax

注意：不要用abort方法来作为终止对服务器的请求操作，只能当做在前端页面立刻停止执行ajax成功后的方法，因为你执行abort方法后，ajax很可能已经对服务端发送了请求，只是还未返回回馈信息而已。

转自 https://blog.csdn.net/canpark/article/details/19625365

2.说一下事件代理？（事件委托）

js中事件冒泡我们知道，子元素身上的事件会冒泡到父元素身上。

事件代理就是，本来应该加在子元素身上的事件，我们却把事件加在了其父级身上。

那就产生了问题：父级那么多子元素，怎么区分事件本应该是哪个子元素的？

答案是：event对象里记录的有“事件源”，它就是发生事件的子元素。

它存在兼容性问题，在老的IE下，事件源是 window.event.srcElement，其他浏览器是 event.target

用事件委托有什么好处呢？
第一个好处是效率高，比如，不用for循环为子元素添加事件了
第二个好处是，js新生成的子元素也不用新为其添加事件了，程序逻辑上比较方便

基本概念

事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

事件冒泡
一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段

如上图所示，事件传播分成三个阶段：

捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；

目标阶段：在目标节点上触发，称为“目标阶段”

冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；

举例
通过举例来体会事件委托的实际应用和优点

例子1：页面有个ul包含着4个li，鼠标移动到li上，li背景变成红色，移出，背景恢复原色。

如果按照以前的写法，代码如下：

<ul id="ul1"><li>111</li><li>222</li><li>333</li><li>444</li></ul><script type="text/javascript">window.onload = function(){var oUl = document.getElementById('ul1');var aLi = oUl.children;console.log(aLi);//传统方法，li身上添加事件，需要用for循环，找到每个lifor (var i=0;i<aLi.length;i++) {aLi[i].onmouseover = function() {this.style.background = 'red';}aLi[i].onmouseout = function(){this.style.background = '';}}//for结束}</script>

现在用事件委托的方式，onmouseover、onmouseout方法要加在ul身上了，再通过找事件源的方式，改变li背景，代码如下：

上面ul的html代码不变，js部分变为

<script type="text/javascript">window.onload = function(){var oUl = document.getElementById('ul1');oUl.onmouseover = function(ev){var ev = ev || window.event;var oLi = ev.srcElement || ev.target;oLi.style.background = 'red';}oUl.onmouseout = function(ev){var ev = ev || window.event;var oLi = ev.srcElement || ev.target;oLi.style.background = '';}}</script>

效果如下：

但是会发现，鼠标移到了ul身上而不是某个li身上时，获取的事件源是ul，那么整个ul背景将变红，这不是想要的结果，怎么办？

答曰：加个判断。通过事件源的nodeName判断是不是li，是的话，才做出反应，不是的话，不理它。为了防止nodeName在不同浏览器获取的字母大小写不同，加个toLowerCase()

所以，上面的js代码更改如下：

<script type="text/javascript">window.onload = function(){var oUl = document.getElementById('ul1');oUl.onmouseover = function(ev){var ev = ev || window.event;var oLi = ev.srcElement || ev.target;if(oLi.nodeName.toLowerCase() == 'li'){oLi.style.background = 'red';}}oUl.onmouseout = function(ev){var ev = ev || window.event;var oLi = ev.srcElement || ev.target;if(oLi.nodeName.toLowerCase() == 'li'){oLi.style.background = '';}}}</script>

效果如下很完美：

例子2：点击不同的li，实现不同的效果

比如我们有这样的一个 HTML 片段：

<ul id="myLinks"><li id="goSomewhere">Go somewhere</li><li id="doSomething">Do something</li><li id="sayHi">Say hi</li>
</ul>

按照传统的做法，需要像下面这样为它们添加 3 个事件处理程序

var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");item1.onclick = function() {location.href = "http://www.baidu.com";
};
item2.onclick = function() {document.title = "事件委托";
};
item3.onclick = function() {alert("hi");
};

如上面代码所示，如果给每个li列表项都绑定一个函数，那对内存的消耗是非常大的，因此较好的解决办法就是将li元素的点击事件绑定到它的父元素ul身上，执行事件的时候再去匹配判断目标元素。

如果通过 AJAX 或者用户操作动态的增加或者删除列表项li元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件，非常麻烦

如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。

var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");document.addEventListener("click", function (event) {var target = event.target;switch (target.id) {case "doSomething":document.title = "事件委托";break;case "goSomewhere":location.href = "http://www.baidu.com";break;case "sayHi": alert("hi");break;}
})

jQuery-- delegate()实现

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

格式：$(selector).delegate(childSelector, event, data, function)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head><body><ul id="myLinks"><li id="goSomewhere">Go somewhere</li><li id="doSomething">Do something</li><li id="sayHi">Say hi</li></ul><script>$(document).ready(function () {$("#myLinks").delegate("#goSomewhere", "click", function () {location.href = "http://www.baidu.com";});});</script></body></html>

例子3：点击li（a标签）弹出相应内容

<ul id="nav"><li><a href="http://www.cnblogs.com/">博客园</a></li><li><a href="http://www.blueidea.com/">蓝色理想</a></li><li><a href="http://www.51js.com/html/bbs.html">无忧脚本</a></li><li><a href="http://www.javaeye.com/">javaeye</a></li><li><a href="http://community.csdn.net/">CSDN</a></li>
</ul>

现在我们要点击列表中链接，取出里面的内容，传统的方法，我们需要遍历添加所有a元素：

window.onload = function(){var nav = document.getElementById("nav");var links = nav.getElementsByTagName("a");for (var i=0,l = links.length; i<l; i++) {links[i].onclick = function () {alert(this.innerHTML);return false; }}}

新的方法，用nav代理了它下面所有元素，让它负责大家的onclick事件，包括它自己的，也不管是否为a元素，所以有时我们需要做一些判断，但少了遍历DOM树，效率明显提高。

window.onload = function(){var nav = document.getElementById("nav");nav.onclick = function () {var e = arguments[0] || window.event,target = e.srcElement ? e.srcElement : e.target;alert(target.innerHTML);return false;}
}

参考

https://www.cnblogs.com/html55/p/10164914.html
https://blog.csdn.net/qq_38128179/article/details/86293394
https://www.cnblogs.com/rubylouvre/archive/2009/08/09/1542174.html

3.target、currentTarget的区别？

target：触发事件的元素。
currentTarget：事件绑定的元素。

两者在没有冒泡的情况下，是一样的值
但在用了事件委托的情况下，就不一样了

上面提到事件委托，就是将子元素的事件绑定到父元素上，所以在事件委托中，target通常为子元素（没有绑定事件，但可以作为触发事件的元素）；
currentTarget 为父元素，事件绑定在他的身上。
currentTarget始终是监听事件者，而 target 是事件的真正发出者。

4.说一下继承的几种方式及优缺点？

1）原型链继承：

我们使用原型继承时，主要利用sub.prototype=new super，这样连通了子类-子类原型-父类。

核心：将父类的实例作为子类的原型。

//父类，带属性
function Super(){  this.flag = true;
}
//为了提高复用性，方法绑定在父类原型属性上
Super.prototype.getFlag = function(){  return this.flag;
}
//来个子类
function Sub(){  this.subFlag = false;
}
//实现继承
Sub.prototype = new Super;
//给子类添加子类特有的方法，注意顺序要在继承之后
Sub.prototype.getSubFlag = function(){  return this.subFlag;
}
//构造实例
var es5 = new Sub;

特点：

1. 非常纯粹的继承关系，实例是子类的实例，也是父类的实例

2. 父类新增原型方法/原型属性，子类都能访问到

缺点：

来自原型对象的引用属性是所有实例共享的，即属性没有私有化，原型上属性的改变会作用到所有的实例上。

2）构造函数继承：

在构造子类构造函数时内部使用call或apply来调用父类的构造函数

核心：使用父类的的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Super(){  this.flag = true;
}
function Sub(){  Super.call(this)  //如果父类可以需要接收参数，这里也可以直接传递
}
var obj = new Sub();
obj.flag = flase;
var obj_2 = new Sub();
console.log(obj_2.flag)  //依然是true，不会相互影响

优缺点：实现了属性的私有化，但是子类无法访问父类原型上的属性。

特点：
　　1. 解决了1中，子类实例共享父类引用属性的问题
　　2. 创建子类实例时，可以向父类传递参数
　　3. 可以实现多继承（call多个父类对象）
　　缺点：
　　1. 实例并不是父类的实例，只是子类的实例
　　2. 只能继承父类的实例属性和方法，不能继承原型属性/方法
　　3. 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
　　
　　　3）组合继承：

利用构造函数和原型链的方法，可以比较完美的实现继承

　　function Super(){  this.flag = true;
}
Super.prototype.getFlag = function(){  return this.flag;     // 继承方法
}
function Sub(){  this.subFlag = flase  Super.call(this)    // 继承属性
}
Sub.prototype = new Super;
var obj = new Sub();
// Sub.prototype = new Super; 会导致Sub.prototype的constructor指向Super;
// 然而constructor的定义是要指向原型属性对应的构造函数的，Sub.prototype是Sub构造函数的原型，
// 所以应该添加一句纠正：Sub.prototype.constructor = Sub;
Sub.prototype.constructor = Sub;  // 修复构造函数指向
Super.prototype.getSubFlag = function(){  return this.flag;
}

特点：
　　1. 弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
　　2. 既是子类的实例，也是父类的实例
　　3. 不存在引用属性共享问题
　　4. 可传参
　　5. 函数可复用
　　缺点：
　　1. 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

4）寄生继承：

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

example1：

function Cat(name){Animal.call(this);this.name = name || 'Tom';
}
(function(){// 创建一个没有实例方法的类var Super = function(){};Super.prototype = Animal.prototype;//将实例作为子类的原型Cat.prototype = new Super();
})();
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
Cat.prototype.constructor = Cat; // 需要修复下构造函数

example2：

　特点：使用到了Object.create(Fu.prototype)实现原型链的浅拷贝
　优点：解决了原型链继承和构造函数继承的缺点

转自 https://www.cnblogs.com/memphis-f/p/12029534.html

5.export和export default的区别？

1.export与export default均可用于导出常量、函数、文件、模块等
2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3.在一个文件或模块中，export、import可以有多个，export default仅有一个
4.通过export方式导出，在导入时要加{ }，export default则不需要

作者：开车去环游世界
链接：https://www.jianshu.com/p/edaf43e9384f

export的使用
1.直接输出

export let words = 'hello world!!!' export function output() { // ...
}

2.先定义再输出

let firstWords = 'hello'
let secondWords = 'world'
let thirdWords = '!!!'function output() {// ...
}export {firstWords, secondWords, thirdWords, output}

export default的使用
1.export default 用于规定模块的默认对外接口
2.很显然默认对外接口只能有一个，所以 export default 在同一个模块中只能出现一次
3.export default只能直接输出，不能先定义再输出。

4.其在 import 方式上也和 export 存在一定区别

(1)export的输出与import输入

export function output() {// ...
}import {output} from './example'

(2)export default的输出与import输入

export default function output() {// ...
}import output from './example'

从以上两种 import 方式即可看出，export default 的 import 方式不需要使用大括号包裹。因为对于 export default 其输出的本来就只有一个接口，提供的是模块的默认接口，自然不需要使用大括号包裹。

参考 https://www.cnblogs.com/sherrycat/p/11152994.html

6.常用的es6的功能

https://blog.csdn.net/m0_37529303/article/details/78215048

7.get、post的区别

1.提交方式

get : get会将接收到的数据拼接到url地址中,以’?’问号划分,问号后面是接收到的数据,多个数据之间用&连接.用户可以很直观的看见.

post : post会将接收到的数据放置在html header中一起发送到指定的url地址内.用户看不到这个过程.

2.传递数据大小

get : get传递数据的大小因为受到浏览器地址栏的限制,所以一般在2k-8k,这要据浏览器而定,比如谷歌浏览器就是8k.

post : post传递数据的大小最小是2M,但理论上是无上限的.

3.应用范围

get : get一般用于获取/查询资源信息.多用于a标签的href属性中,也常用于location.href属性中.

post :post一般是用于更新数据信息.多用于表单提交.

4.安全性

get的安全性比post较差.

8. e.getAttribute和 e.propName 有什么区别和联系

e.getAttribute()，是标准DOM操作文档元素属性的方法，具有通用性可在任意文档上使用，返回元素在源文件中设置的属性
e.propName通常是在HTML文档中访问特定元素的特性，浏览器解析元素后生成对应对象（如a标签生成HTMLAnchorElement），这些对象的特性会根据特定规则结合属性设置得到，对于没有对应特性的属性，只能使用getAttribute进行访问
e.getAttribute()返回值是源文件中设置的值，类型是字符串或者null（有的实现返回""）
e.propName返回值可能是字符串、布尔值、对象、undefined等
大部分attribute与property是一一对应关系，修改其中一个会影响另一个，如id，title等属性
一些布尔属性的检测设置需要hasAttribute和removeAttribute来完成，或者设置对应property
像link中href属性，转换成property的时候需要通过转换得到完整URL
一些attribute和property不是一一对应如：form控件中对应的是defaultValue，修改或设置value
property修改的是控件当前值，setAttribute修改value属性不会改变value property

9.offsetWidth,clientWidth与scrollWidth的区别

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

10.javascript 有哪些方法定义对象

对象字面量
var obj = {}
构造函数
var obj = new Object()
Object.create()
var obj = Object.create(Object.prototype)
Object.create() 创建的新对象的原型指向接收参数本身，new Object() 创建的新对象的原型指向的是 Object 的 protoype

可以通过 Object.create(null) 创建一个干净的对象，也就是没有原型，而 new Object() 创建的对象是 Object 的实例，原型永远指向 Object 的 prototype

更全面的点击这里

作者：bestCindy
链接：https://www.jianshu.com/p/6395970a415f

11.<,>,<=,>=的比较规则

比较操作符(>、<、>=、<=)可以将对象转换成string或者number后再进行比较 – 对于number，比较值的大小；对于string，则比较字符在编码表中出现的次序。

12.javascript 跨域通信

方式如下：

JSONP
WebSocket
CORS
Hash
postMessage

1、JSONP
面试会问：JSONP的原理是什么？怎么实现的？

在CORS和postMessage以前，我们一直都是通过JSONP来做跨域通信的。

JSONP的原理：通过

JSONP的实现：

比如说，客户端这样写：

<script src="http://www.smyhvae.com/?data=name&callback=myjsonp"></script>

上面的src中，data=name是get请求的参数，myjsonp是和后台约定好的函数名。
服务器端这样写：

    myjsonp({data: {}})

于是，本地要求创建一个myjsonp 的全局函数，才能将返回的数据执行出来。

2、WebSocket
WebSocket的用法如下：

//var ws = new WebSocket('wss://echo.websocket.org'); //创建WebSocket的对象。参数可以是 ws 或 wss，后者表示加密。//把请求发出去
ws.onopen = function (evt) {console.log('Connection open ...');ws.send('Hello WebSockets!');
};//对方发消息过来时，我接收
ws.onmessage = function (evt) {console.log('Received Message: ', evt.data);ws.close();
};//关闭连接
ws.onclose = function (evt) {console.log('Connection closed.');
};

3、CORS
CORS 可以理解成是既可以同步、也可以异步*的Ajax。

fetch 是一个比较新的API，用来实现CORS通信。用法如下：

  // url（必选），options（可选）fetch('/some/url/', {method: 'get',}).then(function (response) {  //类似于 ES6中的promise}).catch(function (err) {// 出错了，等价于 then 的第二个参数，但这样更好用更直观});

4、Hash
url的#后面的内容就叫Hash。Hash的改变，页面不会刷新。这就是用 Hash 做跨域通信的基本原理。

补充：url的?后面的内容叫Search。Search的改变，会导致页面刷新，因此不能做跨域通信。

使用举例：

场景：我的页面 A 通过iframe或frame嵌入了跨域的页面 B。

现在，我这个A页面想给B页面发消息，怎么操作呢？

（1）首先，在我的A页面中：

//伪代码
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'jsonString';  //我们可以把JS 对象，通过 JSON.stringify()方法转成 json字符串，发给 B

（2）然后，在B页面中：

// B中的伪代码
window.onhashchange = function () {  //通过onhashchange方法监听，url中的 hash 是否发生变化var data = window.location.hash;
};

5、postMessage()方法
H5中新增的postMessage()方法，可以用来做跨域通信。既然是H5中新增的，那就一定要提到。

场景：窗口 A (http:A.com)向跨域的窗口 B (http:B.com)发送信息。步骤如下。

（1）在A窗口中操作如下：向B窗口发送数据：

// 窗口A(http:A.com)向跨域的窗口B(http:B.com)发送信息
Bwindow.postMessage('data', 'http://B.com'); //这里强调的是B窗口里的window对象

（2）在B窗口中操作如下：

// 在窗口B中监听 message 事件
Awindow.addEventListener('message', function (event) {   //这里强调的是A窗口里的window对象console.log(event.origin);  //获取 ：url。这里指：http://A.comconsole.log(event.source);  //获取：A window对象console.log(event.data);    //获取传过来的数据
}, false);

参考：https://www.cnblogs.com/qianguyihao/p/8523576.html

13.javascript 有哪几种数据类型

8种。Number、String、Boolean、Null、undefined、object、symbol、bigInt。

1､Undefined 类型

只有一个值。在使用var 声明变量但未对其加初始化时，这个变量就是undefined。

2､Null 类型

只有一个值。null是表示一个空对象指针，这也是typeof操作符检测 null 值时会返回 object 的原因。

3､Boolean 类型

使用最多的一个类型，有两个字面值，分别是true、false。true不一定等于1,false不一定等于0。

boolean类型的字面值是区分大小写的。True和False是标识符

4､Number 类型

数字类型，表示数据的整数和浮点数。某些语言中也称为“双精度值”。

    var intNum = 55;十进制var num = 012;八进制var octalNum = 0x23;十六进制

5､String 类型

字符串可以有单引号、双引号表示。字符串是不可变的，一旦创建，值就不能改变

要改变某个变量保存的字符串，首先要销毁原来的字符串，然后于用另一个包含的字符串填充该变量。

6､Object 类型

ECMAjavascript中的对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。创建object类型的实例并为其添加属性（或）方法，就可以自定义创建对象。

如：var o = new Object( );

object 的每个实例都有下列属性和方法：

constructor：保存着用于创建当前对象的函数。（构造函数)constructor就是object();
hasOwnProperty(propertyName):用于检查给定的当前属性在当前对象实例中）而不是在实例原型中）是否存在。其中，作为参数的属性名（propertyName)必须以字稚串形式指定（例如：o.hasOwnProperty(“name”))。
isPrototypeOf(object):用于检查传入的对象是否是传入对象原型。
propertyIsEnumerable(propertyName):用于检查给定属性是否能够用for-in语句。与hasOwnProperty（）方法一样，作为参数的属性名必须以字符串形式指定
toLocaleString( ):返回对象的字符串表示，该字符串与执行环境的地区对应。
toString( ):返回对象的字符串表示。
valueOf( ):返回对象的字符串、数值或者布尔值表示。通常与toString( )方法的返回值得相同。

ECMAJS中object是所有对象的基础，因些所有对象都具有这些基本的属性和方法。

7､ Symbol 类型

Symbol 类型的对象永远不相等，即便创建的时候传入相同的值。因此，可以用解决属性名冲突的问题（适用于多少编码），做为标记。

这是 es6 新增的数据类型。

8､BigInt 类型

Javascript 中的任意精度整数，可以安全存储和操作大整数。即始超出 Number 能够表示的安全整数范围。是 chrome 67中的新功能。

转自 https://blog.csdn.net/u013592575/article/details/95087953