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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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开启gzip页面压缩实例代码
2010/03/11 PHP
php 获取本机外网/公网IP的代码
2010/05/09 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
python实现简单的购物程序代码实例
2020/03/03 Python
python小白切忌乱用表达式
2020/05/29 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
关于人生的感言
2014/01/17 职场文书
五年级科学教学反思
2014/02/05 职场文书
职工运动会感言
2014/02/07 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
个园导游词
2015/02/04 职场文书
质量整改通知单
2015/04/21 职场文书
毕业典礼主持词
2015/06/29 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
2016年十一促销广告语
2016/01/28 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js