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

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; });
  }
});

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