看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. windows 环境和linux环境下 ping命令的区别:

    Ping 是Windows自带的一个DOS命令.利用它可以检查网络是否能够连通,用好它可以很好地帮助我们分析判定网络故障.该命令可以加许多参数使用,键入Ping按回车即可看到详细说明.Ping 命令可 ...

  2. 关于pl/sql数据库下拉中选项为空的问题

    1.可能是在配置环境变量TNS_ADMIN的时候后面多了一个分号,去掉分号就可以了

  3. 深入理解OAuth2.0协议

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...

  4. nginx-(/usr/local/nginx)配置编译

    ./configure \ --prefix=/usr/local/nginx \ --sbin-path=/usr/local/nginx/sbin/nginx \ --conf-path=/usr ...

  5. MySQL操作使用

    这只是一些简单的数据库命令,作为新手记录一下,以供后面查询使用. 查询服务器版本号和当前日期: select version(), current_date; 一个命令通常用一个SQL语句组成,后面跟 ...

  6. 免费开源分布式系统日志收集框架 Exceptionless

    前言 从去年就答应过Eric(Exceptionless的作者之一),在中国会帮助给 Exceptionless 做推广,但是由于各种原因一直没有做这件事情,在此对Eric表示歉意.:) Except ...

  7. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  8. 剑指Offer面试题:27.最小的k个数

    一.题目:最小的k个数 题目:输入n个整数,找出其中最小的k个数.例如输入4.5.1.6.2.7.3.8这8个数字,则最小的4个数字是1.2.3.4. 这道题是典型的TopK问题,其最简单的思路莫过于 ...

  9. OOAD利器之UML基础

    UML:Unified Modeling Language,即统一建模语言,简单地说就是一种有特殊用处的语言.本文是我初步学习UML的学习笔记,对于我们菜鸟码农来说,让我们做设计的可能性不大,但至少能 ...

  10. .NET中异常处理的最佳实践(译)

    本文翻译自CodeProject上的一篇文章,原文地址. 目录 介绍 做最坏的打算 提前检查 不要信任外部数据 可信任的设备:摄像头.鼠标以及键盘 “写操作”同样可能失效 安全编程 不要抛出“new ...