js 使用二

来源：互联网发布：美国网络星期一图片编辑：程序博客网时间：2024/06/06 09:03

JavaScript学习笔记一——数据类型
在Javascript中只有五种简单类型，分别为null,undefined,boolean,String和Number.一种复杂类型：object。

　　代码类型只有一种形式就是function。

undefined：未定义，我们也可称之为不存在，typeof(undefined)=undefined.

　　null:为空。undefined是不存在，而null是存在，但却无。typeof(null)=object,但null又不是object，这就是null的神奇而独特之处。

　　boolean:true or false。

　　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学习笔记二——函数

在Javascript中，function才是Javascript的第一型。当我们写下一段函数时，其实不过是建立了一个function类型的实体。

　　就像我们可以写成这样的形式一样：

    function Hello(){
    alert("Hello");
     }
     Hello();
     var Hello = function () {
     alert("Hello");
     }
      Hello();

　　其实都是一样的。

　　但是当我们对其中的函数进行修改时，会发现很奇怪的问题。

　　我们会看到这样的结果：连续输出了两次Hello World。而非我们想象中的Hello和Hello World。

　　这是因为Javascript并非完全的按顺序解释执行，而是在解释之前会对Javascript进行一次“预编译”，在预编译的过程中，会把定义式的函数优先执行，也会把所有var变量创建，默认值为undefined，以提高程序的执行效率。也就是说上面的一段代码其实被JS引擎预编译为这样的形式：

　　我们可以通过上面的代码很清晰地看到，其实函数也是数据，也是变量，我们也可以对“函数“进行赋值（重赋值）。当然，我们为了防止这样的情况，也可以这样：

　　这样，程序被分成了两段，JS引擎也就不会把他们放到一起了。

JavaScript学习笔记三——作用域

每个写过程序的人都不会对作用域这个概念陌生，那在这篇文章中就来谈下Javascript的作用域。

　　在Javascript，全局环境本身就一个对象。在浏览器宿主中这个对象是window，而当Javascript用于其它非浏览器的宿主，如嵌入式的环境中，可能会是其它的对象。

　　在这里也纠正一个观念，有很多人都认为Javascript只在浏览器中使用，其实Javascript也能在很多非Web情况下使用，据介绍Javascript在一些基于嵌入式的应用领域表现得也很出色，当然这些我也只是听过传说而已。

　　言归正传，当我们写下：var i=1时，其实就是声明了一个window作用域的一个变量。

　　而当我们写下i=1时，是声明了一个window的属性。

　　看这样一段代码：

　　这段代码分别输出的结果是：undefined world，welcome china, hello china.

　　我们来分别解释：

　　在上文中，我们说过，在Javascript预编译时，会把所有var变量创建，默认值为undefined，我们在这里可以举一个例子：

　　我们可以写这样一段代码：

　　当我们执行运行这段脚本时，可以发现，首先弹出undefined，然后回提示脚本错误，提示b不存在。由此就可以表明，a在预编译的过程中就已经被创建并且初始化为undefined，而b却只能在实际运行时按顺序去解释。其实在预编译后的Javascript代码可以近乎理解如下：

　　接下来我们可以谈一下函数的作用域问题，每当代码运行进入一个函数时，Javascript引擎就会自动创建一个新的作用域，然后把这个新作用域作为当前作用域的子作用域，然后把当前的代码作用域切换到这个新作用域。当代码退出函数时，这个作用域销毁，把代码作用域交还给他的父作用域。

　　好，准备工作差不多了，接下来我们就来解释第一个问题：问什么会输出undefined world。

　　首先代码进行在预编译，当进入 Test方法时，开启一个新作用域，然后把全局作用域作为他的父作用域。然后对Test内的方法进行预编译，和上面的代码一样，Test方法被预编译后方法体大致如下：

    function Test() {
    var a = undefined;
    alert(a + " " + b);
    var a = "welcome";
     b = "china";
    alert(a + " " + b);
    }

　　当然，在当前作用域下无法找到b，于是他就会到他的父作用域下，也就是全局作用域找到了b=“world”。于是也就产生了这样的结果。

　　第二次弹出welcome china，没什么好说的。

　　第三次，弹出hello china。我们可以这样理解，var a 只是方法Test的一个局部变量，而b由于事先未声明，因此他会去父作用域中去找到对应的定义。

　　好，接下来，我们再看一下这个方法的若干个变体。

　　首先，我们将方法体内的var a改成a，我们先不看答案，直接来分析，首先，在预编译阶段，方法体内几乎没有任何改变，因此此时a和b一样，都要去他们的父作用域中去寻找，因此第一次出的结果应该是hello world，第二次没什么说的：welcome china，第三次由于a和b在本作用域内都没有事先定义，因此都是再改变父作用域内的值，因此应该输出welcome china.

　　我们继续：

　　和上面的分析一样，应该输出undefined undefined，welcome china，hello world.

　　继续：

　　应该是undefined world,welcome china,hello china.

　　经试验，都没问题，不知道你明白了么？

　　因此我们可以得出，每个变量在找不到自己的定义时，都会沿着作用链向上寻找，这样就很可能会出现未预知的错误，给排错添加了很多困难。更麻烦的是，还可能会对父作用域上的变量值进行修改，因此我们在声明变量时应该尽量加上var，尽管Javascript并不强迫我们这样做。

JavaScript学习笔记四——Eval函数

在初学JS的时候就知道这个函数，却一直没有了解过他的用途，也一直都是睁一只眼闭一只眼，这次来深入地了解一下这个函数的作用。

　　eval的作用其实很简单，就是把一段字符串传递给JS解释器，由Javascript解释器将这段字符串解释成Javascript代码，并且执行他。

　　举个最简单的例子：

　　很简单，把字符串解释成JS代码并执行，弹出2。

　　当然，上面的例子只是个玩具，在实际中没有人会傻到这么用。我想大家最基本的使用eval函数都是应该在DOM中，例如我们有div1,div2,div3，那么在document.getElementByID时我们的ID没有办法去得到，那么最简单的办法就是在for循环中，使用eval来拼接这么一段程序。例如这样：

　　最基本的用法说完，相信大家还是对这个函数意犹未尽，如果这个函数只有这么点用法，那就太无聊了。那我们就一点点来剖下一下eval()函数。

　　我们就先从eval的作用域说起，先看这样一段函数：

　　代码很简单，结果可以弹出3。接下来再对比这段代码：

　　结果是首先弹出3，然后是undefined。

　　那么说明：eval()函数动态执行的代码并不会创建新的作用域，其代码就是在当前的作用域执行的。因此也就是说，eval()函数也完全可以使用当前作用域的this,argument等对象。

　　在IE中，支持这样一种和eval()非常类似的函数叫做：execScript()。我们可以来写段简单的代码。

　　结果弹出了2个3，这也就看出了execScript函数的特点，首先他和eval相类似，都能将字符串解释成JS代码并且执行，但是他的作用域不是当前作用域，而是全局作用域。当我们把上面的代码放到Firefox和谷歌浏览器上去试试：发现在Firefox上execScript上代码是无效的，那么也说明一个问题，execScript代码的浏览器兼容性是有问题的。

　　那么就引申出这样一个问题，我们如何能把这两个函数的“优点”给汇总到一起呢，也就是说，全局+浏览器兼容性。上网搜了下，自己给汇总了一下，大概是这样：

　　这样就可以完美地兼容FF和IE了，其本质代码就在于在FF中eval和window.eval并不等效，这是个很奇妙的事。

　　另外，我们还可以用eval+with实现一些奇淫技巧。

　　我们在一般意义上可以写出这样的代码：

    var obj = function () {
       this.a = 1;
     this.b = 2;
      this.c = 5;
     this.fun = function () {
this.c = this.a + this.b;
       }};
    var o = new obj();o.fun();alert(o.c);

　　或者是这样：

    var obj = {
      a: 1,    b: 2,    c: 5,    fun: function () {
     this.c = this.a + this.b;
      }}

　　再或者是这样：

    var obj = function () {
      this.a = 1;
     this.b = 2;
    this.c = 5;};
    obj.prototype.fun = function () {
this.c = this.a + this.b;
    }
    var o = new obj();o.fun();alert(o.c);

　　无论怎么样，你是不是对这样的this感觉厌烦了呢？那就让我们采取个很另类的办法吧，让至少在感官上可能会舒服一点。

　　这个很勉强，那么好，我们不讨论什么看着舒服不舒服。我们来讨论这样一种情况。

　　我们又是否可以把这个看成是一个简陋的模板方法模式呢？呵呵。我们也可以把这个称为利用eval和with配合改变函数的上下文。

　　不过话又说回来，Eval在一般的情况中是很少被用到的，我们是完全可以避免来使用它的。

JavaScript学习笔记五——类和对象

首先，不得不说，我无法达到抛开类和对象的概念来看Javascript的境界，对于Javascript是否是面向对象的说法有很多，不过我最认同的还是Javascript是一种“基于prototype的面向对象语言”。

　　面向对象语言三大特点：继承，多态，封装，这三点虽然Javascript没有提供天然的语法实现，但是我们都可以通过prototype等技巧来实现，因此这种说法似乎不过分。

　　在Javascript中，构造对象有三种方式：

　　1. 首先，我们要明确一个概念，Javascript是一种弱类型的语言，一方面体现在Javascript的变量，返回类型都是没有强类型约束的，另一方面，Javascript可以为对象任意添加属性和方法。根据这个，我们可以写出这样的代码：

　　这里的person就是我们构造出的一个对象。

　　2. 我们也可以利用JSON的形式来构造一个对象。

　　这个是不是很像我们在C#3.0里提出的匿名对象呢？

        protected void Page_Load(object sender, EventArgs e){
           var person = new {
               name = "飞林沙",
               age = 21    };
               Response.Write("My name is " + person.name + ".I'm " + person.age);
        }

　　不同的是在Javascript中，函数是一种类型，所以可以赋给某个变量，但是C#不可以。

　　但是上面两种方法我们看到，我们都是单独定义了一个对象。接下来让我们把他们抽象出来成为一个类。

　　可是在这里，我们看到，属性都已经被写死了，我们根本没办法为每个对象单独订制，解决办法很简单：

　　好，我们来对比一下第二种和第三种写法，两者是等效的。在第二种写法中，实际上是构建了一个JSON对象，而我们又知道JSON本质上其实就是一个键值对，那么我们是否也可以用同样的方式来理解一个对象呢？

　　我们来写出这样的测试代码试试：

　　这样的代码没偶任何问题，首先用遍历的方式来找到person所有的key(属性和方法名)。然后我们用索引的方式来访问person对象的name属性。

　　这些都没有问题，可是我们是不是看到了一个引申的问题，从传统面向对象的语言来看，name和age应该属于私有变量，那么这样用person简简单单的访问，是不是破坏了封装性呢？

　　还记得我们在前文中说过的么？var的叫变量，没有var的叫属性。那么我们如果讲代码改成这个样子。

　　这样就可以封装得很好了，这也是在Javascript中的封装方式。

　　好，关于Javascript的类和对象就说到这，但是这里面仍然有一些问题。我们会在下文中提及。

JavaScript学习笔记六———prototype的提出

首先我们继续上文的代码，我们来把这段代码延伸一下：

　　结果弹出false。也就是说，这两个对象的方法是不同的方法。那么我们知道，在C#中，每个对象会维护着一个方法表，可是方法表应该指向同一块地址。如果是这样的话，那当我们声明了100个对象，是不是要建立100个对象拷贝，对空间是不是一个很大的浪费呢？

　　于是我们就想了这样的解决办法，用prototype：

　　这样就可以了。所以你还会再说是否用prototype都是一样的么？其实我以前也是这么理解的，在这次偶然的试验中看到了这个问题。

LOFTER：行者游学 http://diplomatic.lofter.com/post/e5e28_295d93