JS面试零碎知识点一

一、闭包的作用和用法

1、什么是闭包

闭包是有权访问另一个函数作用域中变量的函数；

一个内部函数在包含它的外部函数之外被调用时，就会形成闭包；

2、闭包的好处（作用）

可以读取函数内部的变量；

让这些变量的值始终保持在内存中；

3、滥用闭包的坏处

影响网页的性能，在IE 中可能导致内存泄露。解决办法是，在退出函数之前，将不使用的局部变量全部删除。

4.、闭包的几种写法和用法

4.1、给函数添加一些属性

function Circle(r){
  this.r = r;
}
Circle.PI=3.14;
Circle.prototype.area = function(){
  return Circle.PI*this.r*this.r;
}
var c = new Circle(1);
console.log(c.area());

4.2、声明一个变量，将一个函数当做值赋给变量

var Circle = funciton(){
  var obj = new Object();
  obj.PI = 3.14;

  obj.area = function(r){
    return this.PI*r*r;
  }
  return obj;
}
var c = new Circle();
console.log(c.area(1));

4.3 使用较多，最方便。var obj = {} 就是声明一个空的对象

var Circle = {
  "PI":3.14,
  "area":function(r){
     return this.PI*r*r;
   }
}
console.log(Circle.area(1));

二、Ecs6有哪些特性

Ecs6扫盲——点击打开链接

三、作用域链和this

1、作用域

全局变量和局部变量

【注意】只要函数内定义了一个局部变量，函数在解析的时候都会将这个变量“提前声明”：

 var scope = "global";
      function fn(){
         console.log(scope);//result:undefined
         var scope = "local";
         console.log(scope);//result:local;
      }
  fn();

2、作用域链

根据在内部函数可以访问外部函数变量的机制，使用链式查找决定哪些数据能被内部函数访问。

3、执行环境

每个函数运行时都会产生一个执行环境，Js为每个执行环境关联了一个变量对象。环境中定义的所有变量和函数都保存在这个对象中。

全局执行环境是最外围的执行环境，全局执行环境被认为是window对象，因此所有的全局变量和函数都作为window对象的属性和方法创建的。

js的执行顺序是根据函数的调用来决定的，当一个函数被调用时，该函数环境的变量对象就被压入一个环境栈中。而在函数执行之后，栈将该函数的变量对象弹出，把控制权交给之前的执行环境变量对象。

四、事件机制，如何绑定事件处理函数。

1、事件机制

1.1、事件捕获：document 往时间触发地点，捕获前进，遇到相同注册事件立即触发执行；

1.2、到达事件位置，触发事件（如果该处既注册了冒泡事件，也注册了捕获事件，按照注册顺序执行）；

1.3、事件触发地点往document方向，冒泡前进，遇到相同注册事件立即触发；

obj.addEventListener("click", func, true); // 捕获方式
obj.addEventListener("click", func, false); // 冒泡方式

2、拓展

2.1、event.stopPropagation()：除了阻止事件的冒泡，还阻止事件的继续捕获，简单说就是住址事件的进一步传播，但是它阻止不了该元素上绑定的其他函数的执行。

2.2、event.stopImmediatePropagation():w3c的东西，与stopPropagation()相比，可以阻止该元素上绑定的其他函数的执行。

3、绑定事件处理函数

3.1、在DOM元素中直接绑定

<input onclick = "alert(hello world)" type = "button" value = "点击"/>

3.2、在JS代码中绑定（dom0级）

document.getElementById("demo").onclick = function(){
  alert("hello");
}

3.3、绑定时间监听函数

用addEventListener()或attachEvent()来绑定事件监听函数。

elementObject.addEventListener(eventName,handle,userCapture);

elementObject.attachEvent(eventName,handle);

下面绑定时间的代码，进行了兼容性处理：

function addEvent(obj,type,handle){
    try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{ // IE8.0及其以下版本
            obj.attachEvent('on' + type,handle);
        }catch(e){ // 早期浏览器
            obj['on' + type] = handle;
        }
      }
    }
addEvent(document.getElementById('demo'),'click',myFunction);

五、JS异步模式如何实现

1、setTimeOut

2、settImmediate

3、requestAnimationFrame

4、监听new Image加载状态

5、监听script加载状态

6、Message

7、Promise

参考链接：点击打开链接

六、获取某个DOM节点，节点遍历方式

1、获取DOM节点

1.1、在获取一个节点的情况下，用指针：parentNode/previousSibling/nextSibling/firstChild/lastChild

1.2、getElementByTagName()/getElementById()

【注意】html是DOM的根节点，可以用document.documentElement来获取。

2、节点遍历：

window.onload = function(){  
            //document 获取根元素  
            var root = document.documentElement;  
            //遍历所哟的节点  
            traverseNodes(root);  
            document.write(msg);  
        }  
          
        function traverseNodes(node){  
              
            //判断是否是元素节点  
            if(node.nodeType == 1){  
                display(node);  
                //判断是否有属性节点  
               /* for(var i=0;i<node.attributes.length;i++){  
                    //得到属性节点  
                    var attr = node.attributes.item(i);  
                    //判断该节点是否存在  
                    if(attr.specified){  
                        //如果存在 显示输出  
                        display(attr);  
                    }  
                }  */
                  
                //判断该元素节点是否有子节点  
                if(node.hasChildNodes){  
                    //得到所有的子节点  
                    var sonnodes = node.childNodes;  
                    //遍历所有的子节点  
                    for (var i = 0; i < sonnodes.length; i++) {  
                        //得到具体的某个子节点  
                        var sonnode = sonnodes.item(i);  
                        //递归遍历  
                        traverseNodes(sonnode);  
                    }  
                }  
            }else{  
                display(node);  
            }  
        }  
          
        var msg = "";  
        var num=0;  

        function display(node){  
            msg+=(++num)+" nodeName="+node.nodeName+" nodeValue="+node.nodeValue+" nodeType="+node.nodeType+"<br/>";  
        }  

七、JS类的继承方式

1、原型链继承

2、构造继承

3、实例继承

4、拷贝继承

5、组合继承

6、寄生组合继承

参考文档——点击打开链接