jQuery->学习

1.

整体上看是这个样子，传入window对象，执行匿名函数

(function( window, undefined ) {  
    ......  
    window.jQuery = window.$ = jQuery;  
})( window );  

当jQuery内部频繁访问window对象时，作为参数传人的window对象，此时就不需要回退作用域链就可以快速访问到，另外，在代码压缩时能也够得到进一步的优化

(function( a, undefined ) {  
    ......  
    a.jQuery = a.$ = jQuery;  
})( window );  

另一个形参undefined，但是实参并没有传值，这是为什么？

var x = function (a){ 
    console.log(a); //undefined

    console.log(undefined);//chrome是undifined，ie8是1

}
undefined = 1;
x();

  

undefined是一个全局属性, 表示变量的一种可能取值，即变量没有初始化。

ecmascript3的时候这个全局变量是读写属性的，意味着可以将全局变量undefined赋予其它的值，当我们使用undefined时就会和预期不符。

作者定义了undefined形参，由于实参没有传递参数，该undefined的值就是undefined。

 

2 .

jQuery是一个函数，看其定义

jQuery = function( selector, context ) {  
     return new jQuery.fn.init( selector, context, rootjQuery );  
}

$('x') 那么就是执行函数调用了

jQuery.fn = jQuery.prototype = {  
     constructor: jQuery,  
     init: function( selector, context, rootjQuery ) {  
     ......  
     }  
}  

init也是一个函数，那么new init 就是创建init函数的一个实例对象，就和new Date() 是一样的效果。

var d = new Date(), d 就继承了Date原型上的属性和方法.

new init() 同理，新创建的对象也就继承了init原型上的属性和方法

jQuery.fn.init.prototype = jQuery.fn;

 这样 init的原型被设置为jQuery.fn ,  jQuery.fn又是如何定义, jQuery.fn = jQuery.prototype = {} 

 new jQuery.fn.init()创建的对象就拥有了 jQuery.fn 对象上的属性和方法了。

 

 网上扒过来一张图(JS Object Model)，在这张图中描述了js对象之间的关系

JavaScript中, Object是构造器，用来创建对象，例如:

var a = new Object()

因为构造器总是一个函数，

Object + ''
"function Object() { [native code] }"

所以Object是Function的一个对象

Object instanceof Function
true

图中Object -> Function's protopyte说明Object继承了Function的原型链上的^[1]

 

另外在Javascript中 ， 函数也是对象，Function也是函数，

Function + ''

"function Function() { [native code] }"

所以Function也是一个对象，

Function instanceof Object
true

是对象就会继承Object原型链上的属性, 所以也就解释了Function‘s prototype ->Object's prototype的那条线

 

3.  extend函数 

extend函数可将一个对象上的成员copy到另一个对象上

jQuery.fn.extend({.......});

jQuery.fn.extend用来扩充jquery对象实例的成员属性和方法

 

4. new init()返回值。

    官网是这样的 Return a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string.

    $('div')  ->  e.fn.e.init[206]??

 

注：

[1] 上图中prototype指的是函数的原型链，只有函数才会有原型链，普通的对象一般是没有原型链的，函数创建的对象会继承该函数原型链上的属性，chrome浏览器通过_proto_属性访问对象继承的原型链上的属性