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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,837评论 18 139
  • 我想拥有一双梦的翅膀 可以带我自由翱翔 还要带上爱人和孩子 飞过洁白的雪山 飞过寂静的森林 飞过浩瀚的大海 最后寻...
    宛小风阅读 337评论 0 2
  • 深夜三点的时候她还醒着 白天为了接近太阳而拉开的窗帘忘了合上 于是月光皎洁使人忧郁 她看着窗外 耳边播放的朗读声就...
    鱼筐七月阅读 162评论 0 1