jQuery()方法构建原理

来源:互联网 发布:mac os 10.12 iso下载 编辑:程序博客网 时间:2024/06/05 16:10

前言

jQuery是一个非常优秀的javascript库,其短小精悍,使用简单方便,性能高效,能极大地提高开发效率,是开发Web应用的最佳的辅助工具之一。
一些开发人员在使用jQuery时,由于仅仅只知道jQuery文档中的使用方法,不明白jQuery的运行原理,时常会碰到许多的问题。这些问题大部分是使用不当而产生,极少数是jQuery的Bug。如果不明白其运行机理和核心源码,我们也很难写出基于jQuery类库的高性能的程序出来。

1、jQuery最常用的方法就是jQuery,即$();
2、jQuery是一个调用函数,调用的结果是返回了一个jQuery实例对象;
3、编写组件时jQuery无需我们new手工实例化,它会自动返回一个实例;
4、什么叫构造函数?

var Bike=function(){this.price=1000;};

Bike就是构造函数,通常构造函数的第一个字母大写,为了与普通函数区别。
构造函数的特点有俩个:
函数体内部使用了this关键字,代表了要生成的对象实例
生成对象的时候,必须使用new命令,调用该构造函数
5、new命令

var Bike=function(){this.price=5000;};var b = new Bike();b.price // 1000

使用new命令时,根据需要,构造函数也可以接受参数

var Bike=function(p){this.price=p;};var b = new Bike(1000);

new命令本身就可以执行构造函数,所以后面的构造函数可以带括号,也可以不带括号。下面两行代码是等价的。

var b = new Bike();var b = new Bike;

6、当函数调用表达式前出现了关键字new,这个函数就成了构造函数,此时会依次发生四件事:

1、首先一个空对象(又称实例)被创建出来了。
2、该空对象继承构造函数的原型中的属性和方法。这也是为什么要把方法都写在构造函数的prototype里。
3、该空对象被赋值给构造函数内部的this对象。
4、执行构造函数。如果构造函数中显式的返回了一个对象,那么new出的就不再是新创建的空对象,而是return指定的对象。否则一律返回新建空对象。

7、jQuery的核心框架(简化版):

(function(){var jQuery=window.jQuery=function(selector,context){return new jQuery.prototype.init(selector,context);};jQuery.fn=jQuery.prototype={init:function(selector,context){return this}};jQuery.prototype.init.peototype=jQuery.prototype;})();

jQuery( )的构造原理:每次调用jQuery( )都返回由构造函数init指定返回的this对象,而this对象已经被赋值为那个新创建的空对象。由于把jQuery.prototype都赋给了init.prototype,所以新创建的空对象继承所有jQuery的方法。