美文网首页
JS合并对象以及jquery扩展方法总结

JS合并对象以及jquery扩展方法总结

作者: _鸭鸭 | 来源:发表于2019-08-01 15:23 被阅读0次

JS合并对象的方法

JQuery方法jQuery.extend()的使用
1、 给jq的实例扩展多个方法

如:var fun = {
    toHide:function(){
        jQuery(this).hide();
    },
    toRed:function(){
        jQuery(this).css({color:'red'});
    }
 };
jQuery.fn.extend(fun);
// jQuery('div').toHide();
jQuery('div').toRed();

2、给jq本身命名空间加方法:

var foo = {
    toDou:function(num){
        return num<10?'0'+num:''+num;
    },
   arnd:function(m,n){
        return Math.floor(m+Math.random()*(n-m));
    }
};
jQuery.extend(foo);
console.log(jQuery.toDou(jQuery.arnd(0,10)));

为扩展jQuery类本身,为类添加新的方法。

3、扩展对象

  • 在b对象上寻找a没有的属性赋值到a上,同名属性会被覆盖
    var c = $.extend(a,b)

  • 用一个或多个其他对象来扩展一个对象,返回被扩展对象。
    var options = jQuery.extend({}, object1, [objectN]);
    是否深度拷贝:[deep]
    var options = jQuery.extend( [deep ], target, object1 [, objectN ] )
    注意:1. 如果只为 jQuery.extend()指定了一个参数,则意味着参数target被省略。此时,target就是jQuery对象本身{}。
    参数:
    deep:Boolean类型 指是否深度合并对象,默认为false如果该值为true,且多个对象的同名属性也都是对象,则该属性对象的属性也将进行递归合并。
    Target:object类型 目标对象,其他对象的成员属性将被附加到该对象上。

浅拷贝拷贝的是内存地址,这是通过a或者b改变属性,c中的属性也会改变。深拷贝会把引用类型的属性复制成一个副本,不会与之前的引用共用同一个对象。

ES6以后的实现方法
1、Object.assgin(target, ...sources)
参数:
target :目标对象
sources : 源对象
用于将所有可枚举属性的值从一个或多个对象赋值到目标对象。然后它将返回目标对象。
*如果对象的属性值是简单类型,得到的新对象为‘深拷贝’,如果属性值为对象或其他引用类型,那对于这个对象而言其他都是浅拷贝。

const object1 = {
name:'yaya',
age:18,
color:'red'
};
const object2 = Object.assign({name: 'yayaxiaotianshi',sex:'female'}, object1);
console.log(object2.name, object2.sex);
// expected output: 'yaya' female

2、ES7的对象的拓展运算和ES6的结构赋值
Object3={…object1,…object}

添加实例的方法

1、jQuery.fn的方法的使用
jQuery.fn是指jquery的命名空间,加上fn上的方法和属性,会对jquery每一个实例有效。

JQuery.fn=jQuery.prototype={
    Init : function(selector,context){
  }
}

2、 jQuery.fn.extend(object)方法的使用
参数:
Object:一个对象用来合并JQuery的原型。
对jQuery.prototype进行扩展,就是可以为jQuery类添加成员函数。jQuery.fn.extend()方法继承了jQuery原型(jQuery.fn)对象,以提供jQuery原型新的方法,可以链式调用jQuery()函数。

Code:
jQuery.fn. check = function() {}
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

//上面两种方法效果是一样的

相关文章

  • JS合并对象以及jquery扩展方法总结

    JS合并对象的方法 JQuery方法jQuery.extend()的使用1、 给jq的实例扩展多个方法 2、给j...

  • 使用原生js实现复制对象及扩展

    使用原生js实现复制对象,扩展对象,类似JQuery中的extend()方法

  • jQuery扩展类

    一、JS合并对象的方法 *JQuery方法$.extend()的使用 [if !supportLists]1、[e...

  • jQuery 入门

    jQuery jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对...

  • extend学习记录:

    extend的作用: 1.扩展jquery的静态方法: 2.合并对象: extend用作合并时,会改变第一个参数的...

  • jQuery操作事件

    总结:jQuery对象打点 去掉 on 的 js 事件 (1)、jQuery对象 . click(functio...

  • jQuery扩展插件

    什么是jQuery插件? 扩展jQuery原型对象的一个方法(jQuery插件是jQuery对象的一个方法)jQu...

  • 浅谈eq和get的区别

    标签(空格分隔): js 区别: eq方法返回的是jQuery对象,jquery对象可以使用jquery方法get...

  • jquery $.extend()例子总结

    概述 用以扩展jQuery对象 参数 object 例子 合并两个对象,并修改第一个对象。 采用递归方式合并两个对...

  • js对象与jquery对象

    (一) 区别js对象不能使用jquery对象的方法和属性jquery对象不能使用dom对象的方法和属性 var ...

网友评论

      本文标题:JS合并对象以及jquery扩展方法总结

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