extend 静态方法和fn实例方法对比

最新推荐文章于 2021-10-07 17:57:36 发布

原创最新推荐文章于 2021-10-07 17:57:36 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了 jQuery 中的 extend 方法，包括其基本用法、不同参数设置的影响，以及如何使用该方法来合并多个 JavaScript 对象。此外，还探讨了 extend 和 fn.extend 在 jQuery 中的区别。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>extend和fn对比</title>
	<link rel="stylesheet" href="../reset/reset.css">
	<script type="text/javascript" src="../jquery/jquery.min.js"></script>
</head>
<body>
	<h2 class="h">轻轻空白处</h2>
	<script>
			var obj ={tod : '2016-07-04'}
			var obj1 = {
				aname  : 'tom',
				age   : 33,
				adr   : '北京'
			}
			var obj2 = {
				sex  : 'nan',
				love : '篮球',
				age  : 13
			}
			var obj12 = $.extend({},obj1,obj2);
			//第一个参数为空的话
			var obj1122 = $.extend(obj,obj1,obj2);
			//第一个参数不为空的话
			console.log(obj12)
			console.log(obj)
			//obj变成了三个对象合并在一起的对象
			//$.extend将两个对象合并一起，如果后面有何前面一样的属性，那么后面的覆盖前面的。
			var obj1 = {
				aname  : 'tom',
				age   : 33,
				adr   : '北京',
				love  : {eat:'吃喝',play:'游戏',other:'Nothing'}
			}
			var obj2 = {
				sex  : 'nan',
				love : '篮球',
				age  : 13,
				love :{eat:'吃喝',play:'打篮球',oth:'Something'}
			}
			var obj12 = $.extend({},obj1,obj2);
			console.log(obj12);
			//如果在extend内加true的话和false的话效果不一样,默认是false，后面完全覆盖前面，如果是true的话，那么后面没有覆盖前面的话就可以另外添加
			var obj1122 = $.extend(false,{},obj1,obj2);
			console.log(obj1122);
			var obj123 = $.extend(true,{},obj1,obj2);
			console.log(obj123);
			var oo = {say : '悯农'}
			var ooo = $.extend(oo)
			console.log(ooo)
			console.log($('.h').say);
			console.log(oo.say)
			//用$.fn.extend(object)添加的对象，那么它的属性，jquery中所有对象都可以调用。是全局的。而extend就不可以。
			var oooo = $.fn.extend(oo);
			console.log($('.h').say)

 			var m2 = $.extend({
               		hello:function(){alert('hello');}
            	});


            	$.hello()  //$.extend 上的方法直接$.hello()就能调用
	</script>
</body>
</html>