元素赋值,你可以看到,代码必须针对不同的浏览器写不同的代码,更让人郁闷的是,还可能为同一种浏览器的不同版本写不同的代码,有些浏览器(比如IE6)生命周期之长让人无奈,这些都强迫Web开发者把大量时间花在测试兼容性这种毫无成就感的工作之上,实在颇有点浪费生命的感觉。
大家都觉得不爽的地方,就是创新点,于是有了以jQuery为代表的大量的JavaScript库和框架,其成功在于有意无意地迎合了人们的这种偷懒的心理:
“把麻烦丢给别人,把方便留给自己”。
JavaScript招人骂的第2个原因是它名字引起的误会。
JavaScript,名字中有个Java,初次听到几乎100%的人都以为它与Java有着密切的关系,而且很有可能就是Java语言的子集。
但事实上,叫“李富贵”的人可能在街上讨饭,叫“刘美美”的其实长得不怎么样,而取名“杨德有”的人其实是个小人,干了很多见不得人的事……
这世上名不副实的多了,其实,JavaScript与Java根本是两种语言,取这个名字纯粹是最早设计并实现JavaScript的那批人想攀高枝拍Java马屁的结果。
由于许多人把它当成自己所熟悉的Java语言去用,结果发现它根本不是自己所熟悉的那种编程语言,加上下面要讲的第三个原因让人编起程来很不爽,许多人愤怒了:“NND,给这丫骗了!”
JavaScript招人骂的第3个原因其实与语言本身无关,而与浏览器相关。
许多人最早使用JavaScript不是因为喜欢这种语言,而是工作中必须用它,在实际工作中用得最多的就是DOM,而DOM API的设计与各浏览器的具体实现 实在不怎么样,按照jQuery设计者John Resig的观点,它绝不可能获得任何“年度友好API(Friendliest API of the Year)”的奖项!
2 精华与糟粕的并存JavaScript
Douglas Crockford写了一本《JavaScript:The Good Parts》,在书中他这样写到:
JavaScript建立在一些非常好的想法和少数非常坏的想法之上。
那些非常好的想法包括函数、弱类型、动态对象和一个富有表现力的对象字面量表示法,而那些坏的想法包括基于全局变量的编程模型、缺乏块作用域、“保留”了一堆根本没用到的保留字,不支持真正的数组(它所提供的类数组对象性能不好)等等。
还有一些是“鸡肋”,比如with语句,原始类型的包装对象,new,void等等
JavaScript受到的主要批判有:
-
无法应对复杂的互联网应用程序,不支持大家己普遍熟悉的以类为模板的面向对象编程方式
-
运行速度慢,其对象内部采用散列表形式组织,相比数组和结构体,存取速度慢
-
不支持多核CPU,JavaScript没有线程的概念,也缺乏必要的线程同步手段,使得它几乎无法编写能充分应用客户端多核CPU计算能力的代码
-
浏览器兼容性问题是硬伤
-
……
不少被批判的内容并不全是事实,或者说现在不少己经有很大改善,但JavaScript身上的这些骂名是洗不掉的了。
其实,JavaScript本身有很多精华,下面的内容就集中于JavaScript的这些亮点之上。
二、JavaScript技术导航
谈到JavaScript技术,其实应该区分以下三个概念:JavaScript语言、JavaScript库和JavaScript宿主。
JavaScript语言的学习主要是JavaScript语法学习,JavaScript宿主是指JavaScript程序的运行环境,通常是浏览器,浏览器提供了许多对象(比如window,document等),JavaScript代码可以直接调用它们,另外,浏览器还包容一个专门负责运行JavaScript代码的组件,我们把它称为JavaScript引擎,在实际学习过程中,一般不需要深入地了解JavaScript引擎的内部运行机理。JavaScript库通常是指由JavaScript社区所贡献出来的能完成特定功能的打包在一起的JavaScript代码。
在学习过程中,通常是把JavaScript语言与JavaScript运行环境所提供的对象和实现的功能“打包到一块”作为一个整体学习,因此,下面的介绍不再明确地区分哪些内容属于JavaScript语言特性,哪些功能实际上是由宿主环境提供的。至于JavaScript库,不在本文的介绍范围之内。读者可自行阅相关的技术书籍。
1 掌握JavaScript基础编程技能
(1)第一件事情,弄明白在哪儿写JavaScript代码
三种方式写JavaScript代码。
Inline JavaScript:直接将简短的JavaScript代码嵌入到HTML元素声明中:
href="/about" onclick
= " alert('this is the thing');">About
Embedded JavaScript:将javaScript放到
链接外部JavaScript文件:将JavaScript代码放到独立的.js文件中,然后在
(2)快速了解JavaScript语法基础
学习这部分内容,可以与C/Java/C#的基础语法相对照,重点关注其不同点就行了,以下是部分要点:
-
JavaScript定义了四种基本数据类型:numbers, strings, Booleans, undefined和null,其余所有的都是对象。
-
JavaScript所有的数都是64位浮点数,还有一个常量叫NaN(Not a Number),在编程中常用。
-
JavaScript有一些比较独特的运算符,列举几个:
===
(严格判等运算符)、
!!
(把后面跟着的表达式变成一个bool值),方括号运算符(可以用于访问对象属性)
-
变量的作用域:JavaScript没有块作用域,但有函数作用域。即:定义在函数中的参数和变量在函数外部不可见,并且在一个函数中的任何位置定义的变量在该函数中的任何地方都可见。这点与C和Java等编程语言都不一样。
-
……
(3)比较独特与有用的内部对象
JavaScript本身提供了一些内部对象,可以在代码中直接使用,列举几个:
-
数组:JavaScript其实没有传统意义上的数组,因此,你应该把它看成是“另外一种东西”,需要花点时间去明白它的特性。
-
全局对象:JavaScript中有一个全局的global对象,除了那些有明确对象归属的成员,其它所有的东西都成为它的成员,在浏览器环境中,window对象就是全局对象。
-
正则表达式:正则表达式在处理字符串上功能强大,花时间在这上面是值得的。
-
timer对象:可以用它实现定时调用
-
……
(4)JavaScript代码调试方法
有几种方法可以调试JavaScript代码,最土的一种是使用alert()输出信息,比较专业的是使用console.log和设置断点。
每个Web开发者都一定要至少掌握一种浏览器所提供的调试工具:Firebug(Firefox)、IE Developer Tools(IE 8以后)、Opera Dragonfly( Opera 9.5以后)、WebKit Developer Tools( Safari和Chrome)。
大多数浏览器调试工具都可以使用F12这个热键呼叫出来,并且其提供的功能都很强大。
另外,一些IDE(比如Visualstudio),也支持对JavaScript代码的跟踪与调试。
2 把握JavaScript编程语言的精华
在学习JavaScript的过程中,我建议别把JavaScript看成是一种OO语言,应把它看成是一种函数式语言!
另外,重点搞掂函数、对象、闭包三个东东,则JavaScript精华尽在我手!
首先,我们先来摆函数的龙门阵。
(1)函数
JavaScript中函数是“一等公民”。理解JavaScript的函数是打开这门编程语言奥秘的钥匙,由它可以引申出N多重要的特性。
函数是一个对象
JavaScript使用function关键字定义函数
function add(x, y) {
return x + y;
}
函数可看成是一个“函数”对象。函数名是指向这一“函数”对象的指针,可以有多个变量引用同一个函数对象
console.info(add(100,200)); //300
var other =add; //other和add引用同一函数对象
console.info(other(300,400)); //700
函数中定义的变量是私有的,因此,JavaScript变量只有两种作用域:全局的和由函数所限制的局部作用域。这点非常重要。
函数可以没有名字,我们通常把这种“匿名”函数赋值给一个变量,通过变量来调用它:
var square = function (x) { return x
* x; }
console.info(square(10)); //100
牢记“函数是一个对象”,对看懂许多JavaScript代码至关重要。
返回函数的函数
由于函数是对象,因此,我们可以写出一个返回函数的函数,这是一种非常重要的编程技巧:
function func(x,y) {
var value=300;
return function () {
return value + x + y;
};
}
console
.info(func(100, 200)()); //600
被返回给外界的“内部”函数能够直接访问外部函数的变量,并且需要时它还可以再返回另一个函数,这样便可以构成一个排成“一字长蛇阵”的连续函数调用语句,这在许多JavaScript库中都能看到。
函数的参数
JavaScript对函数的要求极其地宽松。
定义函数时,不需要指定参数类型,对于参数值,JavaScript不会进行类型检查,任何类型的值都可以被传递给参数。
对于函数参数,如果过少,没得到值的参数为undefined,如果过多,多的会被忽略掉。
JavaScript将所有传给函数的参数放到一个arguments对象中(它类似于数组,但JavaScript中没有传统意义上的数组,只能说是类似于数组的对象),使用它可以写出灵活的代码,比如模拟实现OO语言中的方法重载(method overload).
特别地,函数可以作为另一个函数的参数:
var values = [ 213, 16, 2058, 54, 10, 1965, 57, 9 ];
values.sort(function(value1,value2){return value2 - value1; });
如果有C#的delegate经验,看懂上述代码一点也不困难,反过来,理解了上述JavaScript代码,再学习C#的delegate和Lambda表达式也就没多少难度,这就是各种语言均有相通之处的一个例子。
this对象
JavaScript中的this与Java/C#中的不一样,在JavaScript中,每次对函数的调用都有一个上下文对象,this关键字引用它。如果函数归属于某个对象,则this关键字将引用此对象,它就是本次函数调用的上下文。
this引用的函数上下文对象是可以动态改变的,使用函数对象的call方法可以动态地指定它:
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
sayColor
(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
不少JavaScript库中,使用这个特性玩出了许多花样。
(2)闭包
“闭包(closure)”是函数式编程的重要特性,这也是在学习时最让人难以理解的技术关键点之一。请费点脑筋看看以下代码:
function a() {
var i = 0;
return function b() {
console
.info(++i);
};
};
var c = a();
for (var i = 0; i < 10; i++) {
c();
}
上述代码中,内部函数b中的代码会访问外部函数a中的变量i, 最值得注意的是:执行完c=a()一句后,函数a()己经执行完毕,但由于c引用a()返回的函数b,因此,当前的执行环境被完整保存,从而让i保存上次调用的值!
这就是闭包的神奇特性。
闭包在JavaScript Library开发中被广泛使用。
有关对闭包内部机理的详细介绍,可以参看《Professional JavaScript For Web Developer》一书。
(3)对象与原型
JavaScript的面向对象特性非常地独特,学习这部分内容时,己非常熟悉C#/C++/Java的朋友一定要Undo己有的知识,才能真正理解它们。
对象的创建
在JavaScript中,对象并不是以类为模板创建出来的,它可以看成是一堆属性的集合,每个属性都有一个name(就是它的属性名字)和Value。
正式地说,JavaScript中的对象是可变的键控集合(keyedcollections),既然是一个集合,所以它支持foreach遍历,也支持动态地给对象添加(直接赋值即可)和删除成员(使用delete内部函数)。
JavaScript中可以使用四种方式定义对象,用起来非常地灵活:
方式一:定义一个空对象,再给它添加成员:
var myObject = {};
myObject.name
= “John”;
myObject.age = 29;
方式二:使用对象字面量直接创建对象:
var myObject = {
name
:"John",
age:40
};
可以看到,这种形式非常类似于Json字串,事实上,JavaScript提供了相应的机制直接由JSON字串创建JavaScript对象(或反之)
方式三:使用工厂函数构建
new一个空白对象,添加完成员之后,return给外界:
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o
.sayName = function(){
alert(this.name);
};
return
o;
}
方式四:通过对象构造函数创建
function Person(name, age, job){
this.name = name;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person(“John”, 29, “Software Engineer”);
可以看到,这种方式使用this关键字给对象添加成员,使用new关键字调用并创建对象。
通常会把构造函数的首字母设置为大写的。
构造函数其实也是一个函数,不同之处在于调用它时必须要加一个“new”关键字,如果不加这个关键字,则对它的调用被认为是普通函数调用。
使用这种方法构造对象,每个对象都加了一个constructor属性:
alert(person1.constructor== Person); //true
JavaScript对象在运行时可以动态地创建和修改其成员,这就给编程带来了很强的灵活性,下面举一个例子,看看如何在函数内部构建一个数据缓冲区:
function getElements(name) {
if (!getElements.cache)
getElements.cache = {};
return getElements.cache[name]
=
getElements.cache[name] || document.getElementsByTagName(name);
}
上述函数在内部使用一个名为cache的空对象用于保存己访问过的页面元素,仅在首次访问时调用DOM API去获取节点对象,从而提升了性能。
对象原型(Pototype)
这是JavaScript语言中最有特色的地方。
function MyObject(name) {
this.name = name;
};
var obj1 = newMyObject("Object1");
//向原型中添加新成员
MyObject.prototype.
value = 100;
//新对象与老对象将同时拥有这个新的成员
var obj2 = newMyObject("Object2");
console.info(obj1.value); //100
console
.info(obj2.value); //100
上述代码的背后,其实是以下文字描述的JavaScript内部机理:
-
每个对象都连接到一个原型对象(Prototype),如果我们添加一个新的属性到原型中,该属性会立即对所有基于该原型创建的对象可见。
-
各个对象的原型也是一个对象,它们可以“链接”起来,构成一个原型链。
-
当我们尝试去获取对象的某个属性值,且该对象没有此属性值,那么JavaScript会尝试从它直接关联的原型对象中去获取,如果那个原型对象也没有此属性值,那么会再从这一原型对象所关联的另一个原型中寻找,依次类推,直到该过程最后到达终点Object.prototype。如果想要的属性完全不存在于原型链中,那么结果就是undefined。
JavaScript引入原型,其主要目的之一就是为开发者提供经典的OOP编程风格:以类为模板创建对象和实现继承,其实现思路基于以下事实:
当你创建一个新对象时,你可以选择某个对象作为它的原型。
以下代码使用prototype模拟实现了面向对象编程中的继承特性。
function
Parent() {
this.baseFunc = function () {
console
.info("基类方法");
};
}
function Child() {
this.childFunc =
function () {
console.info("子类方法");