迷失北京

BlogJava 联系 聚合 管理
  60 Posts :: 0 Stories :: 13 Comments :: 0 Trackbacks

学习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中,我们"信手拈来"就可以了,它是什么样它就是什么类型。口说无凭,有代码有真相。我们可以通过Javascripttypeof关键字来测试,一试便知。

//声明变量  
var attr0 ;  
var attr1 = 1;  
var attr2 = 1.03;  
var attr3 = "hello";  
var attr4 = false;  
              
alert(typeof attr0); //undefined  
alert(typeof attr1); //number  
alert(typeof attr2); //number    
alert(typeof attr3); //string  
alert(typeof attr4); //boolean  
alert(typeof null); //object  
alert(typeof undefined); //undefined  

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

Javascript作用域

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

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

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

// sample2   
var x = "smile";  
var alerts = function() {  
    alert(x); //undefined  
    var 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











posted on 2011-10-06 18:02 王康 阅读(428) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: