看jquery源代码第一步的时候,对于jquery对象的创建就看的云里雾里,琢磨半天终于有点感觉了,在此记录下

第一种方式:

var A = function(){

return A.prototype.init();

}

A.prototype = {

init:function(){

this.age = 50;

console.log(this);

return this;

},

age:100

}

console.log(A() === new A());

1.分析下结果为什么为true

A()内部调用的是A.prototype.init()函数

new A() 内部会调用构造函数,而它的构造函数就是function(){return A.prototype.init();},同样调用的是A.prototype.init()函数

2.分析下A.prototype.init()函数返回什么

那就要看this了,判断this指向谁,我们要在函数调用的时候分析,由于它是作为原型对象的属性调用的,所以this就是原型对象A.prototype

这种创建方式,无论你调用多少次A(),他们其实都是返回的同一个对象,所以对b对象的修改会影响a对象,见下图

var a = A();

var b = A();

console.log(a.age);

console.log(b.age);

b.age = 22;

console.log(a.age);

console.log(b.age);

那么如何解决这种问题呢,接下来就讲下第二种方式,它也是jquery采用的方式

第二种方式

var A = function(){

return new A.prototype.init();//①

}

A.prototype = {

init:function(){

this.age = 50;

console.log(this);

return this;

},

age:100

}

A.prototype.init.prototype = A.prototype;//②

var a = new A();

var b = new A();

console.log(a===b);

console.log(a.age);

console.log(b.age);

b.age = 22;

console.log(a.age);

console.log(b.age);

分析下①和②

①中new A.prototype.init()主要做了三件事

创建一个空对象var obj = {};

obj对象属性_proto_指向函数A.prototype.init的prototype;

将A.prototype.init函数的this替换成obj对象,在调用A.prototype.init函数,A.prototype.init.call(obj),并返回新对象

因为①返回的对象的原型是A.prototype.init.prototype,它和A.prototype并没什么关系,为了使新返回的对象可以继承自A.prototype,所以②让A.prototype.init.prototype指向A.prototype

所以方式二即创建了实例,又保证了各自的作用域独立。

Javascript的无new构建的更多相关文章

  1. jquery源码学习笔记(一)jQuery的无new构建

    本人是一名.net程序员..... 你一个.net coder 看什么jQuery 源码啊? 原因吗,很简单.技多不压身吗(麻蛋,前端工作好高...羡慕). 我一直都很喜欢JavaScript,废话不 ...

  2. 实例详解jQuery的无new构建

    jQuery的无new构建 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 回想一下使用 jQuery 的时候,实例化一个 jQuery 对象的方法: // 无 new 构造 $( ...

  3. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  4. ajax+FormData+javascript 实现无刷新上传附件

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  7. jquery无new构建学习笔记

    当我们想要创建一个对象,我们可能使用new方法去构建一个对象,那按道理jquery也是一个对象,应该也是用new jquery()来构建呀为什么我们创建jquery对象不用new jquery()而是 ...

  8. 读艾伦的jQuery的无new构建,疑惑分析——jquery源码学习一

    背景: 有心学习jquery源码,苦于自己水平有限,若自己研究,耗时耗力,且读懂之日无期. 所以,网上寻找高手的源码分析.再经过自己思考,整理,验证.以求有所收获. 此篇为读高手艾伦<jQuer ...

  9. [工具] 解决sublime text运行javascript console无输出问题

    1.使用nodeJS在sublime text 运行javascript 下载安装nodeJS 在sublime text新建build system:tools->build system-& ...

随机推荐

  1. 关于learntorank http://qiita.com/rockhopper/items/bb3d46f01df5f6499123

    一.数据转换 如何对于训练数据做pairwise的transform,比如你原始数据是要么点击要么不点击,如何对这些样本数据做pairwise的transform? 下面的方法主要是做组合的方法,就是 ...

  2. 破除Odoo 菜单栏提示 99+

    菜单栏提示利用的menu对象的needaction_counter属性,默认只能显示99个 多于99则显示99+ 如果希望显示完整的数字,则需要改动如下两个地方. 一.menu菜单的显示限制: 将第一 ...

  3. C# 开源组件--Word操作组件DocX

    使用模版生成简历 读写表格数据 合并单元格 工具源代码下载 学习使用 使用模版生成简历 下面将以一个简历实例来讲解DocX对表格的操作,先看看生成的效果 private static void Cre ...

  4. 一鼓作气 博客--第七篇 note7

    面向对象相关知识简介 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定义 ...

  5. ecshop二次开发 购物车添加备注信息

  6. 微软借力.NET开源跨平台支持,布局物联网平台开发

    今天科技类最大的新闻,莫过于微软宣布.NET开发框架开源计划..NET 开源,集成 Clang 和 LLVM 并且自带 Android 模拟器,这意味着 Visual Studio 这个当下最好没有之 ...

  7. 基于 Jenkins 快速搭建持续集成环境

      什么是持续集成 随着软件开发复杂度的不断提高,团队开发成员间如何更好地协同工作以确保软件开发的质量已经慢慢成为开发过程中不可回避的问题.尤其是近些年来,敏捷(Agile) 在软件工程领域越来越红火 ...

  8. 一种让 IE6/7/8 支持 media query 响应式设计的方法

    在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 med ...

  9. .Net开发笔记(十七) 应用程序扩展

    在很多场合,我们需要在已有软件程序上增加一些新的功能,几乎所有原因是因为原有软件功能不能满足我们的需要,我们平时做的插件就属于这种情况,最常见的是VS IDE的插件开发,网上老外写的一篇关于插件开发的 ...

  10. ASP.NET MVC 防止 CSRF 的方法

    MVC中的Html.AntiForgeryToken()是用来防止跨站请求伪造(CSRF:Cross-site request forgery)攻击的一个措施,它跟XSS(XSS又叫CSS:Cross ...