5.7 实现高级JavaScript技术(一)


 我们假设本书的读者对JavaScript至少有基本的实践知识。如果要提供JavaScript的全面教程,这本身就需要一本完整的书才能讲清楚,所

以在这里我们不打算详细介绍这种语言。相反,本节只是讨论JavaScript的一些可能鲜为人知的高级特性,并说明如何在你的Ajax开发中结合

使用这些特性。

  我们先来简单地谈谈JavaScript的历史,以便你了解它原来是什么样子,又是怎么发展到今天的。Netscape的Brendan Eich于1995年开发

了JavaScript。他的任务本来是开发一种方法,使得创建和维护Web网站的非专业Web设计人员能够更容易地使用Java applet。Eich认为,适当

的选择是开发一种不需要编译器的弱类型语言。

  最初,Eich开发的这个语言有过很多名字,不过,后来由于Java在市场上大获成功,因此借着这股东风,最后命名为JavaScript。

JavaScript很快成为Web上最流行的脚本语言,这要归功于它的低门槛,另外还因为它能够把JavaScript脚本从一个页面复制到另一个页面。在

JavaScript和Navigator DOM的早期修订版本基础上,产生了DOM Level 0标准,该标准将表单元素和图像定义为DOM元素的子元素。

  Microsoft迎头赶上,创建了自己的脚本语言VBScript。VBScript在功能上与JavaScript类似,但采用了类Visual Basic语法,而且只能用

于IE。Microsoft还提供了JavaScript的一个实现JScript(现在已由ECMA标准化并称为ECMAScript)。尽管不同JavaScript的语法几乎是一样

的,但不同浏览器上DOM实现却大相径庭,以至于几乎不可能创建跨浏览器的脚本。使用“最小公分母”方法得到的脚本通常只能完成最简单的

任务。

 到了1998年,Netscape开放了其浏览器的源代码,决定开始重写浏览器,并把重点放在遵循W3C标准上。那时,IE 5是W3C DOM和ECMAScript的最佳实现。开源版本的Netscape以Mozilla为名于2002年问世。由此开始,浏览器领域形成了一个趋势:越来越多的浏览器开始努力遵循W3C和ECMA维护的Web标准。如今,现代浏览器(如Firefox、Mozilla、Opera、Konqueror和Safari)都严格遵循Web标准,这就大大简化了编写跨浏览器的HTML和JavaScript等的任务。IE 6与1998年的IE 5并没有太大差别,它严格禁止了最不合标准的行为。

  5.7.1 通过prototype属性建立面向对象的JavaScript

  JavaScript通过一种链接机制来支持继承,而不是通过完全面向对象语言(如Java)所支持的基于类的继承模型。每个JavaScript对象都有一个内置的属性,名为prototype。prototype属性保存着对另一个JavaScript对象的引用,这个对象作为当前对象的父对象。

  当通过点记法引用对象的一个函数或属性时,倘若对象上没有这个函数或属性,此时就会使用对象的prototype属性。当出现这种情况时,将检查对象prototype属性所引用的对象,查看是否有所请求的属性或函数。如果prototype属性引用的对象也没有所需的函数或属性,则会进一步检查这个对象(prototype属性引用的对象)的prototype属性,依次沿着链向上查找,直到找到所请求的函数或属性,或者到达链尾,如果已经到达链尾还没有找到,则返回undefined。从这个意义上讲,这种继承结构更应是一种“has a”关系,而不是“is a”关系。

  如果你习惯于基于类的继承机制,那么可能要花一些时间来熟悉这种prototype机制。prototype机制是动态的,可以根据需要在运行时配置,而无需重新编译。你可以只在需要时才向对象增加属性和函数,而且能动态地把单独的函数合并在一起,来创建动态、全能的对象。对prototype机制的这种高度动态性可谓褒贬不一,因为这种机制学习和应用起来很不容易,但是一旦正确地加以应用,这种机制则相当强大而且非常健壮。
这种动态性与基于类的继承机制中的多态概念异曲同工。两个对象可以有相同的属性和函数,但是函数方法(实现)可以完全不同,而且属性

可以支持完全不同的数据类型。这种多态性使得JavaScript对象能够由其他脚本和函数以统一的方式处理。

  图5-15显示了实际的prototype继承机制。这个脚本定义了3类对象:Vehicle、Sports-

  Car和CementTruck。Vehicle是基类,另外两个类由此继承。Vehicle定义了两个属性:wheelCount和curbWeightInPounds,分别表示

Vehicle的车轮数和总重量。JavaScript不支持抽象类的概念(抽象类不能实例化,只能由其他类扩展),因此,对于Vehicle基类,

wheelCount默认为4,curbWeightInPounds默认为3 000。

                                         

                                图5-15 Vehicle、SportsCar和CementTruck对象之间的关系

  注意,这个UML图展示了SportsCar和CementTruck对象覆盖了Vehicle的refuel和mainTasks函数,因为一般的Vehicle、SportsCar(赛车)

和CementTruck(水泥车)会以不同的方式完成这些任务。SportsCar与Vehicle的车轮数相同,所以SportsCar的wheelCount属性不会覆盖

Vehicle的wheelCount属性。CementTruck的车轮数和重量都超过了Vehicle,所以CementTruck的wheelCount和curbWeightInPounds属性要覆盖

Vehicle的相应属性。

  代码清单5-2包含了定义这3个类的JavaScript代码。要特别注意如何在对象定义中对属性和函数附加prototype关键字,还要注意每个对象

由一个构造函数定义,构造函数与对象类型同名。

  代码清单5-2 inheritanceViaPrototype.js

 /* Constructor function for the Vehicle object */
  function Vehicle() { }
  /* Standard properties of a Vehicle */
  Vehicle.prototype.wheelCount = 4;
  Vehicle.prototype.curbWeightInPounds = 4000;
  /* Function for refueling a Vehicle */
  Vehicle.prototype.refuel = function() {
  return "Refueling Vehicle with regular 87 octane gasoline";
  }
  /* Function for performing the main tasks of a Vehicle */
  Vehicle.prototype.mainTasks = function() {
  return "Driving to work, school, and the grocery store";
  }
  /* Constructor function for the SportsCar object */
  function SportsCar() { }
  /* SportsCar extends Vehicle */
  SportsCar.prototype = new Vehicle();
  /* SportsCar is lighter than Vehicle */
  SportsCar.prototype.curbWeightInPounds = 3000;
  /* SportsCar requires premium fuel */
  SportsCar.prototype.refuel = function() {
  return "Refueling SportsCar with premium 94 octane gasoline";
  }
  /* Function for performing the main tasks of a SportsCar */
  SportsCar.prototype.mainTasks = function() {
  return "Spirited driving, looking good, driving to the beach";
  }
  /* Constructor function for the CementTruck object */
  function CementTruck() { }
  /* CementTruck extends Vehicle */
  CementTruck.prototype = new Vehicle();
  /* CementTruck has 10 wheels and weighs 12,000 pounds*/
  CementTruck.prototype.wheelCount = 10;
  CementTruck.prototype.curbWeightInPounds = 12000;
  /* CementTruck refuels with diesel fuel */
  CementTruck.prototype.refuel = function() {
  return "Refueling CementTruck with diesel fuel";
  }
  /* Function for performing the main tasks of a SportsCar */
  CementTruck.prototype.mainTasks = function() {
  return "Arrive at construction site, extend boom, deliver cement";
  }

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3