正文 

当前位置： 首页 > java > java教程

javascript跟aaron大神学习jquery源码笔记

     2022-03-18     667

关键词：

/*
通过new操作符构建一个对象，一般经过四步：

A.创建一个新对象

B.将构造函数的作用域赋给新对象（所以this就指向了这个新对象）

C.执行构造函数中的代码

D.返回这个新对象

最后一点就说明了，我们只要返回一个新对象即可。
其实new操作符主要是把原型链跟实例的this关联起来，这才是最关键的一点，
所以我们如果需要原型链就必须要new操作符来进行处理。否则this则变成window对象了。
*/

/*
var $$ = ajQuery = function(selector) {
　　this.selector = selector;
　　return this
}
ajQuery.fn = ajQuery.prototype = {
　　selectorName:function(){
　　　　return this.selector;
　　},
　　constructor: ajQuery
}
var a = new $$(‘aaa‘); //实例化
a.selectorName() //aaa //得到选择器名字

首先改造jQuery无new的格式，我们可以通过instanceof判断this是否为当前实例：

var $$ = ajQuery = function(selector) {
　　if(!(this instanceof ajQuery)){ 只要这个 构造函数 出现在实例的原型链上 那么 instanceof 就会返回true
　　　　return new ajQuery(selector);
　　}
　　this.selector = selector;
　　return this
}
 
但是注意千万不要像下面这样写：

var $$ = ajQuery = function(selector) {
　　this.selector = selector;
　　return new ajQuery(selector);
}
Uncaught RangeError: Maximum call stack size exceeded
这样会无限递归自己，从而造成死循环并且溢出。

jQuery为了避免出现这种死循环的问题，采取的手段是把原型上的一个init方法作为构造器

var $$ = ajQuery = function(selector) {
//把原型上的init作为构造器
　　return new ajQuery.fn.init( selector );
}

ajQuery.fn = ajQuery.prototype = {
　　name: ‘aaron‘,
　　init: function() {
　　　　console.log(this)
　　},
　　constructor: ajQuery
}

这样确实解决了循环递归的问题，但是又问题来了，
init是ajQuery原型上作为构造器的一个方法，那么其this就不是ajQuery了，
所以this就完全引用不到ajQuery的原型了，
所以这里通过new把init方法与ajQuery给分离成2个独立的构造器。


静态与实例方法共享设计
保留上一节分割出2个构造器的疑问，我们先看看jQuery在接口的设计：

遍历方法：

$(".aaron").each() //作为实例方法存在
$.each() //作为静态方法存在
这是最常见的遍历方法，第一条语句是给有指定的上下文调用的，
就是(".aaron")获取的DOM合集，第二条语句$.each()函数可用于迭代任何集合，
无论是“名/值”对象（JavaScript对象）或数组。
在迭代数组的情况下，回调函数每次都会传递一个数组索引和相应的数组值作为参数。
本质上来说2个都是遍历，那么我们是不是要写2个方法呢？

我们来看看jQuery的源码：

jQuery.prototype = {
　　each: function( callback, args ) {
　　　　return jQuery.each( this, callback, args );
　　}
}
实例方法取于静态方法，换句话来说这是静态与实例方法共享设计，
静态方法挂在jQuery构造器上，原型方法挂在哪里呢？

我们上节不是讲了内部会划分一个新的构造器init吗？
jQuery通过new原型prototype上的init方法当作构造器，
那么init的原型链方法就是实例的方法了，
所以jQuery通过2个构造器划分2种不同的调用方式一种是静态，一种是原型。

方法是共享的，并且实例方法取于静态方法，2个构造器是完全隔离的 ,这个要如何处理？

看看jQuery给的方案：

画龙点睛的一处init.prototype = jQuery.fn，把jQuery.prototype原型的引用赋给jQuery.fn.init.prototype的原型，
这样就把2个构造器的原型给关联起来了。

ajQuery.fn = ajQuery.prototype = {
　　name: ‘aaron‘,
　　init: function(selector) {
　　　　this.selector = selector;
　　return this;
　　},
　　constructor: ajQuery
}
ajQuery.fn.init.prototype = ajQuery.fn
这段代码就是整个结构设计的最核心的东西了，有这样的一个处理，整个结构就活了！
不得不佩服作者的设计思路，别具匠心。
通过原型传递解决问题，把jQuery的原型传递给jQuery.prototype.init.prototype。
换句话说jQuery的原型对象覆盖了init构造器的原型对象，因为是引用传递所以不需要担心这个循环引用的性能问题。

*/

























html学习笔记javascript（面向对象）

现在让我们继续跟着大神的脚步前进学习一下JavaScript中的面向对象的思想，其实作为一个iOS开发者，对面向对象还是比较熟悉的，但是昨晚看了一下Js中的面向对象，妈蛋一脸萌比啊。还好有大神。让我们跟着大神的思路在捋一... 查看详情

知乎转载机器学习数据挖掘如何进阶成为大神？

...s://www.zhihu.com/question/37256015/answer/85198013来源：知乎我不是大神。背景：某二本院校大四学生；说一说自己的学习经历吧。不知道能不能对题主有所帮助。跟大多数人一样，是从AndrewNg大神的coursera课程接触到机器学习。在学那门... 查看详情

动画补充

<scripttype="text/javascript">$("#exec").click(function(){varv=$("#animation").val();var$aaron=$("#aaron");if(v=="1"){//观察每一次动画的改变$aaron.animate({height:‘50‘},{duration:2000,//每一个动画都会调用step:func 查看详情

转载自网络大神(代码片段)

...文件提供参考下载第一节jQuery初步认知jQuery概述JQuery概念javascript概念基于Js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素JQuery概念基于javascript的，同上，提高了代码的效率jQuery是什么:是一个javas... 查看详情

javascript的简单学习

JavaScript介绍　　JavaScript跟java没半毛钱关系　　JavaScript有三部分组成：ECMAScript，documentobjectmodel，broswerobjectmodel　　两种引入方式，直接在body后<script></script>或者文件导入<scriptsrc=""></script>JavaScript 查看详情

记javascript的入门学习

   2016年11月25号，利用上午时间学习了JavaScript的数据类型和变量，下午就该去图书馆泡书了。   看完变量的本章节，发现我可能不能一天结束，那我就利用上午和晚上九点回来的时间完成吧。把心态调整好... 查看详情

javascript学习总结第一天

javascript基础知识一.javascript的特点浏览器脚本语言,可以跟html代码进行混排跨平台性能优越,可以再windows.linux上进行编写安全性好兼容性好二.javascrpt有三大学习目标特效表单验证ajax三.javascript基础语法javascript使用场景有四种script... 查看详情

javascript【ver2】可视范囲に入ってたらfadein※要jquer(代码片段)

查看详情

jquer事件，选择器，dom操作

一、jQuery简介jQuery是一个 JavaScript库。（其实就是js,就是封装了，语法上有些不一样）jQuery极大地简化了JavaScript编程。jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。$：jQuery标识符二、jQuery选择器1.基本选择器... 查看详情

javascript进阶--慕课网学习笔记

            JAVASCRIPT—进阶篇给变量取个名字(变量命名)变量名字可以任意取，只不过取名字要遵循一些规则:1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号... 查看详情

javascript学习三

//imooc.comjs给变量取个名字(变量命名)我们为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。我们赶快给变量取个好名字吧!变量名字可以任意取，只不过取名字要遵循一些规则:1.必须... 查看详情

java小白入门200例105之javaarraylist类

...世隐简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！引言很多Java初学... 查看详情

java小白入门200例98之java异常

...世隐简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！引言很多Java初学... 查看详情

java小白入门200例107之javalinkedlist类

...世隐简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！引言很多Java初学... 查看详情

java小白入门200例100之trycatchfinally语句

...世隐简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！引言很多Java初学... 查看详情

java小白入门200例102之自定义异常

...世隐简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！引言很多Java初学... 查看详情

向大神学习的方法和上限

向大神们学什么？??技术领域有很多人被“封神”，同时引来诸多的学习者。首先我非常赞赏这种学习的态度和方法，同时我想用自己“朝圣”的经历提醒一下通路人，大神们的有些特点是我永远掌握不了的。大神能力的解剖??... 查看详情

java小白入门200例103之异常处理的规则

...世隐简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！引言很多Java初学... 查看详情