【转】理解Javascript 系列

理解Javascript_13_执行模型详解

摘要: 在《理解Javascript_12_执行模型浅析》一文中,我们初步的了解了执行上下文与作用域的概念，那么这一篇将深入分析执行上下文的构建过程，了解执行上下文、函数对象、作用域三者之间的关系。函数执行环境简单的代码:当调用say方法时，第一步是创建其执行环境，在创建执行环境的过程中，会按照定义的先后顺序完成一系列操作:1.首先会创建一个'活动对象'(Activation Object)。活动对象是规... 阅读全文

posted @  2010-10-19 05:13 笨蛋的座右铭 阅读(4271) |  评论 (4)  编辑

 

理解Javascript_15_作用域分配与变量访问规则,再送个闭包

摘要: 在阅读本博文之前，请先阅读《理解Javascript_13_执行模型详解》在'执行模型详解'中讲到了关于作用域分配的问题，这一篇博文将详细的说明函数对象、作用域链与执行上下文的关系。作用域分配与变量访问规则　　在 ECMAScript 中，函数也是对象。函数对象在变量实例化过程中会根据函数声明来创建，或者是在计算函数表达式或调用 Function 构造函数时创建。(关于'函数对象'请见《理解Jav... 阅读全文

posted @  2010-10-19 04:42 笨蛋的座右铭 阅读(2893) |  评论 (14)  编辑

 

理解Javascript_14_函数形式参数与arguments

摘要: 在'执行模型详解'的'函数执行环境'一节中对arguments有了些许的了解，那么让我们深入的分析一下函数的形式参数与arguments的关系。注：在阅读本博文前请先阅读《理解javascript_13_执行模型详解》注：本文的部分内容是自已的一些推论，并无官文文档作依据，如有错误之后，还望指正。生涩的代码我们先来看一段比较生涩的代码：　　你能正确的解释代码的执行结果吗？思考一下.　　我想代码运行... 阅读全文

posted @  2010-10-19 01:49 笨蛋的座右铭 阅读(2458) |  评论 (10)  编辑

 

超越Jquery_01_isPlainObject分析与重构

摘要: isPlainObject是Jquery1.4后提供的新方法,用于判断对象是否是纯粹的对象（通过 "{}" 或者 "new Object" 创建的）。使用isPlainObject　　首先我们来了解一下什么叫'纯粹的对象'，简单的理解'纯粹的对象'指的就是由Object构造出来的对象。那哪些对象是由Object构造出来的呢。首当其充的肯定是由new Object()所构造出来的对象，注意：在Obj... 阅读全文

posted @  2010-10-17 21:10 笨蛋的座右铭 阅读(2414) |  评论 (6)  编辑

 

理解Javascript_12_执行模型浅析

摘要: 大家有没有想过，一段javascript脚本从载入浏览器到显示执行都经过了哪些流程，其执行次序又是如何。本篇博文将引出'javascript执行模型'的概念，并带领大家理解javascript在执行时的处理机制。简单的开始简单的代码：上面代码段的运行顺序是：对于step1中的'脚本段'指的是<script>... ...</script>标签中的内容，还包括外部引入的脚本文... 阅读全文

posted @  2010-10-16 23:56 笨蛋的座右铭 阅读(3598) |  评论 (4)  编辑

 

理解Javascript_11_constructor实现原理

摘要: 在理解了'对象模型'后,我们就可以看一下constructor属性是如何实现的.constructor是什么简单的理解,constructor指的就是对象的构造函数。请看如下示例：对于foo.constructor为Foo,我想应该很好理解，因为foo的构造函数为Foo。对于Foo、Object、Function的构造函数为Function,我想也没什么好争议的。（因为Foo,Object,Fun... 阅读全文

posted @  2010-10-16 16:27 笨蛋的座右铭 阅读(2967) |  评论 (19)  编辑

 

理解Javascript_10_对象模型

摘要: 什么都不想说，一段代码两张图，解释一切。注：在此之前请阅读前面的系列博文对象模型图片来自于：http://www.cnblogs.com/riccc红色虚线表示隐式Prototype链。这张对象模型图中包含了太多东西，不少地方需要仔细体会，可以写些测试代码进行验证。彻底理解了这张图，对JavaScript语言的了解也就差不多了。下面是一些补充说明:1. 图中有好几个地方提到build-in Fun... 阅读全文

posted @  2010-10-15 03:13 笨蛋的座右铭 阅读(3381) |  评论 (19)  编辑

 

理解Javascript_09_Function与Object

摘要: 在《理解Javascript_08_函数对象》中讲解了很多函数对象的问题，同时也留下了许多疑问，今天让我们来解答部分问题。注：理论过于深入，本人不改保证所有的理论都是正确的，但经过多方测试还未发现实际代码与理论冲突的问题。如有错误，望高人指点！Function　　首先回顾一下函数对象的概念，函数就是对象,代表函数的对象就是函数对象。所有的函数对象是被Function这个函数对象构造出来的。也就是说... 阅读全文

posted @  2010-10-15 02:03 笨蛋的座右铭 阅读(3389) |  评论 (16)  编辑

 

理解Javascript_08_函数对象

摘要: 如果你无法理解博文在讲什么，请回顾前面的系列博文。文章比较深入，如有不对之处，望请指正，谢谢。函数对象首先，大家得明确一个概念：函数就是对象,代表函数的对象就是函数对象。既然是对象，那它又是被谁构造出来的呢？下面我们来看一段描述:JavaScript代码中定义函数，或者调用Function创建函数时，最终都会以类似这样的形式调用Function函数:var newFun=Function(funA... 阅读全文

posted @  2010-10-14 10:38 笨蛋的座右铭 阅读(3288) |  评论 (11)  编辑

 

理解Javascript_07_理解instanceof实现原理

摘要: 在《Javascript类型检测》一文中讲到了用instanceof来用做检测类型，让我们来回顾一下:那么instanceof的这种行为到底是如何实现的呢,现在让我们揭开instanceof背后的迷雾。instanceof原理照惯例，我们先来看一段代码：让我们画一张内存图来分析一下：内存图比较复杂，解释一下：程序本身是一个动态的概念，随着程序的执行，Dog.prototype会不断的改变。但是为了... 阅读全文

posted @  2010-10-14 01:19 笨蛋的座右铭 阅读(3472) |  评论 (4)  编辑

 

理解Javascript_06_理解对象的创建过程

摘要: 在《理解Javascript_05_原型继承原理》一文中已经详细的讲解了原型链的实现原理，大家都知道原型链是基于对象创建的（没有对象,哪来原型），那么今天就来解析一下对象的创建过程。简单的代码我们先来看一段简单的代码：　　复杂的理论JS中只有函数对象（函数）具备类的概念，因此创建一个对象，必须使用函数对象。函数对象内部有[[Construct]]方法和[[Call]]方法，[[Construct]... 阅读全文

posted @  2010-10-13 21:48 笨蛋的座右铭 阅读(3657) |  评论 (12)  编辑

 

理解Javascript_05_原型继承原理

摘要: 对于面向对象的基础语法在此我就不重复了，对面向对象不熟悉的朋友可以参看《使用面向对象的技术创建高级 Web 应用程序》一文。prototype与[[prototype]]在有面象对象基础的前提下，来看一段代码：其对应的简易内存分配结构图：现在让我们来解释一下这张内存图的来龙去脉：首先明确一点[[prototype]]与prototype并不是同一个东西。　　那先来看prototype,每一个函数对... 阅读全文

posted @  2010-10-13 04:32 笨蛋的座右铭 阅读(4668) |  评论 (22)  编辑

 

理解Javascript_04_数据模型

摘要: 本文主要描述Javascript的数据模型，即对Javascript所支持的数据类型的一个全局概缆。文章比较的理论化，非常深入，因此不易理解，但务必对数据模型有一个映象，因为他是理解Javascript对象模型与Javascript执行模型的基础。基本的数据类型原始类型（简单数据类型、基本数据类型）Undefined类型：表示声明了变量但未对其初始化时赋予该变量的值。undefined为Undef... 阅读全文

posted @  2010-10-13 00:17 笨蛋的座右铭 阅读(3336) |  评论 (22)  编辑

 

Javascript提速_01_引用变量优化

摘要: 说明：为了文章的系统性，将本博文原来的两节内容放到了单独的一篇中，请见：《理解Javascript_12_执行模型浅析》引用变量优化即然我们已经了解了Javascript中变量的访问规则，那我们就来具体分析一下上面代码中alert(document.body.tagName);这一句的具体执行流程：由此可见，要在Fn2中访问window对象下的document对象的body属性的tagName属性... 阅读全文

posted @  2010-10-12 00:33 笨蛋的座右铭 阅读(3226) |  评论 (9)  编辑

 

伪数组

摘要: 这篇文章来回答javascript通用循环遍历方法forEach中最后提到的关于伪数组的问题。什么是伪数组能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。这种对象有很多，比较特别的是arguments对象，还有像调用getElementsByTagName,document.childNodes之类的，它们都返回NodeList对象都属于伪数组。我们可... 阅读全文

posted @  2010-10-09 23:46 笨蛋的座右铭 阅读(2189) |  评论 (2)  编辑

 

javascript通用循环遍历方法forEach

摘要: 上一次的错误太多，排版也出现了问题，重写了一遍，希望大家支持.循环遍历一个元素是开发中最常见的需求之一，那么让我们来看一个由框架BASE2和Jquery的结合版本吧.函数本身并不复杂，但很精巧。加了一些简单的注释，想信大家能看懂。来看一点例子注：回调函数中的index参数下标从1开始为什么不用内置的forEach和getElementsByClassName一样，内置的forEach效率很高，但是... 阅读全文

posted @  2010-10-09 17:23 笨蛋的座右铭 阅读(4029) |  评论 (3)  编辑

 

我的getElementsByClassName实现

摘要: 先来看一下代码：（支持多个class查询和在某个范围内进行查询）好，我们来测试一下：正确的得到了结果。关于class属性1.一个元素可以带有多个class属性值，它们通过空格分隔, 例：class='aa bb cc'。2.class属性值是可以包含'-'这个字符的，如:class='a-b',特别强调是因为在正则表达式中'-'是一个特殊字符。3.在javascript中通过的获取class属性值... 阅读全文

posted @  2010-10-09 11:00 笨蛋的座右铭 阅读(3210) |  评论 (10)  编辑

 

理解Javascript_03_javascript全局观

摘要: 今天让我们站在语言的高度来看一下Javascript都有点什么。因为是全局性的俯瞰，所以不针对细节作详细的讲解。先来看一张图吧：解释一下：核心（ECMAScript)：定义了脚本语言的所有对象，属性和方法文档对象模型（DOM)：HTML和XML应用程序接口浏览器对象模型(BOM)：对浏览器窗口进行访问操作现在来具体的讲一个各个成分：关于ECMAScriptECMAScript的工作是定义语法和对象... 阅读全文

posted @  2010-10-08 20:06 笨蛋的座右铭 阅读(3619) |  评论 (3)  编辑

 

理解Javascript_02_理解undefined和null

摘要: 来自普遍的回答:其实在 ECMAScript 的原始类型中，是有Undefined 和 Null 类型的。 这两种类型都分别对应了属于自己的唯一专用值，即undefined 和 null。 值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的，通过下列代码可以验证这一结论： alert(undefined == null); //true尽管这两... 阅读全文

posted @  2010-10-07 20:41 笨蛋的座右铭 阅读(3751) |  评论 (22)  编辑

 

理解Javascript_01_理解内存分配

摘要: 在正式开始之前，我想先说两句，理解javascript系列博文是通过带领大家分析javascript执行时的内存分配情况，来解释javascript原理，具体会涵盖javascript预加载，闭包原理，面象对象，执行模型，对象模型...,文章的视角很特别，也非常深入，希望大家能接受这种形式，并提供宝贵意见。原始值和引用值在ECMAScript中，变量可以存放两种类型的值，即原始值和引用值。原始值指... 阅读全文

posted @  2010-10-07 18:55 笨蛋的座右铭 阅读(7009) |  评论 (39)  编辑

 

 

Javascript类型检测

摘要: 开门见山，我们先来看一下代码：在讲解这个函数之前，让我们先来看一下javascript类型判断的几个关键：typeoftypeof运算符，用于判断一个或值是哪种类型的。由于Javascript语言的灵性性与执行环境的复杂性，typeof运算符并不能正确判断出所有的类型。但对于基本数据类型，typeof具有神奇的功效，正如在 is 函数中看到的那样，_baseTypes变量中定义了typeof可以正... 阅读全文