当我们想要创建一个对象,我们可能使用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.prototype和Jquery.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;

jquery无new构建学习笔记的更多相关文章

  1. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  2. 锋利的jQuery第2版学习笔记8~11章

    第8章,用jQuery打造个性网站 网站结构 文件结构 images文件夹用于存放将要用到的图片 styles文件夹用于存放CSS样式表,个人更倾向于使用CSS文件夹 scripts文件夹用于存放jQ ...

  3. 锋利的jQuery第2版学习笔记6、7章

    第6章,jQuery与Ajax的应用 Ajax的优势和不足 Ajax的优势 1.不需要插件支持 2.优秀的用户体验 3.提高Web程序的性能 4.减轻服务器和带宽的负担 Ajax的不足 1.浏览器对X ...

  4. 锋利的jQuery第2版学习笔记4、5章

    第4章,jQuery中的事件和动画 注意:使用的jQuery版本为1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法,jQuery中使用$(document ...

  5. CAS(Compare and Swap)无锁算法-学习笔记

    非阻塞同步算法与CAS(Compare and Swap)无锁算法 这篇问题对java的CAS讲的非常透彻! 锁的代价 1. 内核态的锁的时候需要操作系统进行一次上下文切换,加锁.释放锁会导致比较多的 ...

  6. 网站构建学习笔记(0)——基本概念了解及资源学习(copy自w3school)

    一.学习方面 1.WWW - 万维网 什么是 WWW? WWW 指万维网(World Wide Web) 万维网常被称为Web Web 是由遍布全球的计算机所组成的网络 所有 Web 中的计算机都可以 ...

  7. 锋利的jQuery第2版学习笔记1~3章

    第1章,认识jQuery 注意:使用的jQuery版本为1.7.1 目前流行的JavaScript库 Prototype(http://www.prototypejs.org),成型早,面向对象的思想 ...

  8. jQuery 自定义事件的学习笔记

    jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件  代码如下 复制代码 ...

  9. jquery类数组结构学习笔记

    大家都知道我们使用$()产生的jquery对象可以使用下标去获取对应下标的元素. 举个栗子,一个页面有5个div标签,我们使用$("div")去获取到这些元素,然后我们就可以使用$ ...

随机推荐

  1. Centos yum源更新为阿里云

    阿里云镜像网址 http://mirrors.aliyun.com/   更新步骤 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d ...

  2. CSS 实现背景半透明

    IE过渡滤镜 + CSS3 rgba 即可完美实现. 具体实现代码如下: .transparent {     background:rgba(0, 0, 0, 0.3);     filter:pr ...

  3. Oracle V$SESSION

    SADDR session address SID session identifier 常用于链接其他列 SERIAL# SID有可能会重复,当两个session的SID重复时,SERIAL#用来区 ...

  4. 解决HTML5中placeholder属性兼容性的JQuery插件

    //调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...

  5. 算法模板——KMP字符串匹配

    功能:输入一个原串,再输入N个待匹配串,在待匹配串中找出全部原串的起始位置 原理:KMP算法,其实这个东西已经包含了AC自动机的思想(fail指针/数组),只不过适用于单模板匹配,不过值得一提的是在单 ...

  6. java设计模式--基础思想总结--父类引用操作对象

    看设计模式的相关书籍也有一段时间了,一开始其实是抱着作为java三大框架的基础知识储备来学习的,不过到后来,才发现,在设计模式的一些准则装饰下,java的面向对象威力才真正地体现出来,后面的将会陆续地 ...

  7. redis可视化客户端工具

    TreeNMS是一款redis,Memcache可视化客户端工具,采用JAVA开发,实现基于WEB方式对Redis, Memcached数据库进行管理.维护. 功能包括:NoSQL数据库的展示,库表的 ...

  8. 深入理解ES6之—符号与符号属性

    在js已有的基本类型(字符串,数值,布尔型,null和undefined)之外,es6引入了一种新的基本类型:==符号(Symbol)==.符号起初被设计用于创建对象私有成员. 符号没有字面量形式,你 ...

  9. 【Oracle RAC】Linux系统Oracle11gR2 RAC安装配置详细过程V3.1(图文并茂)

    [Oracle RAC]Linux系统Oracle11gR2 RAC安装配置详细过程V3.1(图文并茂) 2 Oracle11gR2 RAC数据库安装准备工作2.1 安装环境介绍2.2 数据库安装软件 ...

  10. Github+HEXO FATAL bad indentation of a mapping entry at line 84

    当配置玩_config.yml文件时,执行hexo g -d时出现错误如下: $ hexo g -d FATAL can not read a block mapping entry; a multi ...