美文网首页
extend学习记录:

extend学习记录:

作者: Ray1214 | 来源:发表于2016-08-25 22:55 被阅读0次

    extend的作用:

    1.扩展jquery的静态方法:

    $.extend({
        test: function(){
            console.log('这是创建的静态方法test');
        }
    });
    
    $.test();      //'这是创建的静态方法test'
    

    2.合并对象:

    extend用作合并时,会改变第一个参数的值---也即将合并的值赋给第一个参数;

    //改变第一个参数obj1的值
    const obj1 = {
        width: '100px'
    };
    
    const obj2 = {
        width: '200px'
        color: '#fff'
    };
    
    $.extend( obj1, obj2 );
    
    console.log( obj1 );        //输出:{ width: "200px", color: "#fff" }
    

    如果不想改变已有参数的值,可以借由一个空对象进行操作,并将合并的值赋给这个空对象,如下:

    const obj1 = {
        width: '100px'
    };
    
    const obj2 = {
        width: '200px',
        color: '#fff'
    };
    
    const obj = $.extend( {}, obj1, obj2 );
    
    console.log( obj );      //输出:{  width: "200px",  color: "#fff"  }
    console.log(obj1);      //输出:{  width: "100px"  }
    

    3.深度嵌套对象:

    const obj1 = {
        width: '100px',
        color: {
            lighten: '#fff'
        }
    };
    
    const obj2 = {
        width: '200px',
        color: {
            darken: '#ccc'
        }
    };
    
    $.extend(true, obj1, obj2);
    
    console.log(obj1);
    //输出:{ width: '200px', color: { lighten: '#fff', darken: '#ccc' } }
    

    相关文章

      网友评论

          本文标题:extend学习记录:

          本文链接:https://www.haomeiwen.com/subject/sgmasttx.html