jQuery中最常用方法的就是jQuery( ),也即$( )。

jQuery( )是一个函数调用,调用的结果是返回了一个jQuery实例对象。

编写组件通常的做法是将组件封装成一个对象,需要用的时候则通过new运算符来创建一个实例。但是jQuery( )无须我们用new手工实例化,它会自动返回一个实例。

要实现这一点,最直接的思路就是定义这样一个函数:

这么做的问题是出现了死循环:

最简单的解决办法是借助另一个构造函数:

这么做技术上并没有什么问题,但是jQuery的作者并没有这么做,可能是出于某种技术洁癖或者我暂时不清楚的原因,init被定义在了jQuery函数的原型中:

通过init作为中转站,最终return出了一个jQuery实例。看上去更“雅致”,更有“技术范”。

将上述代码写在一个自执行函数内(形成私有作用域,避免命名空间污染),就构成了jQuery的核心框架(简化版):

要理解上述结构的工作原理,必须理解JavaScript基于构造函数和原型的继承模式。

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

1、首先一个空对象(又称实例)被创建出来了。

2、该空对象继承构造函数的原型中的属性和方法。这也是为什么要把方法都写在构造函数的prototype里。

3、该空对象被赋值给构造函数内部的this对象。

4、执行构造函数。如果构造函数中显式的返回了一个对象,那么new出的就不再是新创建的空对象,而是return指定的对象。否则一律返回新建空对象。

具体参见阮一峰教程:http://javascript.ruanyifeng.com/oop/basic.html

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

构造函数init里面的return this其实删掉也无妨,至于作者为啥要加这句,呃,可能是因为知道的太多。

jQuery( )方法的构建原理的更多相关文章

  1. .NET Core中间件的注册和管道的构建(1)---- 注册和构建原理

    .NET Core中间件的注册和管道的构建(1)---- 注册和构建原理 0x00 问题的产生 管道是.NET Core中非常关键的一个概念,很多重要的组件都以中间件的形式存在,包括权限管理.会话管理 ...

  2. jQuery源码:从原理到实战

    jQuery源码:从原理到实战 jQuery选择器对象 $(".my-class"); document.querySelectorAll*".my-class" ...

  3. jquery无new构建学习笔记

    当我们想要创建一个对象,我们可能使用new方法去构建一个对象,那按道理jquery也是一个对象,应该也是用new jquery()来构建呀为什么我们创建jquery对象不用new jquery()而是 ...

  4. jQuery方法实现

    children 原生JavaScript中,如果希望找到某个元素的子元素,只能通过Node类型上的children方法一步一步获取.如 let li = document.querySelector ...

  5. 输入框去除默认的文字,jquery方法

    需求:所有的输入框获取焦点时,去掉默认的提示文字,失去焦点时如果输入框为空,恢复默认的提示文字. 解决方案:jquery方法,以下有三种,按照利弊,我建议最后一种. 先看html代码: <inp ...

  6. Webpack探索【16】--- 懒加载构建原理详解(模块如何被组建&如何加载)&源码解读

    本文主要说明Webpack懒加载构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack懒加载构建原理. 本文使用的 ...

  7. Webpack探索【15】--- 基础构建原理详解(模块如何被组建&如何加载)&源码解读

    本文主要说明Webpack模块构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack的基础构建原理. 本文使用的W ...

  8. jsonp协议 java服务端、JQuery客户端 简单实现原理

    原文链接:https://blog.csdn.net/Activity_Time/article/details/96440806 1. 概述 Jsonp(JSON with Padding) 是 j ...

  9. 1.4 jQuery方法,JSON介绍

    jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...

随机推荐

  1. 【转】python编码的问题

    摘要: 为了在源代码中支持非ASCII字符,必须在源文件的第一行或者第二行显示地指定编码格式: # coding=utf-8 或者是: #!/usr/bin/python # -*- coding: ...

  2. struts2 国际化

    国际化概述: 软件国际化:一个软件根据来访者地区不同,显示不同语言. 国际化: * 必须有一组资源包: * 一组属性文件命名: 基本名称_语言(小写)_国家(大写).properties * 如:me ...

  3. git workflow

    1) fork map-matcher.git repo 2) add ssh-keygen public key to gitlab 3) clone repo git clone git@git. ...

  4. ACM-ICPC退役选手的发言——满满的正能量(短视频)

    这是我在北京林业大学ACM-ICPC竞赛说明会上发言的录像 希望能激励大家在奋斗的道路上披荆斩棘,勇往直前!

  5. javascript 中的 bind (编辑中。。。。)

    这篇文章说的非常好!http://my.oschina.net/blogshi/blog/265415 我的体会就是,函数中的this,指的是运行时,它是被哪个对象调用的.因为javascrpit的函 ...

  6. 继承的小DEMO

    代码如下 Student.java package four.com; public class Student extends Person { // private String name; // ...

  7. Windows 8.1安装 Vmware10

    之前在windows 8上安装的Vmware 9.0,已经激活了用的蛮好,可是自从上次自动更新系统到windows 8.1后,启动虚拟机时提示要激活 使用各种激活码与注册机都无效,就算注册表信息丢失但 ...

  8. 第六届福建省大学生程序设计竞赛(FZU2213—FZU2221)

    from:piaocoder Common Tangents(两圆之间的公公切线) 题目链接: http://acm.fzu.edu.cn/problem.php?pid=2213 解题思路: 告诉你 ...

  9. ViewPager图片切换的简单案例

    1)ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的view类. 2)ViewPager类需要一个PagerAdapter适配器类给它提供数据. 向右滑动切 ...

  10. DELL灵越15R5521安装黑苹果

    按照网上的流程安装即可:(懒人法) 首先分出两个硬盘分区,一个10G左右(用于做系统),一个30G左右(用于装系统)://注意生成时选择不要格式化 然后利用硬盘助手将镜像文件(.cdr文件)写入10G ...