前端面试常考知识点---js

1.同步和异步

详细～
文章总结：

setTimeout(fn,ms)这个函数，是通过指定时间后，把要执行的任务加入到Event Queue中，又由于是单线程任务要一个一个执行，若是前面的任务须要的时间过久，那么只能等着，致使真正的延迟时间远远大于ms。
setInterval会每隔指定的时间将注册的函数置入Event Queue，若是前面的任务耗时过久，那么一样须要等待

setInterval为了不代码运行好几回中间没有间隔，当且仅当没有该定时器的如何代码实例时，才会将定时器代码添加到队列中，但这样可能会引发：

1. 某些间隔会被跳过
2. 多个定时器的代码执行时间可能会比预期小。

setTimeout(function(){

    //do something

    setTimeout(arguments.callee,interval);
},interval)

上面实现了递归调用，这样作的好处是：在前一个定时器代码执行完成以前，不会向队列插入新的定时代码，确保不会有任何的缺失间隔。并且，它保证在下一次定时器代码执行以前，至少要等待指定的时间间隔。
讲道理，我没搞清楚，怎么就递归了
异步中的宏任务和微任务

1. macro-task(宏任务)：包括总体代码script，setTimeout，setInterval
2. micro-task(微任务)：Promise，process.nextTick

分别把事件放入宏任务和微任务，这是一次循环，而后执行微任务，在开始下一次循环

2.闭包

关于闭包
理解起来仍是以为怪怪的

1. 解决做用域的问题，让函数内的变量能够被外部访问
2. 在函数a执行完并返回后，闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源，由于a的内部函数b的执行须要依赖a中的变量，形成内存浪费
3. 函数式编程

3.如何判断一个变量的类型？是Array类型？是Number类型？

四种方法

1. typeof

   • 对于基本类型，除 null 之外，都可以返回正确的结果。
   • 对于引用类型，除 function 之外，一概返回 object 类型。
   • 对于 null ，返回 object 类型。
   • 对于 function 返回 function 类型。

2. instanceof

   在原型链上查找
   //假设instanceof运算符左边是L，右边是R
   L instanceof R 
   //instanceof运算时，经过判断L的原型链上是否存在R.prototype
   L.__proto__.__proto__ ..... === R.prototype ？
   //若是存在返回true 不然返回false
   注意：instanceof运算时会递归查找L的原型链，即
   L.__proto__.__proto__.__proto__.__proto__...
   直到找到了或者找到顶层为止

   instanceof检测左侧的__proto__原型链上，是否存在右侧的prototype原型

3. constructor

   1. null 和 undefined 是无效的对象，所以是不会有 constructor 存在的，这两种类型的数据须要经过其余方式来判断。
   2. 函数的 constructor 是不稳定的，这个主要体如今自定义对象上，当开发者重写 prototype 后，原有的 constructor 引用会丢失，constructor 会默认为 Object

4. toString

   toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。
   
   对于 Object 对象，直接调用 toString()  就能返回 [object Object] 。而对于其余对象，则须要经过 call / apply 来调用才能返回正确的类型信息。

   Object.prototype.toString.call(Symbol()); //[object Symbol]
   Object.prototype.toString.call(undefined) ; // [object Undefined]
   Object.prototype.toString.call(new Error()) ; // [object Error]

5.跨域

前四种方法 CORS

1. jsonp
   
   须要后端配合，在后端会设置回调函数名、返回的数据等
   

2. documnet.domain

   • 只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com 中某个文档的document.domain 能够设成a.b.example.com、b.example.com 、example.com中的任意一个，可是不能够设成 c.a.b.example.com,由于这是当前域的子域，也不能够设成baidu.com,由于主域已经不相同了。就是只能子域获取父域
   • 若是想要获取同级中其余页面的数据，须要嵌入iframe，且把两个页面的document.domain设成父域

   在页面 http://www.example.com/a.html 中设置document.domain:
   
   在页面 http://example.com/b.html 中也设置document.domain，并且这也是必须的，虽然这个文档的domain就是example.com,可是仍是必须显示的设置document.domain的值：
   

3. window.name

   在一个窗口(window)的生命周期内,窗口载入的全部的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的全部页面中的，并不会因新页面的载入而进行重置。
   注意，window.name的值只能是字符串的形式，这个字符串的大小最大能容许2M左右甚至更大的一个容量，具体取决于不一样的浏览器，但通常是够用了。

   假如www.baidu.com/a.html获取不一样域的www.baidu.com/data.html页面中的值
   data.html
   
   a.html
   

4. window.postMessage

   • 调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，若是不想限定域，可使用通配符 * 。
   • 须要接收消息的window对象，但是经过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。

5. CORS

   分为简单请求和非简单请求
   须要后端设置：
   Access-Control..................

6.实现一个双向数据绑定

点我

1. view到model
   好比input输入框，监听input输入框的内容是否发生了变化，oninput事件

   // view到model
       var input = document.getElementById("a"),
       title = document.getElementById("title"); //title是文字展现区域的id
       input.oninput = function (e) {
           title.innerHTML = this.value;
       };

2. model到view
   使用defineProperty的get和set

// model到view
    Object.defineProperty(input, 'val', { //这里必须定义一个新的属性名称，不能够用value，不然会报错。
        get: function () {
            return this.value;
        },
        set: function (val) {
            this.value = val;
            title.innerHTML = val;
        }
    });

7. 事件委托

事件委托 target和currentTarget
假设事件绑定在ul上，ul有子元素li

e.currentTarget始终指向添加监听事件的那个对象，假如是ul，而e.target指向触发事件监听的那个对象，是li

注意：

1. 把事件绑定在ul上，用e.target.nodeName.toLowerCase==='li'断定节点是否是li
2. 嵌套时，可用循环，用while找到parentNode
3. var ev = ev||window.event是事件的兼容写法
   var target = ev.target||ev.srcElement是事件源的兼容写法

8. async/await

promise实例
promise存在的问题

1. promise一旦执行，没法中途取消
2. promise的错误没法在外部被捕捉到，只能在内部进行预判处理
3. promise的内如何执行，监测起来很难

带 async 关键字的函数，它使得你的函数的返回值一定是 promise 对象;await等的是右侧「表达式」的结果(遇到await会让出线程，但await后面那个紧跟着的那个函数不会被阻塞)