JavaScript基础知识

JavaScript简介

JavaScript

  • 基于对象的脚本语言
  • 解释执行
  • 代码以纯文本的形式存储
  • 类型宽松,不必显示定义变量的数据类型
  • Netscape公司和Sun公司联手完成

JavaScript的功能

  • 数据验证 表单
  • 网页修饰和特效
  • 导航系统
  • 基本数学运算
  • 动态文档生成

JavaScript的特点

  • 脚本编写:小程序段方式实现编程,是解释性语言
  • 基于对象:把页面中的各个元素看作对象
  • 简单:基本语句和控制简单,变量为弱类型
  • 安全:不允许访问本地硬盘,只能实现信息浏览或动态交互
  • 动态:可以直接对客户的输入做出响应,事件驱动
  • 跨平台:依赖于浏览器本身,与操作环境无关

嵌入使用

  • 在HTML中嵌入JavaScript:

    • 在页面中

      <script type="text/javascript">...</script>
    • 在标记中

      • 响应标记的某个事件
  • 引入外部的JavaScript代码

    <script src=" .js"></script>

1、在HTML页面中嵌入script代码
2、language属性:定义脚本语言,一般设置为JavaScript,从HTML4.0开始,已经淘汰language属性,可以不写
3、type属性:用于指定脚本语言和Internet内容类型,一般设置为 text/javascript。注意,旧版本浏览器不支持type属性
4、HTML推荐将<script> 标记放在标记中,浏览器执行HTML页面的过程是自上而下的线性过程

JavaScript基本语法

语法

  • 区分大小写
  • 变量是弱类型:变量在使用前不需要声明,而是解释器在运行时检查其数据类型
  • 行结尾加分号
  • 大括号表明代码块:使用大括号括住多条语句形成一个语句块
  • 注释与Java、C和PHP语言的注释相同

在浏览器中逐条解释执行,如果某条语句出现错误,后面的语句将不能执行

常量、变量

  • JavaScript中没有常量概念,通常指直接在代码中给定值

    var a = 123;
    var b = "123";
  • 变量:保存程序中的临时值,可被后面的脚本使用,变量是弱类型的

  • 变量声明:

    var m;
    var m = "123";
    var m, n=123;        //同时声明多个变量(不建议)
    • 可以重复声明变量,但应该尽量避免
    • 可以直接使用变量,不声明;但应该尽量避免
  • 变量的命名:

    • 以字母、下划线(_)或美元符号($)开头
    • 余下的字符可以是下划线、美元符号或任何的字母、数字
    • 最长为255个字符
    • 不能有空格,大小写敏感
    • 不能使用JavaScript中的关键字或保留字命名
  • JavaScript的保留字:

    break, delete, function, return, typeof, case, do, if, switch, var,
    catch, else, in, this, void, continue, false, instanceof, throw, while, debugger, finally, new, true, with, default, for, null, try
    abstract, double, goto, native, static, boolean, enum, inplements,
    package, super, byte, export, import, private, synchronized, char,
    extends, int ,protected, throws, class, final, interface, public,
    transient, const, float, long, short, volatile


delete 运算符 从对象中删除一个属性,或从数组中删除一个元素
JavaScript中instanceof运算符是返回一个 Boolean 值,指出对象是否是特定类的一个实例。
typeof一般只能返回如下几个结果: number,boolean,string,function,object,undefined

With:这个是开域语句, 表示在with语句中的任何表达式的所属对象或者是类都由with后紧跟的变量所代表

  • 变量类型:

    • Undefined:未定义类型(变量值为undefined),任何未被赋值的变量;声明的变量未初始化时,该变量的初始值是undefined.
    • String:用””或者’’括起来的字符或数值
    • Boolean:变量值为true或false
    • Null空类型:用于尚未存在的对象
    • Number数字类型:(特殊值NaN非数),
      • Infinity正无穷大
      • -Infinity负无穷大
      • NaN(Not a Number)
        • 不能用于算术计算
        • 它与自身不相等
        • 函数isNan()
  • 类型转换

    • 字符串–>数值
      • parseInt(var)
      • parseFloat(var)
      • Number(var)

        parseInt方法和parseflota方法:

        只有对string类型调用这些方法,它们才能正确运行;对其他类型都返回NaN;
        注:NaN 指示某个值是不是数字值。

parseInt方法首先检查位置0处的字符,判断它是否是个有效数字,若有效,再往下检查,直到发现非数字,并返回前面的检查结果。

首先,概念上
Number是一个对象Number()是这个对象的构造方法。
parseInt是一个方法,能直接写parseInt是因为它是window对象的一个方法,window可以省略。

其次,用法上
Number()只有一个参数,可以是一个字符串,也可以是其他对象(如楼上),这个要看脚本解释器(IE?)对于这个参数的处理方法。
window.parseInt()有两个参数,后一个可选,前一个是字符串,后一个是进制的位权(?是叫这个吧)

其实Number的用法应该是new Number(“2”);

  • typeof运算符

    • 对变量或值调用typeof运算符将返回下列的值之一

      undefined” 变量是undefined类型的
      “boolean” 变量是boolean类型的
      “number” 变量是number型的
      “string” 变量是string型的
      “object” 变量是一种引用类型或null
      “function” 变量是一个函数

typeof(null):返回object,这本来是JavaScript早期的bug,但后来却被写入了ECMAScript标准,可以理解为null是object的占位符。

  • 异常捕获

目前我们可能得到的系统异常主要包含以下6种:
EvalError: raised when an error occurs executing code in eval()
RangeError: raised when a numeric variable or parameter is outside of its valid range
ReferenceError: raised when de-referencing an invalid reference
SyntaxError: raised when a syntax error occurs while parsing code in eval()
TypeError: raised when a variable or parameter is not a valid type
URIError: raised when encodeURI() or decodeURI() are passed invalid parameters
上面的六种异常对象都继承自Error对象。他们都支持以下两种构造方法:
new Error(); new Error(“异常信息”);
手工抛出异常的方法如下:
try {
throw new Error(“Whoops!”);
} catch (e) {
alert(e.name + “: “ + e.message);
}
如要判断异常信息的类型,可在catch中进行判断:
try { foo.bar(); }
catch (e) {
if (e instanceof EvalError) {
alert(e.name + “:” + e.message);
} else if (e instanceof RangeError) {
alert(e.name + “: “ + e.message);
} // etc
}

Error具有下面一些主要属性:
description: 错误描述 (仅IE可用).
fileName: 出错的文件名 (仅Mozilla可用).
lineNumber: 出错的行数 (仅Mozilla可用).
message: 错误信息 (在IE下同description)
name: 错误类型.
number: 错误代码 (仅IE可用).
stack: 像Java中的Stack Trace一样的错误堆栈信息 (仅Mozilla可用).

函数

  • 完成某个功能的一组语句,把常用的功能写成一个函数
  • 定义函数
    • function关键字
    • 函数名称
    • 参数列表
    • 函数体

argument对象

  • 函数可以接受任意个数的参数,通过arguments来访问

    function SayHi(){  
       if(arguments[0] =="bye"){  
           return;
        }
       alert(arguments[0]);   
     }

    调用:

    //调用形式1:
    <script language="javascript">
         SayHi("test");
    </script>
    // 调用形式2:
    <script language="javascript">
         SayHi("test”,123);
    </script>

    还可以在函数内使用argument.length属性检测参数个数

    function HowManyArgs(){
           alert(arguments.length);
    }

利用arguments对象判断传递给函数的参数个数,即可模拟函数重载。

函数的调用

  • 普通调用:myFunction(arg1, arg2)

  • 无参数调用:myFunction()。跟参数没有关系,会找最后定义的函数

  • 链接调用:

    <a href="javascript:myFunction()">调用函数myFunction</a>
  • 事件触发调用:由事件触发调用函数

  • 其它内部函数

    • Number()、parseInt()、parseFloat()
      • 将数字字符串转换为数字
      • 如果转换失败,则返回“NaN”
    • isNaN()
      • 判断是否不是数字
    • eval()
      • 把字符串当作JavaScript表达式来执行
      • eval(“2+3”)

注意:var a=“aaaa”; 那么parseInt(a)返回NaN;
如果a=“2aaa”,则parseInt(a)返回2;首位不是数字就返回NaN。

在Javascript中Eval函数的使用?
【eval()函数】JavaScript有许多小窍门来使编程更加容易。其中之一就是eval()函数,这个函数可以把一个字符串当作一个JavaScript表达式一样去执行它。
举个小例子:

var the_unevaled_answer = "2 + 3";
var the_evaled_answer = eval("2 + 3");  
alert("the un-evaled answer is " + the_unevaled_answer + " and the evaled answer is " + the_evaled_answer);  

如果你运行这段eval程序, 你将会看到在JavaScript里字符串”2 + 3”实际上被执行了。
所以当你把the_evaled_answer的值设成 eval(“2 + 3”)时, JavaScript将会明白并把2和3的和返回给the_evaled_answer。
这个看起来似乎有点傻,其实可以做出很有趣的事。
比如使用eval你可以根据用户的输入直接创建函数。
这可以使程序根据时间或用户输入的不同而使程序本身发生变化,通过举一反三,你可以获得惊人的效果。
在实际中,eval很少被用到,但也许你见过有人使用eval来获取难以索引的对象。
文档对象模型(DOM)的问题之一是:有时你要获取你要求的对象简直就是痛苦。
例如,这里有一个函数询问用户要变换哪个图象:变换哪个图象你可以用下面这个函数:

function swapOne(){   
    var the_image = prompt("change parrot or cheese","");   
    var the_image_object;   
    if(the_image == "parrot") { 
        the_image_object = window.do> cument.parrot;
     }else  { 
        the_image_object = window.document.cheese; 
    } 
    the_image_object.src = "ant.gif";
 }  

连同这些image标记:

[img src="/stuff3a/parrot.gif" name="parrot"][img src="/stuff3a/cheese.gif" name="cheese"]

请注意象这样的几行语句:

the_image_object = window.document.parrot;  

它把一个图象对象敷给了一个变量。
虽然看起来有点儿奇怪,它在语法上却毫无问题。
但当你有100个而不是两个图象时怎么办?你只好写上一大堆的 if-then-else语句,要是能象这样就好了:

function swapTwo(){   
var the_image = prompt("change parrot or cheese","");   
window.document.the_image.src = "ant.gif";  
}  

不幸的是, JavaScript将会寻找名字叫 the_image而不是你所希望的”cheese”或者”parrot”的图象,于是你得到了错误信息:
”没听说过一个名为the_image的对象”。
还好,eval能够帮你得到你想要的对象。

function simpleSwap(){   
var the_image = prompt   
 ("change parrot or cheese","");  
var the_image_name = "window.document." + the_image;   
 var the_image_object = eval(the_image_name);  
 the_image_object.src = "ant.gif";  
 }  
如果用户在提示框里填入"parrot",在第二行里创建了一个字符串即window.document.parrot.   
然后包含了eval的第三行意思是: "给我对象window.document.parrot" - 也就是你要的那个图象对象。  

一旦你获取了这个图象对象,你可以把它的src属性设为ant.gif.
有点害怕?用不着。其实这相当有用,人们也经常使用它。
我们常常在Javascript中间到Eval这个函数,有些人觉得这个函数很奇怪,可以把一些字符串变的功能很强大在我们需要将普通的字符串转变成具体的对象的时候,就会用到这个函数eval 函数对作为数字表达式的一个字符串进行求值,其语法为:

eval(expr)  

此处 expr 是一个被求值的字符串参数。如果该字符串是一个表达式,eval 求该表达式的值;
如果该参数代表一个或多个 JavaScript 语句,那么 eval 执行这些语句。
eval 函数可以用来把一个日期从一种格式(总是字符串)转换为数值表达式或数字。

对象

  • 对象是属性和方法的组合
    • 属性是对象所拥有的一组外观特征,一般为名词
    • 方法是对象可以执行的功能,一般为动词

JavaScript中分为三种对象:

  • 1)浏览器对象:浏览器窗口window、文档 document、url地址等
  • 2)脚本对象: String字符串对象、Date日期对象、Math数学对象等
  • 3)HTML对象:各种HTML标记:、段落<P>、图片、超链接<A>等

对象创建及废除

  • 对象创建

    • 使用new关键字来创建对象

      var oObject = new Object();
    • 如果构造函数无参数,则不必加括号

  • 对象废除

    • 不必专门销毁对象来释放内存
    • 当没有针对该对象的引用时,被自动废除
    • 把对象的所有引用设置为null时也可以废除对象
  1. 在ECMAScript中有无用存储单元收集程序
  2. JavaScript不必专门销毁对象来释放内存
  3. 当再没有针对某对象的引用时,该对象被废除
  4. 把对象的所有引用设置为null,可以强制废除对象
  5. 当运行无用存储单元收集程序时,所有废除对象都被销毁

JavaScript内部对象

  • Array
  • Date
  • Math
  • String

Array对象:

  • 数组是一组变量的有序集合

  • 通过数组索引来使用一个变量

  • 创建数组

    • 新建一个长度为0的数组

      var array_name = new Array();
    • 长度为100的数组

      var array_name = new Array(100);
    • 新建一个指定长度的数组,并赋初值

      var array_name = new Array(“red”,”green”,1,2,3);
  • JavaScript中的数组长度不固定,赋值即可改变长度(动态)

Array对象的常用方法:

concat:
返回一个新数组;由两个或者更多数组组合而成
var newArray = tmpArray.concat(tmpArray)
join:
返回字符串;由数组中的所有元素连接到一起,元素间的间隔符由参数指定,省略参数则用逗号分隔
var newString = tmpArray.join(“.”)
reverse:
返回一个新数组;由原来的数组反转而成
var newArray = tmpArray.reverse();
pop:
移除数组中的最后一个元素并返回该元素
var newString = tmpArray.pop()
push:
给数组中增加新元素,并返回数组的新长度
var newLength = tmpArray.push(“a”,”b”)
shift:
移除数组中的第一个元素并返回该元素
var newString = tmpArray.shift()

Date对象:

  • 可以用来表示任意的日期和时间,获取当前系统日期以及计算两个日期的间隔
  • 给出星期、月份、天数、年份、小时、分钟和秒表示的时间
  • 要使用new运算符创建一个新的Date对象

NONE(空):创建当前日期对象
yyyy, mm, dd :根据年月日来创建日期对象
yyyy, mm, dd, hh, mm, ss, ms :根据年月日时分秒创建日期对象
yyyy/mm/dd :根据年月日创建日期对象
注意:使用new Date(“2004/7/4”)时,一定要加引号,否则认为是毫秒数

  • Date方法:
    • Date没有直接访问的属性,只有获取和设置的方法
    • 获取日期和时间的方法

      getYear():返回年数;(小于2000年返回两位)
      getFullYear():返回年数;
      getMonth():返回当月号数;(比实际小1)
      getDate():返回当日号数;
      getDay():返回星期几;(0表示星期日)
      getHours():返回小时数;
      getMinutes():返回分钟数;
      getSeconds():返回秒数;
      getTime():返回毫秒数;

    • 设置日期和时间的方法

      setYear():设置年数;
      setMonth():设置当月号数;(set7表示8月)
      setDate():设置当日号数;
      setDay():设置星期几;
      setHours():设置小时数;
      setMinutes():设置分钟数;
      setSeconds():设置秒数;
      setTime():设置毫秒数;

1、JavaScript自1970年1月1日以来一直以毫秒的形式在内部存储日期
2、在读取当前日期和时间时,代码依赖的是客户机的时钟,如果客户机的时间有误,代码会如实反映
3、星期的天数以及年的月数是从0开始的。因此,第0天是星期日,第6天是星期六;第0月是1月。但是每月的天数是从1开始计数的
4、Date对象的setDate、setMonth方法的参数可以为负值,会导致从年或者月借位

  • Date的To方法:
    • toGMTString:使用格林威治标准时间(GMT) 数据格式将 Date 对象转换成字符串表示
    • toLocaleString: 使用当地时间格式将 Date 对象转换成字符串表示
  • Date的Parse和UTC方法:
    • Date.parse (date string ):用日期字符串表示自 1970 年 1 月 1 日以来的毫秒数
    • Date.UTC (year, month, day, hours, min, secs):Date 对象中自 1970 年 1 月 1 日以来的毫秒数

      toLocaleString:2019/1/9 下午5:16:01
      toDateString:Wed Jan 09 2019
      toLocaleDateString: 2019/1/9
      toLocaleTimeString: 下午5:16:01
      Date: Tue Mar 19 2019 00:00:00 GMT+0800 (中国标准时间)
      Date.parse: 1547025361000
      Date.UTC: NaN

Date.parse()方法
解析一个包含日期的字符串,并返回该日期与 1970 年 1 月 1 日午夜之间所间隔的毫秒数。
注意:
1、短日期可以使用“/”或“-”作为日期分隔符,但是必须用月/日/年的格式来表示,例如”7/20/96”。
2、年份值可以用 2 位数字表示也可以用 4 位数字表示。如果使用 2 位数字来表示年份,那么该年份必须大于或等于 70。
如果传递给parse的参数不能解析成不能转换成字符串,则返回NaN

Date.UTC() 方法的参数指定日期和时间,它们都是 UTC 时间,处于 GMT 时区。指定的 UTC 时间将转换成毫秒的形式,这样构造函数 Date() 和方法 Date.setTime() 就可以使用它了。
Date.UTC()方法
Date.UTC(year,month,date[,hours][,minutes][,seconds][,ms])
year 必选项。完整的年份,比如,1976(而不是 76)。
month 必选项。表示的月份,是从 0 到 11 之间的整数( 1 月至 12 月)。
date 必选项。 表示日期,是从 1 到 31 之间的整数。
hours 可选项。 如果提供了 minutes 则必须给出。表示小时,是从 0 到 23 的整数(午夜到 11pm)。
minutes 可选项。如果提供了 seconds 则必须给出。表示分钟,是从 0 到 59 的整数。
seconds 可选项。如果提供了 milliseconds 则必须给出。表示秒钟,是从 0 到 59 的整数。
ms 可选项。 表示毫秒,是从 0 到 999 的整数。

Math对象:

  • 全局对象
  • 使用时不需要创建实例

Math对象的属性:

  • LN10 : 10的自然对数
  • PI : 3.1415926…
  • SQRT1_2 : 1/2的平方根(根号2除以2)

Math对象的方法:

1、Math.abs(number) 返回数字的绝对值
2、Math.ceil(number) 返回大于等于其数字参数的最小整数。 ps:琢磨半天,感觉像进位取整。
3、Math.floor(number)返回小于等于其数值参数的最大整数。 ps:就是个取整。
4、Math.max() 返回给出的零个或多个数值表达式中较大者。
5、Math.min() 返回给出的零个或多个数值表达式中较小的值。
6、Math.random() 产生的伪随机数介于 0 和 1 之间(含 0,不含 1)
7、Math.round(number) 说白了就是四舍五入
8、Math.sqrt(number) 返回平方根

String对象:

  • 和原始字符串类型对应的内置对象

  • 声明字符串:

    var string_name = “string of text”;
    var string_name = new String(“string of text”)
    属性:

  • length:返回String对象的长度

  • constructor 属性,表示创建对象的函数。

    x = new String("Hi");
    if (x.constructor == String)   
         // 进行处理(条件为真)

方法:

  • charAt(i) : 返回指定索引位置处的字符
  • charCodeAt(i) : 返回一个整数,代表指定位置上字符的 Unicode 编码
  • concat(str) : 连接字符串
  • indexOf(str) : 返回 String 对象内第一次出现子字符串的字符位置(注意:从左至右查找,返回整数值)
  • lastIndexOf(str) : 返回 String 对象中子字符串最后出现的位置
  • replace(str1,str2) : 返回将str1替换为str2后的字符串
  • slice(start,end) : 返回字符串中起始位置为start,结束位置为end(不包括end)的子字符串
  • split(separator, limit) : 将字符串以separator作为分割符切割成多个子字符串,并将他们作为一个数组返回;如果有limit参数则返回数组的limit个元素
  • substr(start,length) : 返回一个从指定位置开始的指定长度的子字符串
  • substring(start,end) : 返回一个指定位置之间的子字符串,不包括end
  • toLowerCase : 返回一个字符串,字符串中的字母被转换为小写字母
  • toUpperCase : 返回一个字符串,字符串中的字母被转换为大写字母

stringObject.slice(start,[end])和stringObject.substring(start,[end])方法都接受两个参数,
分别为子字符串的起始位置和终止位置,返回这两者之间的字符串,不包括终止位置的那个字符串。
如果不指定第二个参数,则默认为字符串的长度,即从起始位置到字符串的末尾。

【区别】这两个方法的区别主要是对于负数的处理不同。
负数参数对于slice()而言是从字符串的末尾往前计数,而substring()则直接将负数忽略,作为0来处理,并将0作为起始位置,正数作为终止位。
例如:
substring(2,-3)等同于substring(0,2)

定义对象

  • 在JavaScript中可以使用构造函数Object()来创建自己的对象

    var newObject = new Object;

定义类或对象的五种方式:

第一种方式: 工厂方法

能创建并返回特定类型的对象的工厂函数(factory function)。

function createCar(sColor){    
  var oTempCar = new Object;    
  oTempCar.color = sColor;    
  oTempCar.showColor = function (){    
    alert(this.color);    
  };    
 return oTempCar;    
}    
var oCar1 = createCar();    
var oCar2 = createCar();  

调用此函数时,将创建新对象,并赋予它所有必要的属性。使用此方法将创建car对象的两个版本(oCar1和oCar2),他们的属性完全一样。
使用此方法存在的问题:

  1. 语义上看起来不像使用带有构造函数的new运算符那么正规。
  2. 使用这种方式必须创建对象的方法。每次调用createCar(),都要创建showColor(),意味着每个对象都有自己的showColor()版本,事实上,每个对象都共享了同一个函数。

有些开发者在工厂函数外定义对象的方法,然后通过属性指向该方法。从而避免这个问题:

function createCar(sColor){    
  var oTempCar = new Object;    
  oTempCar.color = sColor;    
  oTempCar.showColor = showColor;    
  return oTempCar;    
}    
function showColor(){    
   alert(this.color);    
}  

在这段重写的代码中,在函数createCar()前定义了函数showColor().在createCar()内部,赋予对象一个已经指向已经存在的showColor()函数的指针。
从功能上来讲,这样解决了重复创建对象的问题,但该函数看起来不像对象的方法。
所有这些问题引发了开发者定义的构造函数的出现。

第二种方式:构造函数方式
function Car(sColor){    
  this.color = sColor;    
  this.showColor = function (){    
    alert(this.color);    
  };    
}    
var oCar1 = new Car("red");    
var oCar2 = new Car("blue");  

你可能已经注意到第一个差别了,在构造函数内部无创建对象,而是使用this关键字。
使用new运算符调用构造函数时,在执行第一行代码前先创建一个对象,只有用this才能访问该对象。然后可以直接赋予this属性,默认情况下是构造函数的返回值(不必明确使用return运算符)。
这种方式在管理函数方面与工厂方法一样都存在相同的问题。

第三种方式:原型方式
function Car(){    
}    
Car.prototype.color = "blue";    
var oCar1 = new Car();    
var oCar2 = new Car();  

调用new Car()时,原型的所有属性都被立即赋予要创建的对象,意味着所有的Car实例存放的都是指向showColor()函数的指针。
从语义上看起来都属于一个对象,因此解决了前面两种方式存在的两个问题。
此外使用该方法,还能用instanceof运算符检查给定变量指向的对象类型。
因此,下面的代码将输出true:
alert(oCar instanceof Car); //outputs “true”
这个方式看起来很不错,遗憾的是,它并不尽如人意。

  1. 首先这个构造函数没有参数。使用原型方式时,不能给构造函数传递参数初始化属性的值,因为car1和car2的属性都等于“red”。
  2. 真正的问题出现在属性指向的是对象,而不是函数时。函数共享不会造成任何问题,但是对象却很少被多个实例共享的。
第四种方式:混合的构造函数/原型方式(推荐)

联合使用构造函数和原型方式,就可像用其他程序设计语言一样创建对象。
这种概念非常简单,即用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。

function Car(sColor){    
  this.color =sColor;    
  this.drivers =new Array("Mike","Sue");    
}    
Car.prototype.showColor = function(){    
  alert(this.color);    
}    
var oCar1 =new Car("red");    
var oCar2 =new Car("blue");    

oCar1.drivers.push("Matt");    

alert(oCar1.drivers);   //outputs "Mike,Sue,Matt"    
alert(oCar1.drivers);   //outputs "Mike,Sue"  
第五种方式:动态原型方式(推荐

对于习惯使用其他语言的开发者来说,使用混合的构造函数/原型方式感觉不那么和谐。
批评混合的构造函数/原型方式的人认为,在构造函数内找属性,在外部找方法的做法很不合理。
所以他们设计了动态原型方式,以提供更友好的编码风格。
动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。
唯一的区别是赋予对象方法的位置。下面是使用动态原型方法重写的Car类:

function Car(sColor){    
  this.color =sColor;    
  this.drivers =new Array("Mike","Sue");    

  if(typeof Car._initialized == "undefined"){    
    Car.prototype.showColor = function(){    
      alert(this.color);    
    }    
  }    
  Car._initialized = true;    
}  

操作对象

  • 使用with语句:

    • 在with语句体内,任何对变量的引用都被认为是这个对象的属性

    • with(object){直接使用对象的属性/方法}
      如:

      //默认:
      document.write(Math.cos(35));
      
      //使用with:
      with (Math){
          document.write(cos(35)); 
          document.write(sin(35));
      }

对象模型

  • 浏览器对象模型-BOM(Browser Object Model)
  • 提供独立于内容而与浏览器窗口进行交互的对象

window对象的属性:

  • document
  • frames
  • history
  • location
  • navigator
  • screen

document对象的属性:

  • anchors
  • forms
  • images
  • links
  • location

Window对象

观察BOM的体系结构,所有的对象都源自window对象,它表示整个浏览器窗口。
Frame实际是个array,如果窗口分祯的话,每个frame相当一个单独的window对象,如window.frames[0]
(注意,top对象的使用,top永远指向最外层的祯,top.frames[0], 因为当你的代码被包括在某个frame中是,
这时候window指向的是当前祯,这也许不是你的原意,所以尽量使用top来避免错误

parent ,self,top,window的关系:

  • parent:如果当前窗口为frame,指向包含该frame的窗口的frame (frame)
  • self :指向当前的window对象,与window同意。 (window对象)
  • top :如果当前窗口为frame,指向包含该frame的top-level的window对象
  • window :指向当前的window对象,与self同意。

window的有用属性/对象与方法:

  • 大小与移动:
    • moveBy,moveTo,resizeBy,resizeTo;
  • 打开popup窗口:
    • open;
  • 系统提示窗:
    • alert(),confirm(),prompt;
  • 状态栏:
    • Status,defaultStatus;
  • 时间间隔:
    • setTimeout(),setInterval;
  • 历史纪录:
    • history.go(-1) //后退

document对象:

唯一BOM和DOM都有的对象。从BOM的角度看,侧重于从集合的角度看问题,把页面划分为不同的部分,以及页面本身的一些属性,如背景色,标题名称等,
由于BOM的实现是基于浏览器的,所以不同浏览器的属性和方法有不一致之处,这造成很多麻烦。
注意一些一致的,常用的属性和方法,BOM把页面分为如下几部分:

  • anchors : Collection of all anchors in the page(represented by <a name=”anchorname”></a>)
  • applets : Collection of all applets in the page
  • forms : Collection od all embeded objects in the page(represented by the <embed /> tag)
  • images : Collection of all forms in the page
  • links : Collection of all links in the page (represented by <a href=”somewhere.htm”></a>)

location 对象:

指浏览器窗口中输入的URL,它有很多属性,即把URL拆为了很多部分,分别表示之,如href,host,port,pathname等

navigator是一个独立的对象,他用于提供用户所使用的浏览器以及操作系统等信息,以navigator对象属性的形式来提供。
更加针对浏览器,举一些IMOS都有的例子如appCodeName,appName, userAgent等

Screen对象:

这个Screen指的是客户计算机的屏幕,如我的机器的Screen.Heigh和Width为768X1024,例如可以用这个属性将浏览器置为全屏:
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);