javascript程式碼積累

一、javascript實現繼承

1.基於原型鏈實現繼承

function base(cl,sup,args){
    cl.constructor.prototype.__proto__ = sup.prototype;
    sup.apply(cl,args);
}
//這種方法比較適用

2.基於屬性和方法複製實現繼承

function base1(cl,sup,args){
    var o = {};
    var clp = cl.constructor.prototype;
    var spp = sup.prototype;
    for(var l in clp){
        if(clp[l]){
            o[l] = 1;
        }
    }
    for(var k in spp){
        if(!o[k]){
            clp[k] = spp[k];
        }
    }
    sup.apply(cl,args);
}

二、javascript型別判斷

function type(o){
    return      Number.isNaN(o)?"NaN":Object.prototype.toString.call(o).slice(8,-1);
}

能判斷這些型別

Object
Date
String
Boolean
Number
NaN
Null
Undefined
Error
RegExp
Function

三、javascript物件的深複製

function clone(obj){
    if(typeof(obj) != 'object'){
        return obj;
    }
    var cloneOne = {};
    cloneOne.__proto__ = obj.constructor.prototype;
    for(var prop in obj){
        if(obj.hasOwnProperty(prop)){
            cloneOne[prop] = clone(obj[prop]);
        }
    }
    return cloneOne;
}
//能完全深複製一個物件,且保證物件的繼承關係

注:請不要用此函式去複製html標籤,因為HTMLElement物件的屬性都是不允許沒有實現Element介面的物件呼叫的。所以這種方法是複製不了的,除非不保持它的繼承關係,純粹複製屬性的值才可以.

四、javascript陣列去重

//物件鍵值對法
function unique3(array){
    var n = {},r = [],len = array.length,val,type;
    for(var i = 0;i < len;i++){
        val = array[i];
        type = typeof val;
        if(!n[val]){
            n[val] = [type];
            r.push(val);
        }else if(n[val].indexOf(type) < 0){
            n[val].push(type);
            r.push(val);
        }
    }
    return r;
}
//這種方法是已知最快的陣列去重方法,當佔用空間較大

//優化遍歷陣列法
function unique5(array){
    var r = [];
    for(var i = 0,l = array.length;i < l;i++){
        for(var j = i + 1;j < l;j++){
            if(array[i] === array[j]) {
                j = ++i;
            }
        }
        r.push(array[i]);
    }
    return r;
}
//比直接比較下標和比較值速度快點

五、javascript設定get,set屬性

function Persion(){
    var name = "dun";

    Object.defineProperty(this,"name",{
        get:function(){
            return "get " + name;
        },
        set:function(value){
            name = value + "set";
        }
    });
}

var persion = new Persion();
persion.name = "hui";
console.log(persion.name);

六、javascript html元素相關

    Object--->EventTarget--->Node--->Element---->HTMLElement--->
    1.HTMLParagraphElement
    2.HTMLDivElement
    ......

每個html元素都是HTMLElement的子類的例項
這是谷歌瀏覽器和火狐瀏覽器的實現