面向对象的 JavaScript 编程与其 Scope 处理.pdf

页码，1/ 11 向对象的 JavaScript 编程及其 Scope 处理 简介：在面向对象的 JavaScript 编程中，我们常常会将一些数据结构和操作封装成对象以达到继承和重用的目的。然而层 层封装和继承再加上 JavaScript 中特殊关键字 this 的使用，使得 JavaScript 当前运行 Context 看起来非常的混乱。很多 developer 为了获取运行时正确的 Context ，常常不得已将 function 或者 Object 声明 全局 Global Context 中。零散的声 明、复杂的引用再加上客户端代码的不断膨胀，最终使得客户端的 JavaScript 代码变成一场灾难。 发布日期：2011 3 月 28 日 级别：高级 本文首先对 JavaScript 的机制进行讲解，并结合当前流行的开源 JavaScript 框架讲解如何 JavaScript 中实现面向对象和 继承机制；之后本文将对面向对象 JavaScript 编程中容易引起误解和 Scope 的几个问题做详细阐述；最后针对面向对象的 JavaScript 编程中的 Scope 问题给出几点建议。 面向对象和模拟继承 JavaScript 是一种弱类型解释运行的脚本语言，就语言本身来讲它不是一门面向对象语言。但是我们可以利用一些语言的特 性来模拟面向对象编程和继承机制，这所有的一切都需要从 JavaScript 中的 function 说起。 Function 是一个定义一次但可以调用或执行无数次的 JavaScript 代码片段。Function 可以有零个或者多个输入参数和一个 返回值，它通常被用来完成一些计算或者事务处 等任务。通常我们这样定义一个 function： 清单 1. Function 定义示例 function distance (x1, y1, x2, y2) { var dx = x2 - x1; var dy = y2 - y1; return Math.sqrt(dx*dx + dy*dy); } JavaScript 中，function 不仅是是一种语法结构，它还可以被作为数据。这意味着它可以被赋值给变量， 对象或数组中 的元素的属性存储，或者作为函数参数传递等等。例如： 清单 2. Function 作为数据示例 var d = distance; d (1,1,2,2); 当在一个object 中定义和调用一个 function 时，这个 function 被称作该 object 的一个方法。需要注意的是当这个 function 被调用时，这个 object 会以隐含参数的形式传入到 function 里，function 内部可以通过 this 关键字来引用这个 object 的 属性。例如下面这个例子运行结果 calculator.result的值为 2。 清单 3. This 关键字示例 var calculator = { operand1: 1, operand2: 1, compute: function () { 页码，2/ 11 this .result = this .operand1 + this .operand2; } }; pute(); alert(calculator.result); JavaScript 中，对象的创建通常是通过 new 运算符来完成的。new 关键字后面必须是一个可执行的 function 。例如： 清单 4. New 关键字示例 var array = new Array (10); var today = new Date ( ); 当上面这条创建语句被执行时，首先会创建一个空的对象赋给前面的变量，然后再调用后面紧跟的 function，并将这个空的 对象作为隐含参数传入到 function 内部。这样 function 内部就可以通过 this 关键字引用该对象，做一些对象初始化工 作。这样的一个 function