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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jquery的 filter()方法使用教程
Mar 22 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
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python实现上传下载文件功能
2020/11/19 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
详解Python的三种拷贝方式
2020/02/11 Python
python上selenium的弹框操作实现
2020/07/13 Python
python pip如何手动安装二进制包
2020/09/30 Python
Python截图并保存的具体实例
2021/01/14 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
工作表现评语
2014/01/19 职场文书
协议书范本
2014/04/23 职场文书
工商管理本科生求职信
2014/07/13 职场文书
地震捐款倡议书
2014/08/29 职场文书
2014年保育员工作总结
2014/12/02 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS