2017口试分享（js口试题纪录）

1. 最简朴的一道题

    '11' * 2
    'a8' * 3
    var a = 2, b = 3;
    var c = a+++b; // c = 5

2. 一道this的题目

    var num = 10;
    var obj = {
        num:8,
        inner: {
            num: 6,
            print: function () {
                console.log(this.num);
            }
        }
    }
    num = 888;
    obj.inner.print(); // 6
    var fn = obj.inner.print;
    fn(); //888
    (obj.inner.print)(); //6
    (obj.inner.print = obj.inner.print)(); //888 这个点没有太明白，虽然答对了

3. var和function的预剖析题目,以及变量和function的先后递次的题目

    // 以下代码实行输出结果是什么
    function b () {
        console.log(a);
        var a = 10;
        function a() {};
        a = 100;
        console.log(a);
    }
    b();

    function c () {
        console.log(a);
        function a() {};
        var a = 10;
        a = 100;
        console.log(a);
    }
    c();

    (function d (num) {
        console.log(num);
        var num = 10;
    }(100))

    (function e (num) {
        console.log(num);
        var num = 10;
        function num () {};
    }(100))

    (function f (num) {
        function num () {};
        console.log(num);
        var num =10
        console.log(num);
    }(100))

    //依然是预剖析(在与剖析历程当中还要考虑一下当前变量的作用于)
    function m () {
        console.log(a1); // underfined
        console.log(a2); // underfined
        console.log(b1); // underfined
        console.log(b2); // underfined
        if(false) {
            function b1 (){};
            var a1 = 10;
        }
        if(true) {
            function b2 (){};
            var a2 = 10;
        }
        console.log(a1); // underfined
        console.log(a2); // 10
        console.log(b1); // underfined
        console.log(b2); // function
    }
    m();

    function n() {
        if(2>1) {
            arr = 10;
            brr = 10;
            let arr;
            var brr;
            console.log(arr);
            console.log(brr);
        }
    }
    n(); // ReferenceError

此阶段阅读器只是对var、function、函数形参举行一个剖析的预备历程。而且在这个“预剖析”历程当中，有一个预剖析先后递次，即函数的形参 -> function -> var。而且重名时预留函数、后来者掩盖前者。预剖析结果形参假如有值则剖析到值，没有则为underfined，函数则剖析到全部函数体，变量都为underfined；这道题目中没有参数涌现，所以先不议论。所以这道题在“预剖析”时，函数声明权重优先会被提拔

4. 一个算法题目

有一个已排序的数组，比方[1,4,6,9,11,15,18],给你一个新的数，插进去到数组中，写一个function

5. 函数撙节是什么，有什么长处（之前没有相识过这个观点，懵逼了）

函数撙节的目的

从字面上就可以明白，函数撙节就是用来撙节函数从而肯定程度上优化机能的。比方，DOM 操纵比起非DOM 交互须要更多的内存和CPU 时刻。一连尝试举行过量的DOM 相干操纵可以会致使阅读器挂起，有时刻甚至会崩溃。尤其在IE 中应用onresize 事宜处置惩罚递次的时刻轻易发作，当调解阅读器大小的时刻，该事宜会一连触发。在onresize 事宜处置惩罚递次内部假如尝试举行DOM 操纵，其高频次的变动可以会让阅读器崩溃。又比方，我们罕见的一个搜刮的功用，我们平常是绑定keyup事宜，每按下一次键盘就搜刮一次。然则我们的目的主如果每输入一些内容搜刮一次罢了。为相识决这些题目，就可以应用定时器对函数举行撙节。

函数撙节的道理

某些代码不可以在没有中缀的状况一连反复实行。第一次挪用函数，竖立一个定时器，在指定的时刻间隔以后运转代码。当第二次挪用该函数时，它会消灭前一次的定时器并设置另一个。假如前一个定时器已实行过了，这个操纵就没有任何意义。但是，假如前一个定时器还没有实行，实在就是将其替换为一个新的定时器。目的是只需在实行函数的请求住手了一段时刻以后才实行。
http://www.cnblogs.com/LuckyW…

6. 写一个要领，完成传入两个参数(parentNode, childNode),请求假如childNode是parentNode的子孙节点，则返回为true，不然返回为false

7. dom事宜流道理是什么，分为那几个阶段？

事宜捕捉 处于目的阶段 事宜冒泡

8. dom事宜托付什么道理，有什么优瑕玷

事宜托付道理:事宜冒泡机制

长处

1.可以大批节约内存占用，削减事宜注册。比方ul上代办一切li的click事宜就很不错。
2.可以完成当新增子对象时，无需再对其举行事宜绑定，关于动态内容部份尤其适宜

瑕玷

事宜代办的经常使用应用应当仅限于上述需求，假如把一切事宜都用事宜代办，可以会涌现事宜误判。即本不该被触发的事宜被绑定上了事宜。

9. http的cache机制，以及200状况下怎样完成 from cache（示意打仗最多的就是304的from cache）（用于优化，没有打仗过，须要明白）

寄义

定义：阅读器缓存（Browser Caching）是为了加快阅读，阅读器在用户磁盘上对近来请求过的文档举行存储，当接见者再次请求这个页面时，阅读器就可以从当地磁盘显现文档，如许就可以加快页面的阅览。

作用

cache的作用：
1、削减耽误，让你的网站更快，进步用户体验。
2、防止网络堵塞，削减请求量，削减输出带宽。

完成手腕

Cache-Control中的max-age是完成内容cache的重要手腕，共有3种经常使用战略：max-age和Last-Modified（If-Modified-Since）的组合、仅max-age、max-age和ETag的组合。

关于强制缓存，服务器关照阅读器一个缓存时刻，在缓存时刻内，下次请求，直接用缓存，不在时刻内，实行比较缓存战略。
关于比较缓存，将缓存信息中的Etag和Last-Modified经由过程请求发送给服务器，由服务器校验，返回304状况码时，阅读器直接应用缓存。

10. 一个原型链继承的题目

    // 有一个组织函数A，写一个函数B，继承A
    function A (num) {
        this.titileName = num;
    }
    A.prototype = {
        fn1: function () {},
        fn2: function () {}
    }

这个题目的关注点是B继承的A的静态属性，同时B的原型链中不存在A实例的titleName属性

11. 什么是假造dom

React为啥这么大？因为它完成了一个假造DOM（Virtual DOM）。假造DOM是干什么的？这就要从阅读器本身讲起

如我们所知，在阅读器衬着网页的历程当中，加载到HTML文档后，会将文档剖析并构建DOM树，然后将其与剖析CSS天生的CSSOM树一同连系发生爱的结晶——RenderObject树，然后将RenderObject树衬着成页面（固然中心可以会有一些优化，比方RenderLayer树）。这些历程都存在与衬着引擎当中，衬着引擎在阅读器中是于JavaScript引擎（JavaScriptCore也好V8也好）分脱离的，但为了轻易JS操纵DOM构造，衬着引擎会暴露一些接供词JavaScript挪用。因为这两块相互星散，通讯是须要付出代价的，因而JavaScript挪用DOM供应的接口机能不咋地。种种机能优化的最好实践也都在尽量的削减DOM操纵次数。

而假造DOM干了什么？它直接用JavaScript完成了DOM树（大致上）。组件的HTML构造并不会直接天生DOM，而是映照天生假造的JavaScript DOM构造，React又经由过程在这个假造DOM上完成了一个 diff 算法找出最小变动，再把这些变动写入现实的DOM中。这个假造DOM以JS构造的情势存在，盘算机能会比较好，而且因为削减了现实DOM操纵次数，机能会有较大提拔

12. js基础数据范例和援用范例离别是什么？这个条件条件下写一个getType，返回相应的范例

1.基础数据范例（本身不可拆分的）：Undefined、Null、Boolean、Number、String
2.援用数据范例（对象）：Object （Array，Date，RegExp，Function）
ES6基础数据范例多了个symbol 听说这道题刷了百分之二十的人 谢谢Abbyshen提出

function gettype(nm){
    return Object.prototype.toString.call(nm);
}

13. dom挑选器优先级是什么，以及权重值盘算（一道老题目了）

1.行内款式 1000
2.id 0100
3.类挑选器、伪类挑选器、属性挑选器[type=”text”] 0010
4.标签挑选器、伪元素挑选器(::first-line) 0001
5.通配符*、子挑选器、相邻挑选器 0000

14. vue双向数据绑定的道理是什么

起首传输对象的双向数据绑定 Object.defineProperty(target, key, decription),在decription中设置get和set属性（此时应注重description中get和set不能与形貌属性共存）
数组的完成与对象差别。
同时应用视察者形式完成wather，用户数据和view视图的更新

15. react和vue比较来讲有什么区分

1 component层面，web component和virtual dom
2 数据绑定（vue双向，react的单向）等很多
3 盘算属性 vue 有，供应轻易；而 react 不可
4 vue 可以 watch 一个数据项；而 react 不可
5 vue 因为供应的 direct 特别是预置的 directive 因为场景场景拓荒更轻易；react 没有
6 生命周期函数名太长 directive

16. git应用历程当中，假如你在拓荒着营业，倏忽另一个分支有一个bug要改，你怎样办

git stash       //将本次修正存到暂存区（紧要切换分支时）
git stash pop   //将一切暂存区的内容取出来

17. postcss的应用

18. 网页规划有哪几种，有什么区分

静态、自适应、流式、相应式四种网页规划
静态规划：意义就是不论阅读器尺寸细致是多少，网页规划就根据当时写代码的规划来安排；
自适应规划：就是说你看到的页面，内里元素的位置会变化而大小不会变化；
流式规划：你看到的页面，元素的大小会变化而位置不会变化——这就致使假如屏幕太大或许太小都邑致使元素没法一般显现。
自适应规划：每一个屏幕分辨率下面会有一个规划款式，同时位置会变而且大小也会变。

18. 实行下面代码

var a = {};
var b = {key: 'b'};
var c = {key: 'c'};
var d = [3,5,6];
a[b] = 123;
a[c] = 345;
a[d] = 333;
console.log(a[b]);  // 345
console.log(a[c]);  // 345
console.log(a[d]);  // 333

19.

    var R = (function() {
        var u = {a:1,b:2};
        var r = {
            fn: function(k) {
                return u[k];
            }
        }
        return r;
    }());
    R.fn('a');  // 1

上述代码中怎样猎取匿名函数中的u

20. 不实用轮回语句（包括map、forEach要领）完成一个100长度的数组，索引值和值雷同的数组[0,1,2,3,4,5……..99]

var arr = new Array(100);
//要领1
[...arr.keys()];
//要领二
Array.from(arr.keys());

//要领三
Array.from({length: 100});

// 要领四 借助string
var arr1 = new Array(101);
var str = arr1.join('1,');
str = str.replace(/(1\,)/g, function ($0, $1, index) {
    var start = '' + Math.ceil(index/2);
    if(index < str.length - 2) {
        start += ','
    }
    return start;
});
return str.split(',');


// 要领五（函数式，参考网络）
function reduce(arr, val) {
    if(Object.prototype.toString.apply(val)){
        return;
    }
    if(val >= 100) {
        return arr;
    }
    arr.push(val);
    return reduce(arr, val+1);
}
var res = reduce([], 0)

21. 下面语句实行结果输出

var a = function (val, index) {
    console.log(index);
    return {
        fn: function (name) {
            return a(name, val);
        }
    }
}

var b = a(0); // underfined
b.fn(1); // 0
b.fn(2); // 0
b.fn(3); // 0

22. 科普

1) dom节点的根节点是不是是body
回复： 不是，dom节点的根节点是html(包括head和body，head中分为meta、title等。body又分为一组)

2）dom元素都邑有offsetParent吗
回复： offsetParent属性返回一个对象的援用，这个对象是间隔挪用offsetParent的元素近来的（在包括条理中最接近的），而且是已举行过CSS定位的容器元素。 假如这个容器元素未举行CSS定位, 则offsetParent属性的取值为根元素(在规范兼容形式下为html元素；在奇异显现形式下为body元素)的援用。 当容器元素的style.display 被设置为 “none”时（译注：IE和Opera除外），offsetParent属性 返回 null。

3) [1,3,5]转译成字符串是什么
回复： ‘1,3,5’
挪用toString要领，天生该字符串

4）li标签的祖级元素可以为li，父级元素也可以为例
回复： 毛病

23. jsonp道理，jquery是怎样完成的，如许完成有什么优点和害处

道理

在同源战略下;在某个服务器下的页面是没法猎取到该服务器之外的数据的;Jquery中ajax 的中心是经由过程 XmlHttpRequest猎取非本页内容，而jsonp的中心则是动态增加 <script>标签来挪用服务器供应的 js剧本
当我们一般地请求一个JSON数据的时刻，服务端返回的是一串 JSON范例的数据，而我们应用 JSONP形式来请求数据的时刻服务端返回的是一段可实行的 JavaScript代码。因为jsonp 跨域的道理就是用的动态加载 script的src ，所以我们只能把参数经由过程 url的体式格局通报, 所以jsonp的 type范例只能是get ！

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //差别的域
    type: 'GET', // jsonp形式只需GET 是正当的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp', // 数据范例
    jsonp: 'backfunc', // 指定回调函数名，与服务器端吸收的一致，并回传返来
})
实在jquery 内部会转化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron
然后动态加载
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc=>
然后后端就会实行backfunc(通报参数 )，把数据经由过程实参的情势发送出去。

在jquery 源码中， jsonp的完成体式格局是动态增加<script>标签来挪用服务器供应的 js剧本。jquery 会在window对象中加载一个全局的函数，当 <script>代码插进去时函数实行，实行终了后就 <script>会被移除。同时jquery还对非跨域的请求举行了优化，假如这个请求是在同一个域名下那末他就会像一般的 Ajax请求一样事情。

24. http协定属于七层协定中的哪一层，下一层是什么

七层构造：物理层、数据链路层、网络层、传输层、会话层、示意层、应用层
tcp属于传输层；http属于应用层。
表现层

25. js渣滓接纳机制晓得哪些，v8引擎应用的哪一种

js的两种接纳机制

1 标记消灭（mark and sweep）
2 援用计数（reference counting）

javascript与V8引擎

渣滓接纳机制的优点和害处

优点：大幅简化递次的内存治理代码，减轻递次猿累赘，而且削减因为长时刻运转而带来的内存泄漏题目。

害处：自动接纳意味着递次猿没法掌控内存。ECMAScript中没有暴露渣滓接纳的托言，我们没法强制其举行渣滓接纳，越发没法干涉干与内存治理。

V8 自动渣滓接纳算法
https://segmentfault.com/a/11…

26. 作用域什么时刻天生的？

页面加载–>竖立window全局对象，并天生全局作用域–>然后天生实行上下文，预剖析变量(变量提拔)，天生全局变量对象；
$scope

27. websocket长衔接道理是什么

寄义

Websocket是一个耐久化的协定，相关于HTTP这类非耐久的协定来讲。

道理

相似长轮循长衔接 ; 发送一次请求 ; 络绎不绝的获得信息

28. http缓存晓得哪些

http://blog.csdn.net/yzf91321…

29. 讲一下事宜轮回机制

实行上下文(Execution context)
函数挪用栈(call stack)
行列数据构造(queue)
Promise

https://zhuanlan.zhihu.com/p/…

30. 明白web平安吗？都有哪几种，引见以及怎样防备

1.XSS，也就是跨站剧本注入

进击要领：
1. 手动进击:
编写注入剧本，比方”/><script>alert(document.cookie());</script><!--等，
手动测试目的网站上有的input, textarea等一切可以输入文本信息的地区
2. 自动进击
应用东西扫描目的网站一切的网页并自动测试写好的注入剧本，比方：Burpsuite等
防备要领：
1. 将cookie等敏感信息设置为httponly，制止Javascript经由过程document.cookie获得
2. 对一切的输入做严厉的校验尤其是在服务器端，过滤掉任何不正当的输入，比方手机号必需是数字，一般可以采纳正则表达式
3. 净化和过滤掉不必要的html标签，比方：<iframe>, alt,<script> 等
4. 净化和过滤掉不必要的Javascript的事宜标签，比方：onclick, onfocus等
5. 转义单引号，双引号，尖括号等特别字符，可以采纳htmlencode编码 或许过滤掉这些特别字符
6. 设置阅读器的平安设置来提防典范的XSS注入

2.SQL注入

进击要领：
编写歹意字符串，比方‘ or  1=1--等，
手动测试目的网站上一切触及数据库操纵的处所
防备要领：
1. 制止目的网站应用动态拼接字符串的体式格局接见数据库
2. 削减不必要的数据库抛出的毛病信息
3. 对数据库的操纵给予严厉的权限掌握
4. 净化和过滤掉不必要的SQL保存字，比方：where, or, exec 等
5. 转义单引号，上引号，尖括号等特别字符，可以采纳htmlencode编码 或许过滤掉这些特别字符

3.CSRF，也就是跨站请求捏造

就是进击者冒用用户的名义，向目的站点发送请求
提防要领：
1. 在客户端举行cookie的hashing，并在服务端举行hash认证
2. 提交请求是须要填写验证码
3. 应用One-Time Tokens为差别的表单竖立差别的伪随机值  

40. sessionStorage和localstorage能跨域拿到吗？比方我在www.baidu.com设置的值能在m.baidu.com能拿到吗？为何

localStorage会跟cookie一样遭到跨域的限定，会被document.domain影响

41. localstorage不能手动删除的时刻，什么时刻逾期

除非被消灭，不然永远保存 clear()可清晰
sessionStorage 仅在当前会话下有用，封闭页面或阅读器后被消灭

42. cookie可以设置什么域？可以设置.com吗

可以经由过程设置domin来完成

43. 登录状况的保存你以为可以保存在sessionstorage或许localstorage或许cookie或许你晓得的哪一种体式格局，存在了那里？？为何保存在那里

44. flux -> redux -> mobx 变化的实质是什么

存储构造 将对象加工可视察 函数式 vs 面向对象
https://zhuanlan.zhihu.com/p/…

45. 按需加载路由怎样加载对应的chunk文件的？换句话说阅读器怎样晓得什么时刻加载这个chunk，以及webpack是怎样辨认谁人多个经由hash过的chunk文件

50. get和post有什么区分？get可以经由过程body通报数据吗

把数据放到 body 内里，必需用 POST 体式格局取，这是 HTTP 协定限定的。

51. 下拉革新你怎样完成

52. 预加载options请求为何会涌现，能防止这个请求吗？

2018年口试题总结

网络一下网上的2018年的口试题 ; 愿望能对你有所协助~~

1.应用css完成一个延续的动画结果

animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}

animation-name    划定须要绑定到挑选器的 keyframe 称号。
animation-duration    划定完成动画所消费的时刻，以秒或毫秒计。
animation-timing-function    划定动画的速率曲线。
animation-delay    划定在动画最先之前的耽误。
animation-iteration-count    划定动画应当播放的次数。
animation-direction    划定是不是应当轮番反向播放动画。

2.应用js完成一个延续的动画结果

最最先的思绪是用定时器完成，末了没有想的太完整，口试官给出的答案是用requestAnimationFrame

· 定时器思绪
var e = document.getElementById('e')
var falg = true;
var left = 0;
setInterval(() => {
    left == 0 ? falg = true : left == 100 ? falg = false : ''
    falg ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`
}, 1000 / 60)
· requestAnimationFrame
兼容性处置惩罚
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function(callback){
            window.setTimeout(callback, 1000 / 60);
          };
})();
var e = document.getElementById("e")
var flag = true;
var left = 0;
function render() {
    left == 0 ? flag = true : left == 100 ? flag = false : '';
    flag ? e.style.left = ` ${left++}px` :
        e.style.left = ` ${left--}px`;
}
(function animloop() {
    render();
    requestAnimFrame(animloop);
})();

不足之处请斧正（毕竟是现学的）趁便查了一下上风：

阅读器可以优化并行的动画行动，更合理的从新排列行动序列，并把可以兼并的行动放在一个衬着周期内完成，从而显现出更流通的动画结果
处理毫秒的不精确性
防止过分衬着（衬着频次太高、tab 不可见停息等等）
注：requestAnimFrame 和 定时器一样也头一个相似的消灭要领 cancelAnimationFrame

3.右侧宽度牢固，左侧自适应

第一种：

<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    flex: 1;
}
.right{
    background-color: red;
    height: 200px;
    width: 100px;
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
第二种

<style>
    div {
        height: 200px;
    }
    .left {
        float: right;
        width: 200px;
        background-color: rebeccapurple;
    }
    .right {
        margin-right: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

4.程度垂直居中

第一种

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
第二种

#container{
    position:relative;
}

#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-50px 0 0 -50px;
}
第三种

#container{
    position:relative;
}

#center{
    position:absolute;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
第四种 flex

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

5.四种定位的区分

`static` 是默认值
`relative` 相对定位 相关于本身原有位置举行偏移，仍处于规范文档流中
`absolute` 相对定位 相关于近来的已定位的先人元素, 有已定位(指`position`不是`static`的元素)先人元素, 以近来的先人元素为参考规范。假如无已定位先人元素, 以`body`元素为偏移参照基准, 完整脱离了规范文档流。
`fixed` 牢固定位的元素会相关于视窗来定位,这意味着纵然页面转动，它照样会停留在雷同的位置。一个牢固定位元素不会保存它原本在页面应有的闲暇。

6.封装一个函数，参数是定时器的时刻，.then实行回调函数。

function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

7.一行代码完成数组去重？

[...new Set([1,2,3,1,'a',1,'a'])]

8.应用addEventListener点击li弹出内容，而且动态增加li以后有用

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
var ulNode = document.getElementById("ul");
    ulNode.addEventListener('click', function (e) {
        if (e.target && e.target.nodeName.toUpperCase() == "LI") {
            alert(e.target.innerHTML);
        }
    }, false);

9.怎样推断两个对象相称

JSON.stringify(obj)==JSON.stringify(obj);//true

10.Vue router 除了 router-link 怎样完成跳转?

router.go(1)
router.push('/')

11.Vue router 跳转和 location.href 有什么区分？

router 是 hash 转变
location.href 是页面跳转，革新页面

12.重排和重绘

部份衬着树（或许全部衬着树）须要从新剖析而且节点尺寸须要从新盘算。这被称为重排。注重这里最少会有一次重排-初始化页面规划。
因为节点的多少属性发作转变或许因为款式发作转变，比方转变元素背景色时，屏幕上的部份内容须要更新。如许的更新被称为重绘。

13.什么状况会触发重排和重绘

增加、删除、更新 DOM 节点
经由过程 display: none 隐蔽一个 DOM 节点-触发重排和重绘
经由过程 visibility: hidden 隐蔽一个 DOM 节点-只触发重绘，因为没有多少变化
挪动或许给页面中的 DOM 节点增加动画
增加一个款式表，调解款式属性
用户行动，比方调解窗口大小，转变字号，或许转动。

14.js bind 完成机制？手写一个 bind 要领？

function bind(fn, context){
  return function (){
     return fn.apply(context, arguments);
  }
}
// 柯理化函数头脑   谢谢pursuitTom的提出
Function.prototype.bind = function (context) {
    var args = Array.prototype.slice.call(arguments, 1);
    var _this = this;
    return function () {
        var thisArgs = [].slice.call(arguments);
        return _this.apply(context, args.concat(thisArgs))
    };
}
// ES6写法 谢谢waterc的提出
Function.prototype.bind = function(context, ...res) {
    let self = this
    return function(...arg) {
        return self.apply(context, [...res,...arg])
    }
}

15.多个函数

var a = (function(){return '1';}, function(){return 1;})();
console.log(typeof a); //number

16.__proto__、prototype、Object.getPrototypeOf()

__proto__是指内部原型，和Object.getPrototypeOf()结果等价
function f(){}
f.__proto__ === Object.getPrototypeOf(f); //true
f.prototype === Object.getPrototypeOf(f); //false

17.阅读纪录前后跳转（还没有实验）

<a href="javascript:history.go(-1)">backward</a>
<a href="javascript:history.go(1)">forward</a>

下面再有的题就不写序号了；正好到17；是本身喜好的数字；哈哈

setTimeout 和 setInterval 细谈

常问的点，前者是在肯定时刻事后将函数增加至实行行列，实行时刻=耽误时刻+之前函数代码实行时刻+实行函数时刻。
后者是不论前一次是不是实行终了，每隔肯定时刻反复实行，用于精准实行相互没有影响的反复操纵。
假如须要掌握前后实行递次，最好应用setTimeout模仿setInterval

var time = 400, times = 0, max = 10;
function func(){
  times++;
  if(times < max){
    //code here
    setTimeout(func, time);
  } else {
    console.log("finished");
  }
}
setTimeout(func, time);

推断多图片加载终了

注：用jQueryObject.ready()只能推断dom构造加载终了
彷佛形貌的不是很清晰，这里写一下代码。
要领1：

var counter = 0;
var queryInterval = 30; //ms
var pics = document.getElementsByClassName("pics");

function singleQuery(i){
  if(pics[i].complete){
    counter++;
    console.log(i + " is loaded");
  } else {
    setTimeout(singleQuery, queryInterval, i);
  }
}

function allQuery(callback){
  if(counter < pics.length){
    console.log("current number of loaded pics: " + counter);
    setTimeout(allQuery, queryInterval, callback);
  } else {
    console.log("All pics are loaded.");
    callback();
  }
}

for(var i = 0; i < pics.length; i++){
  setTimeout(singleQuery, queryInterval, i);
}

setTimeout(allQuery, queryInterval, callback);

重要也是采纳setTimeout模仿轮询，推断体式格局是img标签dom的complete属性（布尔值），瑕玷是定时器太多。

要领2：

var counter = 0, queryInterval = 50;
var pics = document.getElementsByClassName("pics");
for(var i = 0; i < pics.length; i++){
  pics[i].onload = function(){
    counter++;
    console.log(this.id + " is loaded");
  }
}

function queryPictures(callback){
  if(counter < pics.length){
    console.log("current number of loaded pics: " + counter);
    setTimeout(queryPictures, queryInterval, callback);
  } else {
    console.log("All pics are loaded");
    callback();
  }
}

setTimeout(queryPictures, queryInterval, callback);

应用onload绑定图片加载胜利后的回调，经由过程计数器推断是不是加载终了。

CSS margin堆叠题目

块元素在垂直方向上的margin是很新鲜的，会有堆叠征象。
假如display都是block，有三种状况：
外间距均为正数，竖直方向上会挑选最大的外边距作为间隔
一正一负，间距 = 正 – |负|
两个负，间距 = 0 – 相对值最大的谁人
设置display: inline-block的盒子不会有margin堆叠，position: absolute的也不会涌现。

CSS挑选器优先级 && CSS挑选器效力

ID > 类 > 标签 > 相邻 > 子挑选器 > 子女挑选器 > * > 属性 > 伪类

object.propertyIsEnumerable(xxx)

推断对象中是不是有xxx属性，而且能经由过程for in罗列，如Array对象的length是不可罗列的

推断数组

function isArray(arr){
    return Object.prototype.toString.call(arr) === '[Object Array]';
}

git fetch && git pull

git pull自动完成了fetch最新长途版本，而且和当地举行merge
git fetch获得长途分支，要继承手动merge兼并

WebSocket

HTML5带来的新协定，经由过程相似HTTP的请求竖立衔接。重要目的是可以猎取服务端的推送。
本来的体式格局多是应用long poll（即不中缀衔接一向守候数据），或许是ajax轮询的体式格局（每隔一段时刻发送请求，竖立衔接，讯问是不是有新的数据）。这两种体式格局的瑕玷在于long poll的壅塞，以及ajax轮询的冗余衔接。
WebSocket的设想头脑有点相似于回调，在发送请求晋级服务端的协定并收到确认信息后，服务端一有新的信息/数据就会主动推送给客户端，至于要一次HTTP握手便可以竖立耐久衔接

跨域相干

只需协定、域名、端口有差别，则视为差别的域。（域名和域名对应的IP也是跨域）

1.CORS: Cross-Origin Resource Sharing

基于服务器支撑的跨域，服务器设置Access-Control-Allow-Origin相应头，阅读器可许可跨域

2.设置domain

能从子域设到主域，如a.b.c.com—>b.c.com—>c.com
细致状况：在页面顶用iframe翻开了另一个页面（条件：两个页面主域是雷同的）
应用frameElement.contentWindow.document.domain设置frame子页面的主域，document.domain设置主页面的主域，以后就可以相互猎取dom中的数据。
瑕玷是只能用于差别子域间的交互。

3.比方具有src属性的img标签，每次转变src属性，都邑提议http请求。

var img = new Image();
img.onload = function(){
  //code here
};
img.onerror = function(){
  //code here
};
img.src="http://server.com/data?query=3";

瑕玷是只能应用GET请求，不能猎取数据，平经常使用于提交统计信息什么的。
script、link、iframe只需在增加到DOM中才会提议请求

4.HTML5 postMessage

支撑IE8+和主流阅读器，写法也简朴..

//source: http://test.org:4000
//get the window object of target origin
var win = window.open("http://target.com");
//or this, when a frame is used
var win = document.getElementById("targetId").contentWindow;
win.postMessage("data here", "http://target.com/rest");

//target: http://target.com/tiny
function handleMessage(event){
  if(event.orgin!="http://test.org:4000")
    return;
  var data = event.data;
  //code here

  //event.source is window.opener
  event.source.postMessage("response data here", event.origin);
}
window.addEventListener("message", handleMessage, false);

5.window.name

纵然在页面翻开多层iframe后，每一个iframe中window.name 属性值都是雷同的，以此用作数据传输的东西。
但因为跨域的限定，是没法猎取另一个frame中的window.name数据，所以要应用一个同域的代办(proxy.html)：

6. jsonp

现在主流跨域要领
挪用其他域的剧本猎取数据，条件是另一个域能晓得回调函数名，这个可以经由过程请求发送给目的域。
直接写jQuery封的jsonp

$.getJSON("http://target.com/data?callback=callbackFunctionName", function(data){});

$.getJSON会把猎取的responseText转为json，假如url中有callback参数，数据会以script标签情势猎取。

闭包相干

什么是闭包

闭包是指有权接见另一个函数作用域中变量的函数

怎样竖立闭包

在函数内部嵌套应用函数

function fn() {
           for (var i = 0; i < 2; i++) {
               (function () {
                   var variate = i;
                   setTimeout(function () {
                       console.log("setTimeout实行后:"+variate);
                   }, 1000);
               })();//闭包,马上实行函数,匿名函数
                            
           }
          console.log(i);//2
          console.log(variate);//variate is not defined
       }
       fn();
       

为何用闭包

• 因为在闭包内部坚持了对外部运动对象的接见,但外部的变量却没法直接接见内部,防止了全局污染;
• 可以当作私有成员,弥补了因js语法带来的面向对象编程的不足;
• 可以久长的在内存中保存一个本身想要保存的变量.

闭包的瑕玷

• 可以致使内存占用过量,因为闭包携带了本身的函数作用域
• 闭包只能获得外部包括函数中得末了一个值

详见https://segmentfault.com/a/11…

a:active 挪动端完成

有时刻一些按钮的简朴点击交互可以经由过程css伪类来完成；必需点击了变动色彩；松开恢复；IOS手时机涌现伪类无效的状况；iOS体系的挪动装备中，须要在按钮元素或body/html上绑定一个touchstart事宜才激活:active状况。

document.body.addEventListener('touchstart', function () { //...空函数即可}); 

ios滑动卡顿

-webkit-overflow-scrolling:touch 可以会在IOS体系低的状况涌现转动条；尝试溢出处理

forEach和map的区分

雷同点

• 都是轮回遍历数组中的每一项
• forEach和map要领里每次实行匿名函数都支撑3个参数，参数离别是item（当前每一项）、index（索引值）、arr（原数组）
• 匿名函数中的this都是指向window
• 只能遍历数组
• 都有兼容题目

差别点

• map速率比foreach快
• map会返回一个新数组，不对原数组发生影响,foreach不会发生新数组，
• map因为返回数组所以可以链式操纵，foreach不能

浅拷贝和深拷贝

jQuery.extend第一个参数可所以布尔值，用来设置是不是深度拷贝的

jQuery.extend(true, { a : { a : "a" } }, { a : { b : "b" } } );
jQuery.extend( { a : { a : "a" } }, { a : { b : "b" } } ); 

最简朴的深拷贝

aa = JSON.parse( JSON.stringify(a) )

浅复制—>就是将一个对象的内存地点的“”编号“”复制给另一个对象。深复制—>完成道理，先新建一个空对象，内存中新拓荒一块地点，把被复制对象的一切可罗列的(注重可罗列的对象)属性要领逐一复制过来，注重要用递返来复制子对象内里的一切属性和要领，直到子子…..属性为基础数据范例。总结，深复制明白两点，1,新拓荒内存地点，2,递返来刨根复制。

外边距兼并

外边距兼并指的是，当两个垂直外边距相遇时，它们将构成一个外边距。

兼并后的外边距的高度即是两个发作兼并的外边距的高度中的较大者。

Js加载位置区分优瑕玷

html文件是自上而下的实行体式格局，但引入的css和javascript的递次有所差别，css引入实行加载时，递次依然往下实行，而实行到<script>剧本是则中缀线程，待该script剧本实行完毕以后递次才继承往下实行。
所以，大部份网上议论是将script剧本放在<body>以后，那样dom的天生就不会因为长时刻实行script剧本而耽误壅塞，加快了页面的加载速率。

但又不能将一切的script放在body以后，因为有一些页面的结果的完成，是须要预先动态的加载一些js剧本。所以这些剧本应当放在<body>之前。

其次，不能将须要接见dom元素的js放在body之前，因为此时还没有最先天生dom，所以在body之前的接见dom元素的js会失足，或许无效

script安排位置的准绳“页面结果完成类的js应当放在body之前，行动，交互，事宜驱动，须要接见dom属性的js都可以放在body以后”

针对上方题目存在没有解答的 ; 或则解答不正确细致的 ; 迎接留言 ; 我会实时改正 ; 也迎接留下你以为典范的口试题 ; 我都邑补充进来 ; 共同进步