Javascript学习笔记

Javascript学习笔记一.基础篇Javascript学习笔记1——数据类型在Javascript中只有五种简单类型，分别为null,undefined,boolean,String和Number.一种复杂类型：object。代码类型只有一种形式就是function。undefined：未定义，我们也可称之为不存在，typeof(undefined)=undefined.null:为空。undefined是不存在，而null是存在，但却无。typeof(null)=object,但null又不是object，这就是null的神奇而独特之处。boolean:trueorfalse。Number:NaN和Infinity是两个特殊之数，NaN代表一个无法用数值来表示的数字，而Infinity代表一个无穷大的数字，相对的，-Infinify则代表负无穷大。在此有两点特殊的地方：NaN!=NaN，Infinity/Infinity=NaN。在Number类型中，有个非常有用的方法：ToString()，他可以接受一个从2到36的数字，然后把我们的Number转换为相应的进制数。String：字符串，Javascript中没有字符的概念，字符串是表示文本的最小单位。在字符串中，有这样的两个函数，分别是charAt(index)和charCodeAt(index)分别返回对应索引的字符和字符Unicode编码。在我们平时，可能经常会使用下标的方式访问，如s[10]，可是这并不是ECMAScript的标准，应该尽量避免。Javascript的一切类型都是基于这五个简单类型向上搭建。这五个类型之间又有着万千复杂的关系，undefined,null,0,“”转换为boolean时就是false，而除去这四个外，所有的都为true。但是在这五个当中，除了undefined==null，其他又都不相等。我们在此又有着这样和强类型语言不通之处，例如123==“123”。那么我们如何能够区分类型呢？这个时候：全等于：===就发挥了用场。Javascript学习笔记2——函数在Javascript中，function才是Javascript的第一型。当我们写下一段函数时，其实不过是建立了一个function类型的实体。就像我们可以写成这样的形式一样：functionHello(){alert(Hello);}Hello();varHello=function(){alert(Hello);}Hello();其实都是一样的。但是当我们对其中的函数进行修改时，会发现很奇怪的问题。scripttype=text/javascriptfunctionHello(){alert(Hello);}Hello();functionHello(){alert(HelloWorld);}Hello();/script我们会看到这样的结果：连续输出了两次HelloWorld。而非我们想象中的Hello和HelloWorld。这是因为Javascript并非完全的按顺序解释执行，而是在解释之前会对Javascript进行一次“预编译”，在预编译的过程中，会把定义式的函数优先执行，也会把所有var变量创建，默认值为undefined，以提高程序的执行效率。也就是说上面的一段代码其实被JS引擎预编译为这样的形式：scripttype=text/javascriptvarHello=function(){alert(Hello);}Hello=function(){alert(HelloWorld);}Hello();Hello();/script我们可以通过上面的代码很清晰地看到，其实函数也是数据，也是变量，我们也可以对“函数“进行赋值（重赋值）。当然，我们为了防止这样的情况，也可以这样：scripttype=text/javascriptfunctionHello(){alert(Hello);}Hello();/scriptscripttype=text/javascriptfunctionHello(){alert(HelloWorld);}Hello();/script这样，程序被分成了两段，JS引擎也就不会把他们放到一起了。Javascript学习笔记3——作用域每个写过程序的人都不会对作用域这个概念陌生，那在这篇文章中就来谈下Javascript的作用域。在Javascript，全局环境本身就一个对象。在浏览器宿主中这个对象是window，而当Javascript用于其它非浏览器的宿主，如嵌入式的环境中，可能会是其它的对象。在这里也纠正一个观念，有很多人都认为Javascript只在浏览器中使用，其实Javascript也能在很多非Web情况下使用，据介绍Javascript在一些基于嵌入式的应用领域表现得也很出色，当然这些我也只是听过传说而已。言归正传，当我们写下：vari=1时，其实就是声明了一个window作用域的一个变量。而当我们写下i=1时，是声明了一个window的属性。看这样一段代码：scripttype=text/javascriptvara=hello;b=world;Test();functionTest(){alert(a++b);vara=welcome;b=china;alert(a++b);}alert(a++b);/script这段代码分别输出的结果是：undefinedworld，welcomechina,hellochina.我们来分别解释：在上文中，我们说过，在Javascript预编译时，会把所有var变量创建，默认值为undefined，我们在这里可以举一个例子：我们可以写这样一段代码：scripttype=text/javascriptalert(a);alert(b);vara=111;b=111;/script当我们执行运行这段脚本时，可以发现，首先弹出undefined，然后回提示脚本错误，提示b不存在。由此就可以表明，a在预编译的过程中就已经被创建并且初始化为undefined，而b却只能在实际运行时按顺序去解释。其实在预编译后的Javascript代码可以近乎理解如下：scripttype=text/javascriptvara=undefined;alert(a);alert(b);a=111;b=111;/script接下来我们可以谈一下函数的作用域问题，每当代码运行进入一个函数时，Javascript引擎就会自动创建一个新的作用域，然后把这个新作用域作为当前作用域的子作用域，然后把当前的代码作用域切换到这个新作用域。当代码退出函数时，这个作用域销毁，把代码作用域交还给他的父作用域。好，准备工作差不多了，接下来我们就来解释第一个问题：问什么会输出undefinedworld。首先代码进行在预编译，当进入Test方法时，开启一个新作用域，然后把全局作用域作为他的父作用域。然后对Test内的方法进行预编译，和上面的代码一样，Test方法被预编译后方法体大致如下：functionTest(){vara=undefined;alert(a++b);vara=welcome;b=china;alert(a++b);}当然，在当前作用域下无法找到b，于是他就会到他的父作用域下，也就是全局作用域找到了b=“world”。于是也就产生了这样的结果。第二次弹出welcomechina，没什么好说的。第三次，弹出hellochina。我们可以这样理解，vara只是方法Test的一个局部变量，而b由于事先未声明，因此他会去父作用域中去找到对应的定义。好，接下来，我们再看一下这个方法的若干个变体。scripttype=text/javascriptvara=hello;b=world;Test();functionTest(){alert(a++b);a=welcome;b=china;alert(a++b);}alert(a++b);/script首先，我们将方法体内的vara改成a，我们先不看答案，直接来分析，首先，在预编译阶段，方法体内几乎没有任何改变，因此此时a和b一样，都要去他们的父作用域中去寻找，因此第一次出的结果应该是helloworld，第二次没什么说的：welcomechina，第三次由于a和b在本作用域内都没有事先定义，因此都是再改变父作用域内的值，因此应该输出welcomechina.我们继续：scripttype=text/javascriptvara=hello;b=world;Test();functionTest(){alert(a++b);vara=welcome;varb=china;alert(a++b);}alert(a++b);/script和上面的分析一样，应该输出undefinedundefined，welcomechina，helloworld.继续：scripttype=text/javascripta=hello;b=world;Test();functionTest(){alert(a++b);vara=welcome;b=china;alert(a++b);}alert(a++b);/script应该是undefinedworld,welcomechina,hellochina.经试验，都没问题，不知道你明白了么？因此我们可以得出，每个变量在找不到自己的定义时，都会沿着作用链向上寻找，这样就很可能会出现未预知的错误，给排错添加了很多困难。更麻烦的是，还可能会对父作用域上的变量值进行修改，因此我们在声明变量时应该尽量加上var，尽管Javascript并不强迫我们这样做。Javascript学习笔记4——Eval函数在初学JS的时候就知道这个函数，却一直没有了解过他的用途，也一直都是睁一只眼闭一只眼，这次来深入地了解一下这个函数的作用。eval的作用其实很简单，就是把一段字符串传递给JS解释器，由Javascript解释器将这段字符串解释成Javascript代码，并且执行他。举个最简单的例子：scripttype=text/javascripteval(alert(1+1));/script很简单，把字符串解释成JS代码并执行，弹出2。当然，上面的例子只是个玩具，在实际中没有人会傻到这么用。我想大家最基本的使用eval函数都是应该在DOM中，例如我们有div1,div2,div3，那么在document.getElementByID时我们的ID没有办法去得到，那么最简单的办法就是在for循环中，使用eval来拼接这么一段程序。例如这样：scripttype=text/javascriptfor(varloop=1;loop10;loop++){eval('document.getElementById(div+loop).innerHTML=123');}/script最基本的用法说完，相信大家还是对这个函数意犹未尽，如果这个函数只有这么点用法，那就太无聊了。那我们就一点点来剖下一下eval()函数。我们就先从eval的作用域说起，先看这样一段函数：scripttype=text/javascripteval(vari=3);alert(i);/script代码很简单，结果可以弹出3。接下来再对比这段代码：scripttype=text/javascriptvartest=function(){eval(vari=3);alert(i);}test();alert(i);/script结果是首先弹出3，然后是undefined。那么说明：eval()函数动态执行的代码并不会创建新的作用域，其代码就是在当前的作用域执行的。因此也就是说，eval()函数也完全可以使用当前作用域的this,argument等对象。在IE中，支持这样一种和eval()非常类