学习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); //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
这里也还有一个知识点是关于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);//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