jquery学习笔记之无new构建详解


Posted in jQuery onDecember 07, 2017

前言

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

function Jquery(selector, context) {
  return new Jquery(selector, context);
 }

 Jquery.prototype = {
  version:'1.01'
 }

直接这样内部使用new来构建Jquery,很明显是有问题的,这样的话就形成了死循环。为了解决死循环的问题,请看下面代码:

function Jquery(selector, context) {
 return Jquery.prototype.init(selector, context);
}

Jquery.prototype = {
 version:'1.01',
 init: function () {
  this.name = "lin";
  return this;
 }
}

var a = Jquery();
var b = Jquery();
console.log(a.version); //1.01
console.log(a.name); //lin
a.name = "na";
console.log(b.name); //na

死循环的问题确实解决了,但是又发现了新的问题,可以看到a和b两个对象的属性是公用的,我修改a.name属性为na,b.name属性也跟着变为了na,其原因就是this都是指向Jquery的

为了解决这个问题,我们可以每次调用Jquery()的时候都构建一个新的对象,改进代码如下:

function Jquery(selector, context) {
 return new Jquery.prototype.init(selector, context); //注意看,这里多了个new
}

Jquery.prototype = {
 version:'1.01',
 init: function () {
  this.name = "lin";
  console.log(this);
  return this;
 }
}

var a = Jquery();
var b = Jquery();
console.log(a.version); //undefined
console.log(a.name); //lin
a.name = "na";
console.log(b.name); //na

这样处理之后,属性共享的问题已经解决了,每个对象都有各自的属性,可以自由修改,每个对象互不影响,但是又又又发现了新的问题,可以看到我们控制台打印a.version这个属性的时候是读取不到这个属性的,原因就在于此时Jquery.prototypeJquery.prototype.init.prototype是互不相干的,我们创建的是Jquery.prototype.init对象,所以只能读到Jquery.prototype.init.prototype上的属性而读取不到Jquery.prototype上的属性的(该例指version这个属性),解决办法很简单,就是把Jquery.prototype赋值给Jquery.prototype.init.prototype,这样就相当于把Jquery原型上的属性全部赋值到了Jquery.init的原型上,请看下面代码:

function Jquery(selector, context) {
 return new Jquery.prototype.init(selector, context);
}

Jquery.prototype = {
 version:'1.01',
 init: function () {
  this.name = "lin";
  return this;
 }
}

Jquery.prototype.init.prototype = Jquery.prototype; //画龙点睛之笔

var a = Jquery();
var b = Jquery();
console.log(a.version); //1.01
console.log(a.name); //lin
a.name = "na";
console.log(b.name); //na

可以看到,我们控制台打印a对象的version属性,已经可以读取并且打印出来了。

至此,已经完成了Jquery的无new构建。

ps:jQuery.fn其实就是jQuery的prototype,jquery源码可以看到该条语句:jQuery.fn = jQuery.prototype = {};

$()和jquery()其实是一样的,jquery源码可以看到该条语句: window.jQuery = window.$ = jQuery;

原型 prototype

认识一下什么是原型?

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

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

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

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

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

function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.getInfo = function(){
console.log(this.name + " is " + this.age + " years old");
};
//调用
var will = new Person("Will", 28);
will.getInfo();//"Will is 28 years old"

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jQuery中的deferred使用方法
Mar 27 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jquery拖动改变div大小
Jul 04 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
详解jQuery中的easyui
Sep 02 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 #jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 #jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 #jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 #jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 #jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 #jQuery
JS和JQuery实现雪花飘落效果
Nov 30 #jQuery
You might like
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
python&MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python分治法定义与应用实例详解
2017/07/28 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
PyQt5实现简易计算器
2020/05/30 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
python eventlet绿化和patch原理
2020/11/21 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
海飞丝的广告词
2014/03/20 职场文书
食品安全责任书
2014/04/15 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
话题作文之诚信
2019/11/28 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python
python解析照片拍摄时间进行图片整理
2022/07/23 Python