体验javascript之“变态”特性

学习Javascript断断续续也有十几天了，总结一下为自己也为别人。Javascript给我的整体印象就是很“随便”，这种印象缘起于它的面向对象。当然Javascript的灵活性也注定了它是一个随便的语言。

Javascript的语法特性

Javascript是一门动态的，弱类型的，基于原型的脚本语言。我们在一些网站上的一些漂浮效果（虽然很讨厌），图片切换效果，还有一些文本编辑器等等，这都要归功于Javascript。当然Javascript又是一个彻底的面向对象的语言，虽然你看到的是遍地的function（），但是谁有规定函数不能是对象呢。下面来看一些具体的内容。

Javascript基本语法

但凡有一点编程基础的人都会觉得Javascript的语法很简单，非常容易上手，但这并不代表Javascript很容易学习，精通Javascript也不是一件易事。

Javascript有五种基本的数据类型：数值（Number），字符串（String），布尔类型（boolean），Null类型，Undefined类型。

上面已经说过了Javascript是一种动态的弱类型语言，那我们就来看看Javascript动态体现在哪里，弱类型又体现在哪里：

//声明变量var attr1 = 1;var attr2 = 1.03;var attr3 = "hello";var attr4 = false;

不用像java中那样，想声明什么类型的变量还必须提前定义，在Javascript中，我们"信手拈来"就可以了，它是什么样它就是什么类型。口说无凭，有代码有真相。我们可以通过Javascript的typeof关键字来测试，一试便知。

//声明变量var attr0 ;var attr1 = 1;var attr2 = 1.03;var attr3 = "hello";var attr4 = false;alert(typeof attr0); //undefinedalert(typeof attr1); //numberalert(typeof attr2); //number  alert(typeof attr3); //stringalert(typeof attr4); //booleanalert(typeof null); //objectalert(typeof undefined); //undefined

这里也还有一个知识点是关于null和undefined的。Null是一个空的对象，的的类型为Object；undefined是全局对象（Window）的一个属性，所以他的类型还是undefined。但是undefined是从null继承来的。Javascript的基本语法非常的简单，大致浏览就可以上手，所以其他的东西就不在这里说了。开始下一小节...

Javascript作用域

Javascript的作用域是非常个性的，我们先来看几个例子体验一下。

// 作用域var outer = 1;function layer() {var layer1 = 2;function inner() {var layer2 = 3;alert(layer1);//2alert(layer2);//3}inner();}layer();alert(outer);//1alert(layer1);//layer1已经被回收alert(layer2);//layer2已经被回收

这个是和其他编程语言相似的地方，主要涉及全局变量和局部变量；全局变量和局部变量的作用范围既不用细说了吧。

// sample2 var x = "smile";var alerts = function() {alert(x); //undefinedvar x = "fuck"; alert(x); //fuck//上面的相当于下面的代码//var x ;//alert(x); //undefined//x = "fuck";//alert(x); //fuck}

Javascript没有块级作用域，函数中声明的所有变量无论是在哪里声明的，在整个函数中都有意义。估计对于用熟java语言的程序猿这一点是不容易接受的，反正我是这样。还有一个比较灵活的地方：未使用var声明的变量都是全局变量，而且全局变量都是Window对性的属性。呵呵...又纠结了，适应就好了！！

Javascript 的闭包

在实现深约束时，需要创建一个能显式表示引用环境的东西，并将它与相关的子程序捆绑在一起，这样捆绑起来的整体被称为闭包。单从这样一个定义上说我们并不容易理解什么是闭包。拿一个例子说事...

 //闭包演示var func = function() {var attr = "can read me??";return function() {alert(attr);}}func()();

本来我们已经无法在func函数的外面访问到attr属性，但是"can read me??"确确实实通过alert（）方法弹出来了，这是为什么呢，难道最后那个当做返回值的匿名函数帮我们保存了attr属性？当然调用此函数的方式也有一些奇怪：func()()。我们做进一步详细的介绍。

当调用一个 Javascript 函数时，该函数就会进入相应的执行环境。如果又调用了另外一个函数（或者递归地调用同一个函数），则又会创建一个新的执行环境，并且在函数调用期间执行过程都处于该环境中。当调用的函数返回后，执行过程会返回原始执行环境。同时创建的执行环境会包含一个作用域链，这个作用域链是通过将该执行环境的活动（可变）对象添加到保存于所调用函数对象的 [[scope]] 属性中的作用域链前端而构成的。

结合上面的例子简单分析一下，func()函数返回了一个匿名的函数function，所以被返回的匿名函数他的执行环境和作用域链不会被回收，当我们访问attr属性的时候，我很会直接到function运行环境的作用域链中去查找。（对于这块内容涉及的Javascript内容比深奥，也不怎么理解，不过可以参考：http://www.cn-cuckoo.com/2007/08/01/understand-Javascript-closures-72.html ）。

Javascript面向对象

Javascript的面向对象真是有点诡异，因为Javascript是一个函数式编程语言，虽然我们可以模拟继承，封装等面向对象的特性，但是总是不如java这样的语言感觉更自然，当然不排除自己的主观因素。我们先来模拟一下Javascript的面向对象，体验一下。

方式一：最原始的方式

var car = new Object();car.color = "red";car.speed = 100;car.showColor = function() {alert(this.color);};car.showColor();

方式二：运用工厂

function createCar() {var car = new Object();car.color = "red";car.speed = 100;car.showColor = function() {alert(this.color);};return car;}var car = createCar();car.showColor();

方式三：运用构造函数

function Car(color, speed) {this.color = color;this.speed = speed;this.showColor = function() {alert(this.color);};}var car = new Car("blue", 400);car.showColor();

方式四：运用原型方式

function Car() {}Car.prototype.color = "blue";Car.prototype.speed = 300;Car.prototype.showColor = function() {alert(this.color);};var car = new Car();car.showColor();

方式五：混合构造函数和原型方式

function Car(color, speed) {this.color = color;this.speed = speed;this.drivers = new Array("mike", "sue");}Car.prototype.showColor = function() {alert(this.color);};var car1 = new Car("green", 300);car1.drivers.push("wangkang");car1.showColor();alert(car1.drivers.join());var car2 = new Car("black", 300);car2.showColor();alert(car2.drivers.join());

方式六：动态原型方法

function Car(color, speed) {this.color = color;this.speed = speed;this.drivers = new Array("mike", "sue");}if (typeof Car._initialized == "undefined") {Car.prototype.showColor = function() {alert(this.color);};Car._initialized = true;}var car1 = new Car("green", 300);car1.drivers.push("wangkang");car1.showColor();alert(car1.drivers.join());var car2 = new Car("black", 300);car2.showColor();alert(car2.drivers.join());

方式七：混合工厂

function Car() {var car = new Object();car.color = "red";car.speed = 100;car.showColor = function() {alert(this.color);};return car;}var car = new Car();car.showColor();

毕竟面向对象只是一种编程的思想，用的多了其义自现，因为自己没有学习多长时间的Javascript，所以内部的机制不是很理解，但是通过上面推荐的那篇文章肯定有帮助，因为它是从Javascript运行机制上进行了彻底的分析。

只是给大家进行一个Javascript的扫盲，所以力求文章中没有错误，思想少了一点，例子多了一点！还有那一片推荐的博客希望大家认真的琢磨几遍，如果理解了那篇博客那么Javascript的作用域，闭包，面向对象等特性就非常容易理解了。http://www.cn-cuckoo.com/2007/08/01/understand-Javascript-closures-72.html