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的子类的实例
这是谷歌浏览器和火狐浏览器的实现