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; });
}
});
//上面两种方法效果是一样的