관련 권장사항: "jQuery 비디오 튜토리얼"
1. jQuery extend() 및 jQuery.fn.extend()
jQuery 에 대해 알아보세요. 매뉴얼, extend 메소드는 jQuery와 jQuery.fn이라는 두 개의 다른 객체에 마운트되지만 jQuery의 내부 코드는 동일하지만 기능은 다릅니다
공식 설명:
jQuery.extend(): 두 개 이상의 개체 내용을 첫 번째 개체로 병합합니다. (두 개 이상의 개체 내용을 첫 번째 개체로 병합합니다.) ;
jQuery.fn.extend(): 새로운 jQuery 인스턴스 메소드를 확장하기 위해 객체의 내용을 jQuery 프로토타입에 병합합니다.)
2. 이해하기
jQuery.extend() 먼저 jQuery를 클래스로 살펴보겠습니다. 이것이 이해하기 더 쉽습니다. jQuery.extend()는 확장된 jQuery 클래스입니다.
jQuery 클래스를 먹고 마시고 달리고 점프할 수 있는 인간으로 간주한다고 가정해 보겠습니다. 이제 jQuery.extend 메서드를 사용하여 이 클래스를 talk() 스킬로 확장합니다. 이 경우, 당신이 남자든, 여자든, xx사람...등이든 이 스킬(방법)을 계승할 수 있습니다.
는 다음과 같이 작성할 수 있습니다.
JQuery.extend({
speak:function(){
alert("how are you!");
}
});로그인 후 복사
호출 메소드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery.extend()与jQuery.fn.extend()区别</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
(function($){
$.extend({
speak:function(){
alert("how are you!");
}
});
})(jQuery); </script>
<script type="text/javascript">
$(document).ready(function(){
$.speak();
}) </script>
</head>
<body>
</body>
</html>로그인 후 복사
$.speak)가 jQuery 클래스 자체의 메소드(객체)가 되었음을 알 수 있으며, 이제 "말"할 수 있습니다. "예.
하지만 이 능력은 인류 전체를 대표하는 jQuery 클래스 자체에서만 사용할 수 있습니다. 개인적으로 사용하고 싶다면 Zhang San Li Si Wang Wu Ma Liu, 작은 풀뿌리들이 모든 인류를 대표 할 수 있습니까?
따라서 이 확장은 클래스 자체
에만 관련된 소위 정적 메서드이기도 합니다. 특정 인스턴스화된 개체와는 아무 관련이 없습니다.
3.
jQuery.fn.extend() 이해하기 말 그대로 이 확장은 jQuery.fn의 메소드입니다. jQuery.fn이란 무엇입니까?
jQuery.fn = jQuery.prototype = {
init:funtion(selector,context){ //.....
}
}로그인 후 복사
그래서 jQuery.fn.extend는 jQuery 객체(프로토타입)의 메소드를 확장한 것입니다!
대상이 무엇인가요? $("#abc"), $(p)
와 같은 클래스의 인스턴스화입니다. 즉, jQuery.fn.extend 확장 메소드를 jQuery 객체에 사용해야 합니다! 이를 사용하려면 Zhang San, Li Si, Wang Wu 및 Liu와 같은 인스턴스화된 개체여야 합니다.
직접 말하면 다음과 같이 사용해야 합니다(xyz()가 확장 방법이라고 가정):
$('selector') 4. 둘 사이의 차이점 요약:
4.1. 둘의 호출 방법이 다릅니다:
jQuery.extend(),一般由传入的全局函数来调用，主要是用来拓展个全局函数，如$.init()，$.ajax();
jQuery.fn.extend(),一般由具体的实例对象来调用，可以用来拓展个选择器，例如$.fn.each();
4.2、两者的主要功能作用不同：
jQuery.extend(object); 为扩展jQuery类本身，为自身添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法
4.3、大部分插件都是用jQuery.fn.extend()
5、JQuery的extend扩展方法：
5.1、Jquery的扩展方法原型是:
extend(dest,src1,src2,src3...);
로그인 후 복사
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。
如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。로그인 후 복사
这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那么合并后的结果： result={name:"Jerry",age:21,sex:"Boy"}로그인 후 복사
也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。
5.2、省略dest参数
上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：
5.2.1、$.extend(src)
该方法就是将src合并到jquery的全局对象中去，如：
$.extend({
hello:function(){alert('hello');}
});로그인 후 복사
就是将hello方法合并到jquery的全局对象中。
5.2.2、$.fn.extend(src)
该方法将src合并到jquery的实例对象中去，如:
$.fn.extend({
hello:function(){alert('hello');}
});로그인 후 복사
就是将hello方法合并到jquery的实例对象中。
下面例举几个常用的扩展实例：
$.extend({net:{}});로그인 후 복사
这是在jquery全局对象中扩展一个net命名空间。
$.extend($.net,{
hello:function(){alert('hello');}
})로그인 후 복사
这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。
5.2.3、Jquery的extend方法还有一个重载原型：
extend(boolean,dest,src1,src2,src3...)
로그인 후 복사
第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：
var result=$.extend( true, {},
{ name: "John", location: {city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} }
);로그인 후 복사
我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是：
var result={
name:"John",last:"Resig", location:{city:"Boston",state:"MA",county:"China"}
}로그인 후 복사
也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下
var result=$.extend( false, {}, { name: "John", location:{city: "Boston",county:"USA"} },
{ last: "Resig", location: {state: "MA",county:"China"} });로그인 후 복사
那么合并后的结果就是:
var result={
name:"John",last:"Resig",location:{state:"MA",county:"China"}
}로그인 후 복사
以上就是$.extend()在项目中经常会使用到的一些细节。
更多编程相关知识，请访问：编程视频课程！！
위 내용은 jQuery에서 Extension()과 jQuery.fn.extend()의 차이점에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
