jquery内核及实现原理(一)--原型,实例,作用域,跨域访问

jquery框架原理
1)起源--原型继承

<script type="text/javascript">
      var $ = jquery = function(){ //定义jquery对象，重命名为$
      
      };
</script>

 
在定义了一个空对象后，可以用ptototype来实现继承机制

<script type="text/javascript">
  var jquery = function(){};
  jquery.fn = jquery.protopyte = {  //扩展原型对象重命名成jquery.fn，如果不带jquery，则表示fn属于window对象
  }
</script>

 
模仿jquery框架源码，给它添加两个成员，一个是原型属性jquery，另外一个是size方法:

<script type="text/javascript">
  var $ = jquery = function(){};
  jquery.fn = jquery.protopyte = {  //扩展原型对象
   jquery : 1.9.0,
   size : function(){
    return this.length;
   }
  }
</script>

 
2)生命--返回实例
以往，我们可以通过如下方法调用：

<script type="text/javascript">
  var my$ = new $();
  alert(my$.jquery);
  alert(my$.size());   
</script>

 

但是jquery不是这么调用的，jquery的调用方法：

$().jquery;
$().size();

 
也就是说，jquery框架没有用new操作符进行实例化，因此，正确的结构是
应该把jquery看做一个类，也要看做一个函数，并返回jquery的实例:

<script type="text/javascript">
  var $ = jquery = function(){
    return new jquery();
  };
  jquery.fn = jquery.protopyte = {  //扩展原型对象
   jquery : 1.9.0,
   size : function(){
    return this.length;
   }
  }
  alert($().jquery);
  alert($().size()); 
</script>

 

但是这样做的话会报错，return new jquery()这一行会报内存溢出，应该用如下方法返回一个jquery实例：

<script type="text/javascript">
  var $ = jquery = function(){
    return jquery.fn.init();
  }
  jquery.fn = jquery.protopyte = {  //扩展原型对象
   init : function(){
     return this;
   },
   length : "1",
   jquery : "1.9.0",
   size : function(){
    return this.length;
   }
  }
  alert($().jquery);
  alert($().size()); 
</script>

 
3)学步--分隔作用域

<script type="text/javascript">
  var $ = jquery = function(){
    return jquery.fn.init();
  }
   jquery.fn = jquery.protopyte = {  //扩展原型对象
   init : function(){
   this.length = "0";
   this.test = function(){
    return this.length;
  }
    return this;
   },
   length : "1",
   jquery : "1.9.0",
   size : function(){
    return this.length;
   }
  }
  alert($().jquery);
  alert($().size()); 
  alert($().test()); 
</script>

 
由于init返回的this指向的是init作用域，所以size()方法返回的是0而不是1，如果init中没有length属性，则size()和test()
返回的都是1，其实就是由于init和fn中的this关键字没有隔离开来，相互冲突了，因此，jquery用了如下方法来避免冲突:

<script type="text/javascript">
  var $ = jquery = function(){
    return new jquery.fn.init();
  }
</script>

 
但是这样的话，就无法访问fn中的属性和方法，入以上打印$().jquery会是undefined，打印$().size()会报错，

 4）-- 跨域访问

jquery用如下方法来实现访问fn中的属性和方法：

<script type="text/javascript">
  var $ = jquery = function(){
    return new jquery.fn.init();
  }
  jquery.fn = jquery.protopyte = {  //扩展原型对象
   init : function(){
       this.length = "0";
       this.test = function(){
          return this.length;
      }
      return this;
    },
    length : "1",
    jquery : "1.9.0",
    size : function(){
       return this.length;
   }
  }
    jquery.fn.init.prototype = jquery.fn;
    alert($().jquery);
    alert($().size()); 
    alert($().test()); 
</script>

 
打印出来的是1.9.0 0 0 size()方法打印出0是因为this指向的还是init域，jquery.fn.init.prototype = jquery.fn这行代码
是一招妙棋，这样就使new jquery.fn.init()创造出来的对象继承了fn里的方法和属性。
至此，jquery中如何创建对象已经完成。