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 相关文章推荐
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 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的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
jQuery实现两列等高并自适应高度
2016/12/22 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
Python合并多个Excel数据的方法
2018/07/16 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python如何制作英文字典
2019/06/25 Python
python实现拼图小游戏
2020/02/22 Python
pandas分组聚合详解
2020/04/10 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
Python是如何进行类型转换的
2013/06/09 面试题
民主评议党员自我鉴定
2014/10/21 职场文书
李强为自己工作观后感
2015/06/11 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏
JavaScript设计模式之原型模式详情
2022/06/21 Javascript