Js封装extend方法

<script type="text/javascript">
		//$.extend
		//eg:var obj1={};var obj2={name:'张三'};var obj3={gender:'男'}
		//eg:  $.extend(obj1,obj2,obj3);将obj2与obj3一一遍历添加到obj1
		
		(function(global){
			function jquery(selectors){
				return new jquery.fn.init(selectors);
			}
			jquery.fn=jquery.prototype={
				constructor:jquery,
				init:function(selectors){
					var elements=document.querySelectorAll(selectors);
					for(var i=0;i<elements.length;i++){
							this[i]=elements[i];//给this创建属性从0开始的i
						}	
					this.length=elements.length;
				},
				css:function(name,value){
					for(var i=0;i<this.length;i++){
					this[i].style[name]=value;
					}
				}
			}
			//重点：为了让init实例对象访问到css方法
			jquery.fn.init.prototype=jquery.fn;
			
			jquery.extend=function(...args){
				//args是一个数组[{},{}],每一个参数是一个对象
				console.log(...args);//因为传入的参数是未知的，所以选择对象拓展运算符；
				for(var i=1;i<args.length;i++){
					var objs=args[i];
					for(var key in objs){
						args[0][key]=objs[key];
					}
				}
				return args[0];
			}
			//给window对象添加属性$和jquery,并设置值为jquery
			window.$=window.jquery=jquery;
		})(window)
		
	var obj1={};
	$.extend(obj1,{name:2,age:10},{tall:180})
//	console.log(obj1);//{name:2,age:10,tall:180}
	</script>

方法二：$.fn.extend
也是编写jquery插件的核心
写法如下：

//$.fn.extend({
				//方法一：
				//方法二：
				//方法n:
			//})
	//目的是将   方法添加到jquery原型中

			//jquery.fn.extend赋值为jquery.extend
			//两者区别：1接收数据的对象不同 
			//			jquery.fn.extend：this
			//			jquery.extend:第一个实参
			//       2.提供数据的对象发生变化
			//			jquery.fn.extend：目标参数
			//			jquery.extend:第二个参数及其后面的参数
			jquery.fn.extend=jquery.extend=function(...args){
				var target={};
				var source=[];
				 if(this===jquery){
				 	//$.extend
				 	target=args[0];//target={}
//				 	console.log(args[0])
				 	source=[...args];//[{},{},{}]
				 	source.splice(0,1);
				 }else{
				 	//$.fn.extend
				 	target=this;
				 	source=[...args];
				 }
				 //遍历源,将源赋给target
				 source.forEach((item,index)=>{
				 	//es5中，获取对象（item）中的每一个属性，返回一个数组，由属性组成的数组
				 	Object.keys(item).forEach(items=>{
				 		target[items]=item[items];
				 	})
				 })
				 return target;
			}

优化3

jquery.fn.extend=jquery.extend=function(...args){
				var target={};
				var source=[];
				 if(this===jquery){
				 	//$.extend
				 	target=args[0];//target={}
//				 	console.log(args[0])
				 	source=[...args];//[{},{},{}]
				 	source.splice(0,1);
				 }else{
				 	//$.fn.extend
				 	target=this;
				 	source=[...args];
				 }
				 //遍历源,将源赋给target
				 //source.forEach((item,index)=>{
				 	//es5中，获取对象（item）中的每一个属性，返回一个数组，由属性组成的数组
				 	//Object.keys(item).forEach(items=>{
				 		//target[items]=item[items];
				 	})
				 })
				 //Object.assign(target,source[0],source[1],source[2])
				 Object.assign(target,...source)
				 return target;
			}