Mr.J-- jQuery学习笔记(二十四)--剖析jQuery源码--extend

 

定义和用法

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

注意：1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

---

语法

$.extend( target [, object1 ] [, objectN ] )

指示是否深度合并

$.extend( [deep ], target, object1 [, objectN ] )

警告: 不支持第一个参数传递 false 。

参数	描述
deep	可选。 Boolean类型 指示是否深度合并对象，默认为false。如果该值为true，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。
target	Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
object1	可选。 Object类型 第一个被合并的对象。
objectN	可选。 Object类型 第N个被合并的对象。

---

function yjkjQuery() {

}
yjkjQuery.extend = function (obj) {
// 此时此刻的this就是yjkjQuery这个类
console.log(this);
}

yjkjQuery.extend();

jQuery部分源码比对：

function yjkjQuery() {

}
yjkjQuery.extend = function (obj) {
for(var key in obj){
	this[key] = obj[key];
}
}
yjkjQuery.extend({
isTest: function () {
	console.log("test");
}
});
yjkjQuery.isTest();

上述结果，同样可以用以下方式进行编写（在类里面添加一个静态方法）：

for(var key in obj){
	 yjkjQuery["isTest"] = function () {console.log("test");}
}
yjkjQuery.extend({
isTest: function () {
	//console.log("test");
}

---

下面这段代码可以更好地理解extend：

yjkjQuery.prototype.extend = function (obj) {
// 此时此刻的this是yjkjQuery对象
 console.log(this);
for(var key in obj){
	// myTest["isDemo"] = function () {console.log("demo");}
	this[key] = obj[key];
}
}
var myTest = new yjkjQuery();
myTest.extend({
isDemo: function () {
	console.log("demo");
}
});
myTest.isDemo();

将上面两端方法进行合并，并与jQuery源码进行比对：

jQuery部分源码：

改写：

yjkjQuery.extend = yjkjQuery.prototype.extend = function (obj) {
 console.log(this);
for(var key in obj){
	this[key] = obj[key];
}
}
 yjkjQuery.extend({});
var q = new yjkjQuery();
q.extend({});

extend有什么好处？

定义插件

定义插件，那就是使用$.fn.extend方法。类似下面的写法：

(function($){
      $.fn.extend({
          changeStyle:function(option){
          var defaultSetting = { colorStr:"green",fontSize:12};
          var setting = $.extend(defaultSetting,option);
          this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");
          return this;
            }
      });
 })(jQuery); 

PS:$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能，通过阅读jQuery源码我们可以发现这两个方法的本质区别，那就是$.extend方法是在jQuery全局对象上扩展方法，$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法，定义插件一般用$.fn.extend方法。

外部链接：什么？你还不会编写JQuery 插件

Mr.J--JS学习（继承模式发展史）