前言:

jquery是每个前端都会的基础技能,众所周知,jquery返回的是jquery实例方法,但是我们似乎是直接使用$就可以获取到jquery的方法啦,可以在浏览器中判断一下 window.$ 和window.jQuery,jQuery 之间的关系,就会发现他们之间是全等的;

不使用new方法调用

我们一般调用实例大部分是通过new方法,但是jquery却不是,而是直接调用,这是为什么呢

1. 创建实例方法:

  (function(root){
var jQuery = function(){
console.log('创建实例啦')
}
root.jQuery = jQuery //这样赋值就可以调用啦
})(window)
2.返回时操作

但是现在页面上调用jQuery仍然不能使用$调用,于是简单修改代码

  (function(root){
var jQuery = function(){
return new jQuery()
}
root.$ = root.jQuery = jQuery
})(this)

这样我们就可以不在外部调用new方法,因为jQuery在返回的时候就已经调用了new

原型共享

在之前的操作下,我们已经将new jQuery返回了出去,但是这样是有问题的。我们在jquery原型中定义一个init方法,并将init返回出去

1. 定义一个init

  var jQuery = function(){
return new jQuery.prototype.init();
}
jQuery.prototype = {
init: function(){
}
}

但是这样我们虽然解决了报错问题,但是我们现在无法获取到jQuery中的原型方法,也就无法调用到jQuery的方法。

2. 原型共享

jQuery中有很重要的一行代码:

  jQuery.prototype.init.prototype = jQuery.prototype

这就是原型共享,简单从代码来看,就是将jquery的原型赋值给jquery.prototype.init方法原型;

这样我们调用jquery时,虽然获取的是init方法,但是依然可以调用jquery中的原型方法。

3. 例子

我们在jquery上简单扩展方法,并打印jquery验证

  jQuery.prototype = {
init: function(){
},
css: function(){},
}

结果:

jQuery源码学习一: 创建一个jquery实例的更多相关文章

  1. jquery源码学习笔记三:jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  2. jquery源码学习(一)——jquery结构概述以及如何合适的暴露全局变量

    jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jq ...

  3. jQuery源码学习扒一扒jQuery对象初使化

    神奇的jQuery可以这样玩jQuery("#id").css()或 jQuery("#id").html() 这么玩jQuery("#id" ...

  4. jquery源码学习笔记二:jQuery工厂

    笔记一里记录,jQuery的总体结构如下: (function( global, factory ) { //调用factory(工厂)生成jQuery实例 factory( global ); }( ...

  5. jquery源码学习(三)—— jquery.prototype主要属性和方法

    上次我们学习了jquery中的主要对象jQuery和一些变量,现在我们开始学习jquery的原型 98行声明了jQuery.fn = jQuery.prototype = {} 285行jQuery. ...

  6. jquery源码学习(二)——jquery中的变量

    jquery在 21-93 行提供了变量 var // A central reference to the root jQuery(document) rootjQuery, // The defe ...

  7. jquery源码学习(四)—— jquery.extend()

    a.jQuery.extend( source ) b.jQuery.extend(destination, source1, source2, source3 ....) c.jQuery.exte ...

  8. jquery 源码学习(*)

    最近在做日志统计程序,发现对方的程序是在Jquery基础上进行开发的,而公司的网站的框架是prototype.而且我也早就想了解一下Jquery源码,故决定研究Jquery源码,模拟它的方法   Jq ...

  9. jquery源码学习笔记(一)jQuery的无new构建

    本人是一名.net程序员..... 你一个.net coder 看什么jQuery 源码啊? 原因吗,很简单.技多不压身吗(麻蛋,前端工作好高...羡慕). 我一直都很喜欢JavaScript,废话不 ...

  10. jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理

    jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理 最近在看jquery源码分析的视频教学,希望将视频中学到的知识用博客记录下来,更希望对有同样对jquery源码有困惑 ...

随机推荐

  1. python基础语法16 面向对象3 组合,封装,访问限制机制,内置装饰器property

    组合: 夺命三问: 1.什么是组合? 组合指的是一个对象中,包含另一个或多个对象. 2.为什么要用组合? 减少代码的冗余. 3.如何使用组合? 耦合度: 耦: 莲藕 ---> 藕断丝连 - 耦合 ...

  2. N种自动化测试框架(包含自动化和性能,总有一款适合你)

    不知不觉,分享的框架已经6个了(准确说应该是4个),仅仅是接口的. 这些框架都是最基础的框架,需要根据实际使用场景进行完善,大家就当练手实践吧. 不需要写代码的自动化框架 JMeter + Ant+ ...

  3. serverless 如何调试(三)

    在上篇文章中,我们讲解了如何调用我们的hello-world应用,只需要使用命令: serverless invoke -f hello -l ,但是我们总不可能修改一次代码,就调用一下这个命令吧,或 ...

  4. 【oracle】decode函数

    DECODE(参数,值1,翻译值1,值2,翻译值2,...值n,翻译值n,缺省值) 值1:当参数=值1    翻译值1:想要得到的值 值2:当参数=值2 翻译值2:想要得到的值

  5. org.apache.hadoop.util.Shell demo/例子

    package cn.shell; import java.io.IOException; import org.apache.hadoop.util.Shell; public class Shel ...

  6. Pandas | 08 重建索引

    重新索引会更改DataFrame的行标签和列标签. 可以通过索引来实现多个操作: 重新排序现有数据以匹配一组新的标签. 在没有标签数据的标签位置插入缺失值(NA)标记. import pandas a ...

  7. 操作excel文件爬取nvd.nist数据

    #!/usr/bin/env python # encoding: utf-8 #@author: jack import random from time import sleep import p ...

  8. PATA1031 Hello World for U

    参考代码: #include <cstdio> #include <cstring> int main() { char str[100], ans[40][40]; scan ...

  9. scp 文件 : /目录: Permission denied

    Q: A: 进入目录,用root登录,修改权限为777 再进行上传即可:

  10. 第9课 C++异常处理机制

    一. 回顾C++异常机制 (一)概述 1. 异常处理是C++的一项语言机制,用于在程序中处理异常事件(也被称为导常对象). 2. 异常事件发生时,使用throw关键字抛出异常表达,抛出点称为异常出现点 ...