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、寄生组合继承
参考文档——点击打开链接