位置: 编程技术 - 正文

实例详解jQuery的无new构建(jquery教程与例子)

编辑:rootadmin

推荐整理分享实例详解jQuery的无new构建(jquery教程与例子),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery简单例子,jquery简单例子,jquery代码实例,jquery的用处,jquery的用处,简述jquery的常用方法,简述jquery的常用方法,简述jquery的常用方法,内容如对您有帮助,希望把文章链接给更多的朋友!

jQuery的无new构建

jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作、

回想一下使用 jQuery 的时候,实例化一个 jQuery 对象的方法:

大部分人使用 jQuery 的时候都是使用第一种无 new 的构造方式,直接 $('') 进行构造,这也是 jQuery 十分便捷的一个地方。

当我们使用第一种无 new 构造方式的时候,其本质就是相当于 new jQuery(),那么在 jQuery 内部是如何实现的呢?看看:

没看懂?没关系,我们一步一步分析。

函数表达式和函数声明

在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符: 

所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函数声明还是函数表达式呢?

ECMAScript是通过上下文来区分的,如果function foo(){}是作为赋值表达式的一部分的话,那它就是一个函数表达式,

如果function foo(){}被包含在一个函数体内,或者位于程序的最顶部的话,那它就是一个函数声明。

还有一种函数表达式不太常见,就是被括号括住的(function foo(){}),他是表达式的原因是因为括号 ()是一个分组操作符,它的内部只能包含表达式

再来看jQuery源码:

可以将上面的代码结构分成两部分:(function(){window, undefined}) 和 (window) ,

第1个()是一个表达式,而这个表达式本身是一个匿名函数,

所以在这个表达式后面加(window)就表示执行这个匿名函数并传入参数window。

原型 prototype

认识一下什么是原型?

在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承,JavaScript的对象中都包含了一个" [[Prototype]]"内部属性,这个属性所对应的就是该对象的原型。

对于"prototype"和"__proto__"这两个属性有的时候可能会弄混,"Person.prototype"和"Person.__proto__"是完全不同的。

在这里对"prototype"和"__proto__"进行简单的介绍:

1.对于所有的对象,都有__proto__属性,这个属性对应该对象的原型

2.对于函数对象,除了__proto__属性之外,还有prototype属性,当一个函数被用作构造函数来创建实例时,该函数的prototype属性值将被作为原型赋值给所有对象实例(也就是设置实例的__proto__属性)

闭包

闭包的定义:

当一个内部函数被其外部函数之外的变量引用时,就形成了一个闭包。

闭包的作用:

在了解闭包的作用之前,我们先了解一下 javascript中的GC机制:

在javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收,否则这个对象一直会保存在内存中。

在上述例子中,B定义在A中,因此B依赖于A,而外部变量 c 又引用了B, 所以A间接的被 c 引用,

也就是说,A不会被GC回收,会一直保存在内存中。为了证明我们的推理,看如下例子:

count是A中的一个变量,它的值在B中被改变,函数B每执行一次,count的值就在原来的基础上累加1。因此,A中的count一直保存在内存中。

这就是闭包的作用,有时候我们需要一个模块中定义这样一个变量:希望这个变量一直保存在内存中但又不会“污染”全局的变量,这个时候,我们就可以用闭包来定义这个模块

在看jQuery源码:

我们知道了 什么是闭包:当一个内部函数被其外部函数之外的变量引用时,就形成了一个闭包。

jQuery.fn的init 函数被jQuery 的构造函数调用了,这里形成了一个闭包。构造函数及调用代码:

问题关键来了。

如何实现无new构建

JavaScript是函数式语言,函数可以实现类,类就是面向对象编程中最基本的概念

实例详解jQuery的无new构建(jquery教程与例子)

这是常规的使用方法,显而易见jQuery不是这样玩的

要实现这样,那么jQuery就要看成一个类,那么$()应该是返回类的实例才对

按照jQuery的抒写方式

要实现这样,那么jQuery就要看成一个类,那么$()应该是返回类的实例才对

所以把代码改一下:

通过new aQuery(),虽然返回的是一个实例,但是也能看出很明显的问题,死循环了!

那么如何返回一个正确的实例?

在javascript中实例this只跟原型有关系

那么可以把jQuery类当作一个工厂方法来创建实例,把这个方法放到aQuery.prototye原型中

当执行aQuery() 返回的实例:

很明显aQuery()返回的是aQuery类的实例,那么在init中的this其实也是指向的aQuery类的实例

问题来了init的this指向的是aQuery类,如果把init函数也当作一个构造器,那么内部的this要如何处理?

因为this只是指向aQuery类的,所以aQuery的age属性是可以被修改的。

这样看似没有问题,其实问题很大的

为什么是new jQuery.fn.init?

看如下代码:

当我调用 传入"a"的时候,修改age=,及aQuery("a").age 的值为

但是当我 传入"b"的时候 并没又修改 age的值,我也希望得到默认age的值,但是aQuery("b").age 的值为.

因为在 调用aQuery("a").age 的时候age被修改了。

这样的情况下就出错了,所以需要设计出独立的作用域才行。

jQuery框架分隔作用域的处理

很明显通过实例init函数,每次都构建新的init实例对象,来分隔this,避免交互混淆

我们修改一下代码:

又出现一个新的问题,

age :undefined,

name() :抛出错误,无法找到这个方法,所以很明显new的init跟jquery类的this分离了

怎么访问jQuery类原型上的属性与方法?

做到既能隔离作用域还能使用jQuery原型对象的作用域呢,还能在返回实例中访问jQuery的原型对象&#;

实现的关键点

我们再改一下:

最后在看一下jQuery源码:

是不是明白了?

哈哈哈~~~

在简单说两句:

大部分人初看 jQuery.fn.init.prototype = jQuery.fn 这一句都会被卡主,很是不解。但是这句真的算是 jQuery 的绝妙之处。理解这几句很重要,分点解析一下:

1)首先要明确,使用 $('xxx') 这种实例化方式,其内部调用的是 return new jQuery.fn.init(selector, context, rootjQuery) 这一句话,也就是构造实例是交给了 jQuery.fn.init() 方法取完成。

2)将 jQuery.fn.init 的 prototype 属性设置为 jQuery.fn,那么使用 new jQuery.fn.init() 生成的对象的原型对象就是 jQuery.fn ,所以挂载到 jQuery.fn 上面的函数就相当于挂载到 jQuery.fn.init() 生成的 jQuery 对象上,所有使用 new jQuery.fn.init() 生成的对象也能够访问到 jQuery.fn 上的所有原型方法。

3)也就是实例化方法存在这么一个关系链

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

2.new jQuery.fn.init() 相当于 new jQuery() ;

3.jQuery() 返回的是 new jQuery.fn.init(),而 var obj = new jQuery(),所以这 2 者是相当的,所以我们可以无 new 实例化 jQuery 对象。

总结

标签: jquery教程与例子

本文链接地址:https://www.jiuchutong.com/biancheng/384119.html 转载请保留说明!

上一篇:jQuery树形控件zTree使用小结(html5 树形控件)

下一篇:jQuery 获取页面li数组并删除不在数组中的key(jquery获取页面元素)

  • 如何做进项税额转出,又认证不了发票
  • 接受捐赠手续
  • 结转代扣社会保险费分录
  • 已过期增值税专票怎么开
  • 建筑业统一发票税率多少
  • 一般纳税人取得普票会计分录
  • 贷款利息进项税额
  • 进料料件内销账务处理怎么做?
  • 委托开发的软件产品即征即退
  • 增值税普通发票和电子普通发票的区别
  • 流转税通俗举例
  • 水利建设基金的缴费基数是什么
  • 广告传媒公司的名字
  • 整体购买企业资产涉及哪些税
  • 劳务报酬所得的收入额
  • 买一赠一怎么确定真假
  • 公司注销时存货计税依据
  • 公司参展费取得发票怎样做账?
  • 公司缴纳社保部分从个人扣除 犯法吗
  • 自然人税收管理系统扣缴客户端app
  • 抄报税失败是怎么回事
  • 其他应付款如何做账
  • 小规模纳税人开票额度
  • win10数字雨
  • win10应用显示模糊发虚
  • 家里的无线网连着连着就断了
  • 小规模纳税人如何缴纳企业所得税
  • windows11永久解决蓝屏
  • php中常用的数组是什么
  • win7系统怎么重装win10系统
  • ati2mdxx.exe是什么进程 ati2mdxx进程信息查询
  • 怎么绕开中介找到房主
  • 半月湾在哪
  • 图文详解:台盆柜安装的全过程
  • 预支员工报销费用会计科目
  • 酒店的原材料和包装
  • 悉尼奥林匹克公园
  • 外汇申报中付款什么意思
  • php连接不上数据库sql
  • 基于javaweb是什么意思
  • 原生js获取document
  • php考试时间倒计时
  • 房屋租赁公司装修要求
  • 怎么查看代理记账协议终止情况
  • 报废的固定资产清理的净损失计入营业外支出
  • 预算会计年末怎么结账
  • 织梦是什么框架开发的
  • 出口免税免的是哪部分的税
  • 发票无法收回会计分录
  • 售后租回融资租赁帐务处理怎么做?
  • 个人开具工程款发票
  • 现流表与资产负债表的关系
  • 货运代理费计入什么科目
  • 金蝶软件修改凭证
  • sql cell函数
  • 发出商品的增值税
  • 总公司下的分公司破产怎么赔偿
  • 外币业务的会计分录
  • 应收账款期末余额为负数表示什么
  • 凭证摘要写错了已结账了怎么办
  • 股权投资如何记账
  • 支票有效期过期了怎么办
  • 什么叫归集和分配
  • windows10右键菜单打开太慢
  • windows需要更新吗?
  • ubuntu和window双系统
  • fedora os
  • 邮件远程控制
  • mac如何打印文件
  • linux user命令
  • cocos2dx 教程
  • vue@cli
  • javascript函数如何定义及其作用
  • js创建一个对象,里面有属性和方法
  • 使用SQLite数据库保存和处理数据
  • express常用api
  • python openfoam
  • 苗木税收政策
  • 佛山市地方税务局与国家税务局合并没有
  • 税务局发票邮寄费用谁承担
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设