zoukankan      html  css  js  c++  java
  • 浅谈jQuery的对象构成1

    前段时间在阅读javaScript基于原型的面向对象编程相关资料时,对一直在使用的jQuery产生了点疑问,便对其稍作了点研究。

            在javascript编程中,生成对象的方式有两种,

            第一种,对象字面量方式:

                var foo = {

                    name : "紅一葉",

                    age : 18

                };

            第二种就是通过构造器方式创建对象:

            function Foo(){

                this.name = "紅一葉";

                this.age = 18;

            }

            var foo = new Foo();

            在上式中,foo便是由构造器Foo构造出来的对象(在javascript中,函数都可以作为构造器。于是有个不成文的约定,凡是要作为构造器使用的函数首字母大写)。

            回到jQuery中,在jQuery中我们最为常用的对象生成方式$("#id"),很显然这种方式和上面两种都不像,让我们通过代码来看看jQuery到底做了什么封装和转换(以下代码取自于jQuery1.9.1);

    window.jQuery = window.$ = jQuery;

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

            通过上面几行代码我们可以看出,jQuery和$是两个等价的全局变量,$("#id")便是调用了上面定义的函数,等价于jQuery("#id"),这个函数的返回值是new jQuery.fn.init( selector, context, rootjQuery );

    也就是说$("#id")其实是调用了init()构造器构造了一个对象并返回。

            咱们再细看一下jQuery.fn.init();这个jquery.fn是个什么东东,已及init构造器到底有什么特殊的地方?来咱再上代码来看看

    jQuery.fn = jQuery.prototype = {

        init: function( selector, context, rootjQuery ) {

        ......

        },

        ....

    };

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

        由jQuery.fn = jQuery.prototype这句可以看出fn是jQuery原型对象的一个引用,实际上fn也没有其他特别的含义,为防止给我们的思维造成混乱,可以把上面代码中的所有fn用jQuery的原型替代(即把所有的jQuery.fn替换成jQuery.prototype)。

        至于init构造器有什么特殊的地方,上面我们看到,jQuery中把init的原型指向了jQuery.fn即指向了jQuery的原型,jQuery.prototype。这样做的好处在于,由init()构造器构造的对象就能够通过原型链访问到jQuery原型上的方法和属性。

        对于这几个变量的关系,如果有疑问的话可以参照下面的两张图来帮助理解,第一张是我自己画的,第二张百度上借网友的,表示的都是一个意思,只是画的方式不同而已。

  • 相关阅读:
    13.困难重重
    02.Django的第一个网页
    03.Django模板
    01.Web开发之简介
    14.效率利器之多线程和线程池
    Silverlight实用窍门系列:37.Silverlight和ASP.NET相互传参的两种常用方式(QueryString,Cookie)
    Web编码规范中文乱码解决方案
    H*ber*ate Lazy属性
    Bat如何判断txt文本中第8行是否只有"符号,有则删除整行
    #每日一练 获取字典值
  • 原文地址:https://www.cnblogs.com/akahitoha/p/6722524.html
Copyright © 2011-2022 走看看