jquery源码之extend

Posted watson

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery源码之extend相关的知识,希望对你有一定的参考价值。

jQuery.extend = jQuery.fn.extend = function() {

  定义一些变量

  if () {}  看是不是深拷贝情况

  if () {}  看参数正确不

  if () {}  看是不是插件情况

  for () {   可能有多个对象情况

    if () {}  防止循环引用,如 $.extend(a, {name: a});  //循环引用的情况进行排除;

    if () {}  深拷贝

    else if () {}  浅拷贝

  }

}

知识点梳理:

1、jQuery 是一个函数,jQuery() 返回一个对象,这个对象的构造函数是 jQuery.fn.init(),这个构造函数的原型,即 jQuery.fn.init.prototype = jQuery.fn,而 jQuery.fn = jQuery.prototype,因此,狗仔函数 jQuery.fn.init() 的原型函数就是 jQuery.prototype,总结:调用 jQuery() 之后返回的对象,其实都继承自 jQuery.prototype 原型;

2、jquery使用同一套源码实现对于静态和实例方法的拓展,jquery使用的两种extend形式分析:

  jQuery.extend() :拓展静态方法

  jQuery.fn.extend() :拓展实例方法

  $.extend() -> this 指向 $,即jQuery函数 -> 在 this 中添加方法 aaa: this.aaa -> $.aaa()

  $.fn.extend() -> this 指向 $.fn = jQuery.prototype,在原型中添加方法aaa: this.aaa -> $().aaa(),需要在实例对象中调用aaa方法

【当只写一个对象自变量的时候,jq中拓展插件的两种形式】

$.extend({ // 拓展工具方法

  aaa: function() { alert(1); },

  bbb: function() { alert(2); }

});

$.aaa(); // 弹出 1

$.bbb(); // 弹出 2

$.fn.extend({ // 拓展jq实例方法

  aaa: function() { alert(3); },

  bbb: function() { alert(4); }

});

$().aaa();

$().bbb();

【当写对个对象自变量的时候,后面的对象都是拓展到第一个对象上】

var a = {};  // 拓展对象 a的属性

$.extend(a, {name: "hello"}, {age: 30});

alert( a ); // 弹出 {name: "hello", age: 30}

var a = {};  // 还可以做 深拷贝 和浅拷贝

var b = {name: {age: 30}};

$.extend(a, b); // $.extend() 做的浅拷贝!

a.name.age = 20;

alert( b.name.age );  // 弹出20

$.extend(true, a, b); // 增加参数 true,告诉jq我要进行深拷贝

a.name.age = 20;

alert( b.name.age );  // 弹出30

3、关于继承

jq使用的是拷贝继承,比较灵活;

类式继承:使用new 构造函数进行继承;

原型继承:??

 

以上是关于jquery源码之extend的主要内容,如果未能解决你的问题,请参考以下文章

jquery源码之extend

jQuery源码解析之on事件绑定

jQuery之Deferred源码剖析

jQuery之Deferred源码剖析

jqeury源码之变量解析

Jquery源码分析之匿名函数的自执行