javaScript的无new构建,jquery源码对象构建方法

jQuery源码--小白入门之extend源码详细解读 jQuery源码--小白入门jQuery源码---分析常用知识点原理一. JQeury如何无new化构建实例 jQuery源码—分析常用知识点原理 *第一次写问章,有任何问题及时提出来哦!!!_ **话不多说,接下来进入正题: 一. JQeury如何无new化构建实例 //引入自写的jQuery.js文件 //在html中 console.log($) (function(root){ ... 阅读详情

jQuery源码对象构建方法:

 

第一种方式:

var A = function(){

return A.prototype.init();

}

 

A.prototype = {

init:function(){

this.age = 50;

console.log(this);

return this;

},

age:100

}

 

console.log(A() === new A());

 

 

1.分析下结果为什么为true

A()内部调用的是A.prototype.init()函数

new A() 内部会调用构造函数,而它的构造函数就是function(){return A.prototype.init();},同样调用的是A.prototype.init()函数

2.分析下A.prototype.init()函数返回什么

那就要看this了,判断this指向谁,我们要在函数调用的时候分析,由于它是作为原型对象的属性调用的,所以this就是原型对象A.prototype

这种创建方式,无论你调用多少次A(),他们其实都是返回的同一个对象,所以对b对象的修改会影响a对象,见下图

 

var a = A();

var b = A();

console.log(a.age);

console.log(b.age);

b.age = 22;

console.log(a.age);

console.log(b.age);

 

 

那么如何解决这种问题呢,接下来就讲下第二种方式,它也是jquery采用的方式

 

第二种方式

var A = function(){

return new A.prototype.init();//①

}

 

A.prototype = {

init:function(){

this.age = 50;

console.log(this);

return this;

},

age:100

}

A.prototype.init.prototype = A.prototype;//②

 

var a = new A();

var b = new A();

console.log(a===b);

console.log(a.age);

console.log(b.age);

b.age = 22;

console.log(a.age);

console.log(b.age);

 

 

分析下①和②

①中new A.prototype.init()主要做了三件事

创建一个空对象var obj = {};

obj对象属性_proto_指向函数A.prototype.init的prototype;

将A.prototype.init函数的this替换成obj对象,在调用A.prototype.init函数,A.prototype.init.call(obj),并返回新对象

因为①返回的对象的原型是A.prototype.init.prototype,它和A.prototype并没什么关系,为了使新返回的对象可以继承自A.prototype,

所以②让A.prototype.init.prototype指向A.prototype

所以方式二即创建了实例,又保证了各自的作用域独立。


原文地址:http://top.caibaojian.com/t?url=http://www.cnblogs.com/tao0622/p/5490233.html

jquery.new:轻量级插件,可创建并返回准备就绪的jQuery元素 jQuery.new 返回一个新的jQuery元素的实用程序准备好了2 go var $e = $.new(settings) 设定值 settings: { tag: 'h2', // default is div class: 'app-subhead', id: 'subheading', data: 'data-something', data: { data-something: 'true' }, // or pass an attribute key/value html: 'The contents of your element's innerHTML!' } 立即下载

相关推荐

jQuery的初始化与对象构建之浅析

小结一下: 1.整个类库定义在一匿名函数中,杜绝了全局变量的产生; 2.将undefined 作为缺失的参数传递,防止了undefined 变量的污染; 3.可以看出$(…) 实际上返回的是jQuery.fn.init 对象的实例,随后将该对象的prototype 指向了jQuery.prototype (语句jQuery.fn.init.prototype = jQuery.fn),因此产生的实例共享着jQuery.prototype 里的方法和属性且实现了链式编程的操作; 4.最后通过window.jQuery = window.$ = jQuery 将jQuery 与$ 导出为全局变量。

JQuery的常用方法

val 取值 html 获取元素内容,如果有子元素,保留标签 text 获取元素内容,如果有子元素,不包含子元素标签 文章目录取值val()获取元素内容html()获取元素text() 取值val() 相当于document.getElementById("input").value; <script scr="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(...

lolhahahaha的博客 314

千兆以太网PHY设计:PCB原理图完整示例

深入解析千兆以太网PHY电路设计要点,提供完整的PCB原理图设计实例,帮助工程师掌握高速信号布局与电源去耦等关键技术,提升设计稳定性与信号完整性。

weixin_30633869的博客 634

var a = {}以及var a = function(){}以及function(){}理解

一、var a = {}的理解 var a = {};这是声明的一个没有任何属性的对象 var a = {name:'跳跳'};这是一个声明带name属性的对象,属性名为name 属性值为跳跳 取值的时候为alert(a.name); 二、var a = function(){ }的理解 var a = function() { }是一个函数表达式,需要按照顺序进行执行。 值: 将执行方法的顺序改一下 就会报错了: 就会提示不是一个function的函数。 总结:var aa = functi

u011402106的博客 6363

three.js开发3D地图记录(二)

添加地图点击事件,点击区域,地图区域改变颜色并浮起来。

anwebDesigner的博客 1694

yakit 验证码识别 进行webfuzzer

在渗透测试的过程中,我们可能需要对管理员密码进行枚举,或者密码喷洒的时候,遇到验证码就很烦。有没有自动化识别验证码的办法呢?有的,兄弟,有的。验证码的识别率很低,captcha-killer-modified对算术验证码识别正确率非常低,还会识别成乱七八糟的结果,这就非常麻烦。因为你不知道到底是验证码不对,还是密码不对。这是 ddddocr 识别率的问题,如果师傅们找到准确度更高的工具,完全可以替换上去。

Arkmornings的博客 1668

jQuery源码解读-jQuery是如何实现无new操作的

function $(){} var _$=new $(); 我们看_$如下 构造函数有return值,返回的对象是什么? 如果构造函数没有return.则返回实例对象this; 如果构造函数有return,则分两种情况? return的是五种简单数据类型:String,Number,Boolean,Null,Undefined。这种情况下,忽视return值,依然返回this对象。 return的是Object这种情况下,不再返回this对象,而是返回return语句的返回值。 重点理解有re

weixin_38982114的博客 351

父子Agent架构:解决AI系统上下文污染的技术方案

在AI系统设计中,上下文管理是核心挑战之一。传统单Agent架构在处理复杂任务时,常面临上下文无限膨胀导致的信息淹没和性能下降问题。父子Agent架构通过职责分离和上下文隔离机制,采用分而治之的思想,将大任务拆解为多个子任务由专门子Agent处理。该架构中父Agent负责任务规划和结果汇总,子Agent执行具体任务后立即销毁中间状态,通过精炼摘要进行通信。这种设计不仅能有效控制上下文长度,还能提升系统稳定性和执行效率,特别适用于编程辅助、自动化测试等需要多步骤处理的场景。父子Agent架构体现了计算机科学中

weixin_42531710的博客 353

不需要new关键字创建实例?jQuery是如何做到的

这篇文章是jQuery源码专栏的开篇文章了,有人会问为什么都2024年了, 还要研究一个已经过时的框架呢,其实,jQuery对比vue和react这种响应式框架,其在使用上算是过时的,毕竟直接操作DOM远不如操作虚拟DOM来的方便,但是jQuery的框架设计和对于操作的封装以及浏览器的兼容这些,太值得我们去学习了。

Mu_Soul的博客 408

WSL2不能上网,Failed to connect to github.com port 443问题解决方案

WSL2不能上网: 问题:ping外网无效 例如:ping www.baidu.com失败 解决方案: 在wsl: $sudo vi /etc/wsl.conf wsl.conf: [network] generateResolvConf = false 在PowerShell: $sudo vi /etc/etc/resolv.conf resolv.conf: # This file was automatically generated by WSL. To stop automatic gen

Jason_Chen__的博客 9527

VCS NLP 低功耗验证系列(六):功耗分析与优化——SAIF 报告与验证效率提升

本文是VCS NLP低功耗验证系列的第六篇,主要解决功耗数据采集和验证效率优化问题。文章首先介绍了SAIF(Switching Activity Interchange Format)文件在功耗分析中的作用,详细讲解了VCS的Region-Based SAIF功能,包括三个关键系统任务($saif_region_create、$saif_region_exclude、$saif_region_monitor)的使用方法和工程实践建议。接着从编译侧、运行侧和方法学侧三个维度提出了NLP验证效率优化策略,特别强

元直的博客 473

一个小时学会jQuery<最通俗易懂的讲解>

最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美。 其结构明晰,高内聚、低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷、渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外,阅读...

chetianyao8457的博客 1766

python-pandapower电力系统潮流计算(算例8:ieee33节点潮流计算))

python-pandapower电力系统潮流计算(算例8:ieee33节点潮流计算))

总裁余(余登武)博客 5034

jquery无new构建学习笔记

当我们想要创建一个对象,我们可能使用new方法去构建一个对象,那按道理jquery也是一个对象,应该也是用new jquery()来构建呀为什么我们创建jquery对象不用new jquery()而是直接使用类似$(ele)的方式去构建出来一个jquery对象呢?其实内部还是使用了new来构建的,只是jquery内部帮我们构建了而已,请看下面代码function Jquery(selector, ...

dp83166019po的博客 306

某城商银行生产容器云平台详细设计方案分享及经验总结

AS3模式的CIS容器部署在K8S集群内,作为F5的控制器,CIS容器通过对K8S集群内Configmap资源进行监控,将Configmap资源中的内容转化为F5的配置,将配置推送给 F5 ,CIS容器还通过K8S标准的API接口完成业务发现和实时监听集群内Pod的变化,一旦Pod发生变化,相应的更新会及时推送给F5,并完成更新。容器技术发展非常迅速,现在应用大多以容器作为承载介质,前两年在容器云上承载的应用类型主要是Web类,随着容器云领域的不断发展,越来越多的应用类型将迁移至容器云,包括有状态应用。

qq_61890005的博客 858

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

jQuery 2.0.3 源码分析core - 整体架构

jQuery 2.0.3 源码分析core - 整体架构 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧!github上最新是jquery-master,加入了AMD

leadn的博客 362

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

jQuery 源码分析core - 整体架构

拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准   整体架

wo240的专栏 358

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

分析一:jQuery的无new构建

JavaScript是函数式语言,函数可以实现类,类就是面向对象编程中最基本的概念 var aQuery = function(selector, context) { //构造函数 } aQuery.prototype = { //原型 name:function(){}, age:function(){} } var a = new aQue

LONGSHAN123456789的博客 947

jQuery源码中的“new jQuery.fn.init()”什么意思?

引子 最近打算试试看看jQuery的源码,刚开个头就卡住了。无论如何都理解不了jQuery源码入口部分中的 return new jQuery.fn.init( selector, context ) 看了好多帖子都没看懂,觉得自己很蠢,心里很苦,吃宵夜都不香了。昨晚去游泳,游完8*100后靠在池壁上喘气,有人从我旁边出发,水花溅起的瞬间,我突然,想通了!这大概就是回光返照...

bangwencai0604的博客 218

jQuery源码之创建jQuery对象

转自:http://nuysoft.iteye.com/blog/1182087 源码结构 先看看总体结构,再做分解: (function( window, undefined ) {         var jQuery = (function() {        // 构建jQuery对象        var jQuery = function( se

luckyyulin的专栏 1万+

读艾伦的jQuery的无new构建,疑惑分析——jquery源码学习一

背景: 有心学习jquery源码,苦于自己水平有限,若自己研究,耗时耗力,且读懂之日无期。 所以,网上寻找高手的源码分析。再经过自己思考,整理,验证。以求有所收获。 此篇为读高手艾伦《jQuery 2.0.3 源码分析core - 整体架构》后所作,万分感谢作者。 材料: 1.原文地址 2.jquery版本: jquery2.0.3(我用的是jq...

angmiehuo9436的博客 169

jQuery-源码阅读,init()方法

查看jQuery源码可以发现,jQuery中没有使用new操作符来创建新对象,而是采用调用jQuery原型中init()函数的方式返回一个新对象。 1.首先简单回忆下JavaScript中的原型。 我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么prototy

柒青衿的博客 7629

[js]小谈 new

最近在看jQuery源码的时候看到这样一段代码://DefinealocalcopyofjQueryjQuery=function(selector,context){//ThejQueryobjectisactuallyjusttheinitconstructor'enhanced'returnne...

A5656665656556的博客 136

jquery-cropper源码解析:深入理解插件实现原理

jquery-cropper是一款基于Cropper.js的jQuery插件封装,它为开发者提供了简洁易用的图片裁剪功能。本文将深入剖析其源码结构与实现原理,帮助开发者理解如何将原生JavaScript库封装为jQuery插件,并掌握其中的核心技术点。 ## 插件架构概览 jquery-cropper的核心实现集中在[src/index.js](https://link.gitcode.com

gitblog_00461的博客 520
上一篇: 浏览器 HTTP 协议缓存机制详解
下一篇: 从url获取指定参数值,获取当前url上下文
五月西瓜
博客等级 码龄12年 4粉丝 28原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值