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有哪些特性
三、作用域鏈和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
【注意】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、寄生組合繼承